Salsa Scoop> tag: ”blog:Web Templates“

Theming your Profile 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. I'll try not to assume you have knowledge of CSS, but I will assume some HTML basics. I'll introduce some important CSS terms and techniques, but also provide working examples that are ready to be cut and pasted into your templates.

If you aren't interested in learning CSS, or already know it and just want some code snippets, look for the blue boxes. The HTML in the blue boxes is code ready to be pasted into your template.

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 <li> 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.

<style type="text/css">
body .salsa #tab3Tab {
display: none;
}
</style>

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.

<style type="text/css">
body .salsa .search {
display: none;
}

body .salsa .searchresults {
display: none;
}
</style>

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 <legend> 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 <body>. Here will use:

<style type="text/css">
body .salsa legend {
font-size: 25px;
font-weight: bold;
color: pink;
text-transform: capitalize;
}
</style>

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:

<style type="text/css">
body .salsa label {
font-size: 15px;
font-variant: small-caps;
font-family: "Times New Roman", Times, serif;
}
</style>

Styling Forms

Try the following.

<style type="text/css">
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;
}
</style>

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 <head>. 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 <style>.

The linked method uses an external CSS file, which is linked from your HTML document with <link rel="stylesheet" type="text/css" href="URL.css" />. 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.