inside.
- Includes
- inside.
- unomaha.edu.
- also.
- Code
- Feature
- Headlines
- Graphics
- Float
- Header
- Titles
- Squares
- Rectangles
- Feature
- Javascript
- Random Squares
- Random Rectangles
- Pop a New Window
- More
- Analytics
- Color Schemes
- Fonts
- Validation
This page's main content:
custom palettes.
Now, suppose you want some elements colored one way, and others colored another. This is often the case on the www.unomaha.edu site top-level pages. In this case, you will ammend the basic color-scheme css file you have chosen, by loading a second palette style sheet after it. In that style sheet, 'pal_var.css', you will effectively create overrides that change the elements you wish changed. As an added benefit, if you have the link to the second palette style sheet on your template, you can change the overall look of your site quite easily, just be editing the 'palette_var.css' file. Here is how it works:
After the line in the <head> of your template that points to the 'palette' you'll add a second line, like this:
<link rel="stylesheet" href="http://www.unomaha.edu/css/06/pal_gry.css" type="text/css" />
<link rel="stylesheet" href="http://www.unomaha.edu/yoursite/css/pal_var.css" type="text/css" />
Now if your 'pal_var.css' file looked like the code below, the 'tabs' background color would be changed, and so would the 'headlines' background, and so would the 'footer' background. Use (do not copy and paste):
/* var pallette */
/* nav elements */
#nav_links {
background-color:#FFE6D2; }
/* link lists */
#lselect_headlines h3 {
background-image:url(http://www.unomaha.edu/img/lay/06/headlines_grn.gif); }
/* layout */
#foot {
border-top:6px solid #9892D6;
background-image:url(http://www.unomaha.edu/img/lay/06/foot_pur.gif); }
}
Try it (note: in this demonstration you will see that the background color of the 'search bar' has changed to orange, the background-color of 'headlines' has turned to green, and the footer has changed to purple [not a recommended combination to be sure]. Here is the link: palette_var.
If you clicked the 'palette_var' link above, you should now see that the 'search' bar is orange, 'headlines' is green, and 'footer' is grey.
Be sure to also check out the 'advanced topics' section of the 'inside.>More>Fonts' link at left for related information that tells you how to tie certain font class colors to your 'pal_var' style sheet.
