Podcast 6: Companion 2
Firebug: grab CSS
In the same way that we grabbed the CSS for the Logo, we grab the CSS for the header. Click inspect in fire bug the hover over the banner until you see "header" in the HTML area. It may take a few clicks but you should find the Header-Inner css. Now you want the one with Header-inner and nothing else, on my theme CSS, it is about three or four statements down and should look like this:

Copy and paste this into your CSS. Now you want to grab two more
CSS Statements, you can hover around on the header until you find
these or use this:
div#wrapper-header-inner {
background-color:#8C8C8C;
}
div#wrapper-header {
margin-top: 0px;
margin-right: auto;
margin-bottom: 60px;
margin-left: auto;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
width: 975px;
background: url(img/clear.png) no-repeat 250px;
}
div#wrapper-header-outer {38597-12...93918.css (line 1)
background-color:#004995;
border-bottom-color:#003581;
border-top-color:#A5A5A5;
}
Using the background image technique in
Part one, Place your image inside of one of these areas. Here
is how each area works:- div#wrapper-header inner - Use this if you want a image to go across the entire scree. Let it repeat (it will do this automatically) or you can have only one instance of it by adding the value - no-repeat to the Background property as seen in part one. Make sure the Artibute "Background" Does not say "Background-Image." Simply using "background" lets you use many values (or styles) inside of only one atribute (background: is a atribute. Anything inside of it like a color would be a value)
- div#wrapper-header-outer - You might stay way from this for now. But it is under div#wrapper-header-inner, so you could put one image in the "inner" and then repeat an image in "outer" this will allow many effects.
- div#wrapper-header - This area spans only the size of the body. If you want a typical banner, put it here. You can adjust the height by changing the values of margin top and margin bottom which are included in this style statement.
0 Comments
Click here to sign up now.