Monday, April 09, 2007

How to edit the Header background.

The header is the top of your blog where the title of the blog is and it's description. A lot of templates come with graphics there. To change this area just find this code and insert a color code or background image. If you choose an image the image will be sliced.

Here's the part of code to look for:

/* Header */

#header-wrapper {

background: #8b2 url(http://i79.photobucket.com/albums/j160/Brookeumns/IMG_1694.jpg) bottom left repeat;

margin: 0 auto;

padding: 0 0 15px 0;

border: 0;

}

#header h1 {

text-align: left;

font-size: 200%;

color: $pageHeaderColor;

margin: 0;

padding: 15px 20px 0 20px;

background-image: url(http://i79.photobucket.com/albums/j160/Brookeumns/IMG_1694.jpg);

background-repeat: repeat-x;

background-position: top left;

}

Just like changing you background image copy and past in you new http address in both highlighted spaces. Some templates will only have one http address. Again pay attention to the repeat option the directly follows.

To add a color instead of an image change the code to look like this:

/* Header */

#header-wrapper {

background-color: #FFFFFF;

margin: 0 auto;

padding: 0 0 15px 0;

border: 0;

}

#header h1 {

text-align: left;

font-size: 200%;

color: $pageHeaderColor;

margin: 0;

padding: 15px 20px 0 20px;

background-color: #FFFFFF;

background-repeat: repeat-x;

background-position: top left;

}

How do you choose a color? Just go back you your text editor and on the right after you choose a color there will appear a letter code. Just use the pound sign and add the 6 letters.

Here are some start off codes for the basic colors:

Color

Color HEX


#000000


#FF0000


#00FF00


#0000FF


#FFFF00


#00FFFF


#FF00FF


#C0C0C0


#FFFFFF

No comments: