Changing the header on my blog

jenstewart · Post by **jenstewart** » Fri Jun 08, 2007 7:18 am

I am in need of some help changing the header on my blog. I did it awhile back but I have forgotten how to do it and how to access the code to do it. can anyone help me with this? I want to design a new header but I am stuck cause I cant remember how to do it. If anyone can help that would be great.

Jen

commanderx · Post by **commanderx** » Fri Jun 08, 2007 9:08 am

The easiest way is (imho), to find out which image is used for the header (take a look into your style.css) and exchange this file with a new one.

For example, in andreas00 its:
#header {
color:#ffffff;
background:#ffffff url({TEMPLATE_PATH}img/s9y_header.jpg) bottom left no-repeat
height:150px;
margin:0 0 10px 0;
padding:0;
}

jenstewart · Post by **jenstewart** » Fri Jun 08, 2007 11:46 pm

but how to i access the style.css? is it in the login screen? I am just so lost to how to do this.

Post by **Don Chambers** » Sat Jun 09, 2007 12:42 am

This appears to be your site, correct? : http://www.jenstewartphotography.com/blog/

Found that from a link in another post you made on this forum.

Your current header/banner image is located here:
http://www.jenstewartphotography.com/bl ... /front.jpg

The image is 760 px wide by 275 pixels tall.

The file style.css is located at http://www.jenstewartphotography.com/bl ... /style.css

This is a text file and can be edited with wordpad, notepad, etc. Open the file and look for this code segment:

Code: Select all

#header {
color:#505050;
background:#ffffff url(templates/andreas00/img/front.jpg) bottom left no-repeat;
height:250px;
margin:0 0 10px 0;
padding:0;
}

You can see that the current image is referenced by the line:

Code: Select all

background:#ffffff url(templates/andreas00/img/front.jpg) bottom left

The image is specifically identified, and it is positioned bottom, and left. It also specifies that the entire header is only 250px tall, which means the top 25 pixels are being cut off. Your page is currently 880 px wide, so the header is not wide enough to fill the page.

Anyway, place your new header graphic in the same folder as the old one, and change the file name (front.jpg) in the line of code I mentioned above to the name of this new header image.

jenstewart · Post by **jenstewart** » Sat Jun 09, 2007 8:01 am

can i just drag and drop the new header i designed into the folder where this is located?http://www.jenstewartphotography.com/bl ... /front.jpg and just name the new header front.jpg? Instead of going into all the code. I have filezilla so if this would be ok then I can do that.

Post by **Don Chambers** » Sat Jun 09, 2007 4:38 pm

Yes. If the filename is the same, and you place it in the same folder. You will probably need to refresh your browser, or clear its cache, to force it to load the new image.