In This Article:

    Overriding default styles of salsa forms with custom CSS

    In This Article:

       


      Overriding default styles of salsa forms with custom CSS

      When editing a template you'll notice a input field labeled: "(optional) Replace our default styles with this stylesheet: (use only if you really can't stand our styles)."

      This is an advanced feature only to be used by those with a very good understanding of CSS. This field accepts a URL of a CSS style sheet. It will completely remove all default Salsa styles and use only your own. Many Salsa tools depend on these default styles to work properly, so overriding it can break tools.

      That being said, this option is available for those who would rather recreate any necessary styles than style over a select few. It is important to note, we cannot provide any template support for those using this option.

      In some cases you might find you want or need to override Salsa's default CSS. What we recommend in these cases is that you take advantage of CSS's built in specificity rules and override particular styles in your header. This page has great info about CSS specificity: http://htmldog.com/guides/cssadvanced/specificity/

      So for example if you wanted to change the style of an LI- Salsa's default style is:

      .salsa li{
       list-style:none;
       clear:both;
       text-align:left;
      }

      To override that, you'll want to be more specific with your selectors. Adding a simple body selector does the trick.


      Moving targets in Actions

      When you have an Action where you have a long list of targets, the form for the Action displays after the list of targets, which looks a bit strange and requires more scrolling.

      Here is the code you need to add to your template for the fix. This code goes in the CSS portion of your code, which should be in the <head> section between the <style type="text/css"> and </style> tags:

      You should make sure that if your template contains a footer, you add this to the CSS for the footer:

      This will ensure that the footer appears after any content on the page.


      Changing a list to add visible bullets

      By default Salsa does not display bullets in HTML list items. To override this behavior, use the following CSS snippet:


      Changing the appearance of Salsa form items

      By default, Salsa's form items are probably not styled according to your organization's color palette and design style. You can override them with the following CSS:

      Tip:The style above is for demonstration purposes only, and is horribly ugly. Don't use it.

      You can change the type of the input above if you need to style other input types, like textareas or submit buttons.

      If you have further questions about using CSS to style pages, please reference the tutorial above, or ask your question on SalsaCommons -- someone will probably be able to help you!

      Was this article helpful?
      0 out of 0 found this helpful
      Have more questions? Submit a request

      Comments

      6 comments
      • Is there a location where we can view all of the Salsa default CSS?

      • Hi Kristopher,

        Different Salsa pages call on different CSS files - for example, advocacy pages call action.css, while donation pages call style.css. 

        The best suggestion to see what CSS is available depending on the page type is to install Firebug on FIrefox, right click anywhere on your Salsa page, and choose the "Inspect Element with Firebug" option from the menu. Then you'll click on the CSS menu, and from there you can pull up the list of files that are effecting the CSS. Check this video for those steps: http://screencast.com/t/8yTihuUP

        From there, you can call up those individual CSS files to go line-by-line, or you can also use Firebug to explore what CSS is being called on each individual element.

        Good luck!

         

      • How do I remove "required" from a salsa field?  I don't want to require the First Name in my signup page.

            <label for="f2">

                First Name <span class="required"> * </span>

            </label>

           <input id="f2" class="blockInput salsa\_first\_name" type="text" size="25" value="" name="First\_Name" title="First Name"></input>

      • Hi Meghan,

        Simply unclick the First Name field's checkbox on the Supporter Info tab. That should take care of it.

        unclick.png

      • Duh.  I knew that.  Thank you!

      • Is there any way the out of the box forms can look a little nicer than they do now? On donation forms the font is tiny, there's no styling on radio buttons, and there's no spacing between "credit card information" and credit card info fields. I understand the options are limitless with CSS, but as a customer who just spent a lot of money to move to your system it's a little irritating to have to hire a contractor to make basic changes like text formatting. 

      Please sign in to leave a comment.