WSU CSS Web Templates
From WSUWiki
Contents |
Wikiweb
A place to solve problems and share knowledge related to web site development, especially development using the new CSS-based templates.
What's a wiki and how do I use it?
Get your questions answered in 3 minutes; all you have to do is watch this video: http://www.youtube.com/watch?v=-dnL00TdmLY
How to: place a site ID banner in the CSS-based WSU template
View your page code in your favorite (or perhaps only) web page editor (e.g., Dreamweaver, Visual Studio, etc.).
Find the following (it probably appears on several lines):
- <link href="http://www.wsu.edu/navigatewsu/gen2/print.css" rel="stylesheet" type="text/css" media="print"/> :<style type="text/css"> <!--
Just below the above bit of code you should see the beginning of the local (page-level) CSS stylesheet. Copy the following bit of code. It doesn't really matter where you paste it, but it's convenient to place it at the top of the local (page-level) CSS stylesheet.
- #siteID { background-image: url(http://cahnrs.wsu.edu/images/tittlebarcahnrs.jpg); background-repeat: no-repeat; }
Now change the image URL path -- url(http://cahnrs.wsu.edu/images/tittlebarcahnrs.jpg -- to reflect the path to the image on your server.
NOTE: The above code bits are tagged here (that is, in this Wiki) as "nowiki". When you paste the code, make sure the "nowiki" and "/nowiki" tags don't get pasted, too. The words nowiki and /nowiki will appear in <angle brackets>.
How to: create a cool "floating" graphic look
Check out the graphic that appears to float "up" into the site ID zone on the University Relations page.
Here's how it was done (correct this if it's wrong!)
There's two elements involved ("slices" in image-based web speak).
In other words, the designer of this page created a single master graphic file and then sliced it into two separate files or elements.
Those two elements are positioned using the local (page-level) CSS stylesheet (when a local stylesheet is present on a page, it overrides all others; note: "override" doesn't mean replace. The master stylesheet and the site stylesheet are still in effect. But if there is any conflict, local wins). Here are the two CSS calls:
#siteID { background: url(http://www.wsu.edu/university-relations/temp_images/siteID.jpg) no-repeat scroll 125px 0px; border: 0; height: 75px; } #main { background: url(http://www.wsu.edu/university-relations/temp_images/bg-main.jpg) no-repeat; padding-top: 260px; }
And here are the two element slices:
The designer has cleverly (by planning ahead) created a graphic that, when sliced and then cropped, fits precisely into the space planned for it on the page.
