In the “x-ray” of my website above you see the page suffix which is inserted into the body element, and the module class suffix inserted lower down in the HTML. Since CSS and HTML are hierarchical, selector classes lower down will always inherit the styles of elements higher up, unless a new style is called by the lower selector. That is to say child elements of a selector class will always accept the styles determined by the “nearest” selector. For instance, if I assigned a style: color:#000; (black text) to my page suffix ‘ss-home-page’ and a style: color: #fff; (white text) to my module class suffix ‘logo-1’, alll child elements of the class selector ‘ss-home-page’ will have black text. But once the parser reaches the ‘logo-1’ class suffix alll text inside the module will be white. This is the essense of Cascading Style Sheets; styles cascade down through the HTML until they are overridden by another selector. The ability to target certain elements through class selectors is a very powerful feature of CSS since you can write styles that apply to just one part of the HTMl heirarchy or determine different looks for different pages.
Let’s take a simple real world example. In this example we will write some simple CSS which calls a different background image depending on the Page Suffix assigned to the menu item. To do this follow these steps.
1. In the menu item of the page that you want to have a different background image navigate to the Page Display section of the menu item. See screen shot below:
Type in your Page Suffix in the text box. If you already have classes in there as in the screen shot above its OK you can still add your class . An element can have multiple classes assigned to it. Just go to the end of the list of classes already there. make a space, and type in your class after the others.
2. Once your class is entered save your menu item. Remember the name of your class because now we are going to add the custom class to the custom style sheet.
3. Under your components section open up your OSE fileman. If OSE filleman doesn’t work for you a great free alternative solution for a FTP file browser is extplorer.
4. Once you have gained access to your site file system navigate to the templates/your-template-name/css/your-custom-style-sheet. See our last post about suffixes to learn how to find your template’s default style sheet.
5. To change the background image of the menu item using the Page Suffix enter the following code into your custom stylesheet:
.your-class {background: src('path-to-my-background-image') no-repeat;}
6. Navigate to the menu item to which you assigned this class and you should see your background image appear on that menu item.
Go ahead and give it a try. Report back here if you have any questions or difficulties.
I hope you found this brief posting helpful.
For my final post in this series on how to utilize our Gantry templates we will talk about how to create a mobile version of your website.
Stay Tuned!