Modifying the style sheet
This topic explains the concept of cascading style sheets (CSS) and provides examples to help you work with the style sheet. It provides examples of how to adjust the style sheet; it does not provide a comprehensive tutorial or list of every graphic and associated style in the application.
There are limitations to what can be accomplished by changing the style sheet. Because the positioning of elements on a page is determined by the HTML, and because that HTML is generated by the control panel server, the positions of elements on a page are not adjustable via CSS.
While padding, spacing, font sizing and other CSS attributes are adjustable, you might need to experiment to ensure that changed elements display properly within the confines of the HTML layout.
For example, if the HTML contains a table cell that has a fixed width and you change the font size of the contents such that it grows beyond the boundaries of the cell width, the result might not look good, especially across different browsers. Such attributes are specified in the CSS wherever possible to make things easier to adjust, but you might need to experiment to achieve satisfactory results.
To maintain the existing look and feel while changing the color scheme, you would:
Change the color references in each of the styles.
Create versions of the various graphics with different colors.
Either replace the existing graphics with the new ones (using the same names) or adjust the URL specified in the CSS styles that point to those graphics.
It's important to understand how to work with HTML and CSS files. Design data, such as graphics, colors, fonts, etc., are all found in the CSS file. The CSS file defines a series of styles that the HTML uses to display design characteristics. An example showing the interplay between HTML and CSS files is shown below.
<td class=“masthead”>
q The CSS style referenced in the above HTML is called “masthead”
q The CSS file itself contains the definition for this style or class, called “masthead”
.masthead {
background-image: url(images/masthead.jpg);
height: 47px;
width: 830px;
background-repeat: no-repeat;
}
This means a style called “masthead”, when applied to the HTML Table Cell (<TD>) tag as it is above, makes the table cell 47 pixels by 830 pixels with a non-repeating background graphic found at “images/masthead.jpg”
The resulting table cell might display the following in a browser:
To change the masthead, you could change the URL in the class “.masthead” within the style sheet.
To make changes in font and font sizes, use ‘font’ attribute of CSS.
“font-family” attribute describes the font to be used. Since not all fonts are available on all computers (there are thousands of fonts, and most are not free), CSS provides a system of fallbacks. You list the font that you want first, then any fonts that might fill in for the first if it is unavailable, and you should end the list with a generic font, of which there are five: serif, sans-serif, monospace, cursive and fantasy.
font-family: Verdana, Arial, Helvetica, sans-serif;
“font-style” attribute is used for changing text style, such as italics. “font-weight” is used for changing the boldness of text.
font-size:8pt;
font-weight: 100;
For example, consider the overriding of ‘.header-dashboard’ class.
Before overriding
After overriding
You can save a page from the control panel to use as a source for finding page elements and associated CSS class names you want to change. To do this, go to a page in the control panel and click Save As from the browser's File menu. This saves a page, such as ISP_Admin.htm, to your local machine. It also saves a folder, such as ISP_Admin_files, with any images or style sheets used to display the page.
The saved page is rewritten by IE while being saved so that all image and style sheet references point to the files in this new folder. You can open the file in Dreamweaver (or the text or HTML editor of you choice) to identify styles you want to override.
One of the best tools for mapping the graphics on the screen to the CSS styles that control which images are displayed is Macromedia’s Dereamweaver MX 2004. Using this tool, you can click on a graphic and immediately see the HTML and CSS associated with the graphic. A fully functional 30-day trial is downloadable from http://www.macromedia.com.
You can see in the screen shot below that the navigation bar is contained in a <TD> (table cell) that in turn contains another table. This interior table consists of a single <TR> (table row) with each button in the navigation bar implemented via it’s own table cell. Furthermore, the background color of the entire bar is set vial the navbar-background CSS class.
Searching for this class in the CSS file shows that its definition is:
.navbar-background {
background-image: url(../images/menubar.gif);
height: 24px;
So, in order to change the background image for the nav bar we must either change the url to point to a new image, or replace the menubar.gif file with an image of the new color.
background-image: url(../images/eggplant/menubar.gif);
To complete the new color scheme for the nav bar we repeat steps 1-4 for its other components (step 1 is only necessary if there are elements you wish to change that were not present on the page you’ve already saved). Looking once again at the code, we can see that the other components are implemented via the CSS classes navbar-separator, navButton-on, and navButton-off.
<td><div class="navbar-separator"></div></td> <td class="navButton-on">home</td> <td><div class="navbar-separator"></div></td> <td class="navButton-off">organizations</td> <td><div class="navbar-separator"></div></td>
The navButton-off class does not specify an image because it utilizes the background image specified in the navbar-background class. Each of these classes would be identified by looking at the HTML and edited to point to the new image for the new look. In addition, one could change other attributes in the class to change the look. For example, removing the text-transform: lowercase; attribute would prevent the browser from translating all of the button title into lower case (they would be displayed however they were coded in the Control Panel Server). Similarly, the font or size of the title could be changed as well as the amount of padding around the text and the text color, etc. Here is the CSS source for these classes:
.navButton-on {
font-size: 12px;
line-height: 24px;
color: #FFFFFF;
background-image: url(../images/menuButton_on.gif);
padding-right: 18px;
padding-left: 18px;
text-transform: lowercase;
.navButton-off {
cursor: hand;
voice-family: "\"}\"";
voice-family: inherit;
cursor: pointer;
.navbar-separator {
background-image: url(../images/menubar_divider.gif);
width: 2px;
By changing each of these to point to the new purple graphic, the new look of the nav bar is achieved. This process can be repeated for each element of the interface one wishes to adapt to a new look.