socialgo

Podcast 6: Companion 2

Published by: ezra vancil on 7th Apr 2009 | View all blogs by ezra vancil
In this part two to Podcast number 6 we will look at placing images in the header. Why do this when we can do it in the Network designer? There are many reasons, but the best one is--control.  You can adjust sizes with CSS where this is limited in the designer, you can also adjust the actual placement of the image in side of the div. This is very helpful for lining up graphics for seamless Effects.There is also other elements that the designer dosn't let you have access to.

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:

headerinnercode.png
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:

  1. 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)
  2. 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. 
  3. 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. 
see it live on the podcast > part two > one, three

Comments

0 Comments

     
Please login or sign up to post on this network.
Click here to sign up now.