Working With Site-Specific and Page-Specific Styles
You can use site-specific and page-specific styles using built-in functionality in the layout. This enables you to keep best coding practices and make visual changes in the easiest possible manner.
Required Files
The file sitestyles.css must be located in the /includes/ folder, which must be in the root folder of the site. If your site does not use site-specific or page-specific styles, this file should be empty. The layout links to this file in the document header automatically; no further action needs to be taken.
If you are using page-specific styles, you must use the bodyclass attribute in the cf_layout. See Page-Specific Styles below.
Site-Specific Versus Page-Specific
Site-Specific refers to styles that apply to all pages across your site. Page-Specific refers to styles that apply to only one page in your site. Web pages that use page-specific styles also use site-specific styles, and the page-specific styles can be additional styles or change the effect of site-specific styles.
Site-Specific Styles
Site-specific styles are defined in the sitestyles.css. They are normal CSS declarations and behave as normal CSS behavior. You can use them to cause special formatting and display across your site in a central location, or to override default styles in the layout.
Site-specific styles take effect the moment you add them to sitestyles.css. No additional steps are necessary.
See Proper Use and Commenting for rules and guidelines on using styles.
Page-Specific Styles
Page-specific styles are defined in the sitestyles.css, below any site-specific styles. If you put them in the middle of or above the site-specific styles, the effects they cause may not happen at all.
Page-specific styles must be used with the bodyclass attribute in the layout. bodyclass gives the page's <body> tag a class, which allows you to target styles in the sitestyles.css. For example, in the page that you want to use page-specific styles, you add the bodyclass attribute to the cf_layout tag:
<cf_layout bodyclass="bluepage" ... >
In the sitestyles.css, you prefix body.bluepage to any style selectors you use:
h1 { color: red; }
body.bluepage h1 { color: blue; }
Page-specific styles are normal CSS declarations and behave as normal CSS behavior.
Proper Use and Commenting
CSS is a powerful visual formatting tool. Support for it is standard across modern browsers, but there are still quirks and differences between different browsers that bedevil developers. For this reason, we recommend dealing with site-specific and page-specific styles only if you have experience with developing CSS, and that you stay away from advanced CSS topics like positioning and visual arrangement. Colors, images, font and text effects give you enough play room to distinguish your site with little work.
Do not change the layout header or footer with your styles. Any changes we come across will be removed immediately, and the department involved will be contacted to explain the situation. Repeated violations may be grounds for loss of access to the site. Please contact the Web Design & Development department with any questions you may have.
We require all CSS be commented. This promotes good coding practices and helps future developers maintain and change styles. The comments need not be verbose or overdone, but should be clear and convey what the style is doing and the reason it is there. You may use inline or block comments as you desire, but please be consistent.
It should not be necessary to use css hacks to hide effects from certain browsers. Color, image, font and text effects are usually standard across browsers; only advanced positioning and visual arrangement styles may require css hacks. Please do research and testing to make sure there is no other way to acheive the desired goal. If you must use a hack, though, use comments to explain what the problem is, what browsers are affected, and the desired goal. Then use inline comments to mark the specific style attributes that are targeted by the hack, and the browser or browsers they affect.
/* We need this block to float left, but MacIE5 does not display it properly. We will declare the style for that browser, then do the correct with for all other browsers. */
div.rightfloat {
width: 30%;
margin-left: 70%; /*MacIE5 */
background-color: green;
}
/* Now the correct styles for all other browsers. \*/
div.rightfloat {
margin-left: 10%;
}
/* End hiding. */
Additional Style Sheets
The layout has an additional attribute, additionalstyles. Its value is a comma-deliniated list of css files:
<cf_layout additionalstyles="styles1.css,styles2.css,styles3.css ... >
When defined, the layout will loop through the list of files and create a <link> tag to the files. The files must be in the site's /includes/ folder.
This attribute is provided as an additional formatting option. Most formatting changes can be handled using the sitestyles.css.
