In This Article:

    CSS Tips and Tricks

    In This Article:

      You can modify the appearance of your salsa pages using something called CSS. (Check out that link if the term CSS means nothing to you!) To make these changes you will have to do the following:

      1. Open the template you will be using on the salsa page you want to modify. (To open your template, navigate to your Website package and click on the sub-menu "Templates" link.)

      2. Once you have opened your template, look for the following html:

      <html>
      <head>
      <title>Organization Name</title>
      </head>
      

      3. You might have a lot of code between the tags; that is fine. Just find a spot to insert this code:

      <style type="text/css">
      </style>   

      4. Once you have done that, you can add any of the code listed below; just make sure you paste it between the two tags.

      Here is an example of the final template changes you would make to hide the event time/date box on a Salsa event page:

      <html>
      <head>
      <title>Organization Name</title>
      <style type="text/css">
      body .salsa .date
      {
      display: none;
      }
      </style>
      </head> 

      General:

      To make sure that list item bullets appear on your salsa pages, add this bit of css to your template:

      body .salsa li
      {
        list-style:disc;
      }  

      To modify the way the "Wecome back, we remember you..." message appears that appears. You can hide the bit of text that directs users to the profile manager. To do this, add the following to your default template:

      body .salsa #profile
      {display: none;}     

      To change the font on salsa page, you can change it using the following css. (Replace the font family with whatever type of font you are looking to use):

      body .salsa label
      {
      font-family: georgia, times, serif;
      }       

      Event pages:

      To hide the box that displays event start and end times:

      body .salsa .date
      {
       display: none;
        }
              

      Tell a Friend Pages:

      To hide the "send using Gmail" option:

      .salsa a.button {
      display:none !important;
      } 
      

      To hide the "send from your own address book" option:

      body #externalsend
      {
       display: none;
        }          

      Theming Profile Manager Pages

      Theming your profile pages is a great way to customize one more aspect of your Salsa pages. Customizing your profile pages can be very rewarding but requires use of CSS . Here I'll go over some common requests. We'll try not to assume you have knowledge of CSS, but will assume some HTML basics. We'll introduce some important CSS terms and techniques, but also provide working examples that are ready to be cut and pasted into your templates.

      Removing a Tab

      A typical request is how to remove a tab. The answer is you can't really 'remove' a tab, but you can make it disappear using CSS.

      CSS is applied to an element of a webpage using selectors . Selectors relate to your webpages' HTML. They can be a HTML tag or a tag's id or class . Since we're looking to remove a tab we'll want to find the CSS selector that relates to that tab. By viewing the source of our web page we see that each tab is a and each has a unique id. You can of course find the id's for each tab by viewing the source of the profile page but I'll list them here as well:

      • Home Page id="tab1Tab"
      • Your Profile id="tab2Tab"
      • Events id="tab3Tab"
      • Donations & Fundraising id="tab4Tab"
      • Action History id="tab7Tab"

      Now that we have a selector to apply our CSS, we need to know what CSS property and value to use. Properties are types of styles available in CSS, things like font-size, color, width; each property needs a value, font-size: 10px; etc. The CSS property and value we'll be using here is display: none;.

      If we wanted to hide the events tab we'd use the id of the event tab as our selector with the # symbol which indicates an id. Also to ensure we're being specific enough I'll add the body and .salsa selectors. 1 This tells the browser we'll styling the element with the id of tab3Tab that is inside .salsa and body.


      body .salsa #tab3Tab {
      display: none;
      }

      You'll notice that when this is added to our template the event's tab is gone. If we had wanted to remove the donation tab the CSS would be the same except we'd use #tab4Tab in place of #tab3Tab.

      Removing the space for events

      Now that I've removed the events tab I'd also like to remove everything that relates to events on the profile home page.

      Just as we did with the events tab, we need to find the selector in the HTML that deals with the events' information. We'll find that the text I'm looking to remove is contained in two divs and each div has its own class. The search tool is in a div with class="search". The results of the search would go in the div class="searchresults". Now that we've got our two selectors we can build our CSS again.


      body .salsa .search {
      display: none;
      }

      body .salsa .searchresults {
      display: none;
      }

      Notice when I added a second style for the second div, I started on a new line.

      Changing text and fonts

      Changing fonts with CSS is also very easy. Let's change the fonts on the 'your profile' page. Let's say we want to make the font-size of each section larger, bolder and pinker. First step again is finding our selectors. In the HTML we'll see that these 'headings' are each in a tag, and they don't have any class or ids. This is ok, we can still style them using the HTML selectors. (What we won't be able to do is style them individually, only collectively.) The selector for an HTML tag is simply the name of the tag. I've been using the body tag in my selectors above and that relates to . Here will use:


      body .salsa legend {
      font-size: 25px;
      font-weight: bold;
      color: pink;
      text-transform: capitalize;
      }

      A couple new points here. First we see that we can add more then one style to a selector's declaration block , we put each on a new line but keep them inside the curly brackets. Also we used 4 new CSS properties, font-size, text-transform, font-weight, and color. For color we used the value of pink. CSS and HTML have a number of basic colors which can be written out, but we could use the hexadecimal value of a color. If we can wanted to use pink but with it's hexadecimal value we would have used color: #FFC0CB;; these two values, pink and #FFC0CB are equivalent. 2

      Next I want to change the fonts of each field's label:


      body .salsa label {
      font-size: 15px;
      font-variant: small-caps;
      font-family: "Times New Roman", Times, serif;
      }

      Styling Forms

      Try the following.


      body .salsa label {
      width: 140px;
      }

      body .salsa .submit {
      width : 125px;
      }

      body .salsa .formRow input, body .salsa .formRow select, body .salsa .formRow textarea {
      float: left;
      margin-bottom: 7px;
      clear: none;
      width: 200px;
      }

      The first style sets each label to a static width, regardless of the text it contains. The second style does something very similar for the submit buttons. I've done something 'advanced' in the selectors for the last style. This is actually 3 sets of selectors with the same style. It's the same as if I had done this.


      body .salsa .formRow input {
      float: left;
      margin-bottom: 7px;
      clear: none;
      width: 200px;
      }

      body .salsa .formRow select {
      float: left;
      margin-bottom: 7px;
      clear: none;
      width: 200px;
      }

      body .salsa .formRow textarea {
      float: left;
      margin-bottom: 7px;
      clear: none;
      width: 200px;
      }

      There are also 'advanced' CSS properties here. I've used both float and clear, which are related properties. Floating does just what it implies, instead of being in it's own line it floats next to the elements around it, our labels on this page. Clear stops floating elements.

      What to do with this; and how to learn more CSS

      CSS is applied to your templates in your HTML's . There are 3 ways to add CSS to your HTML; inline, embedded, and linked. The way I've used in this document is the embedded method. In the embedded method your CSS goes between in the HTML tag .

      The linked method uses an external CSS file, which is linked from your HTML document with . The inline method should be avoided. It involves adding CSS as an HTML attribute.

      There are a number of great CSS learning resources on the web. My favorite is HTMLDog. Another popular and useful guide is W3Schools.


      1: The reason I'm adding these additional selectors is to avoid CSS specificity conflicts. CSS has a set of rules that determine which style to use when there are two or more styles being applied to the same HTML element. This happens a lot in Salsa because Salsa has its own set of styles it applies to it's pages. When we are styling something that Salsa has already styled we'll be in conflict. Part of the CSS specificity rules state that styles that come last in an document will take precedent as long as the specificity is the same, and Salsa styles always will come last. To ensure we are always being more specific then Salsa's selectors we'll add the body selector which gives us one more 'point' of specificity. As always HTMLDog has a good page that explains CSS specificity rules.

      2: For a list of color and Hexadecimal values see W3Schools HTML Colors page.

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

      Comments

      0 comments

      Please sign in to leave a comment.