12-04-2007, 12:04 AM
A simple header image can transform your web site from a plain default installation into a respectable looking source of information.
So here's how it's done...
1) I like to license images from iStockPhoto.com. Find an image that suits your topic and buy the smallest version... they generally cost less than $2.00.
2) Open your favorite image editor. I personally use Photoshop, but anything should work. Create a new blank image with a width of 750 pixels. I generally use a height of 180 pixels as I find it works the best for my needs. Just note the size you use.
3) Take some time to dress up your image. Put some text in there and try to communicate the fact that the site your visitor is on is a portal full of information for them to explore.
4) Save your new image as a jpg or gif and upload it to your /templates/yahoo_grids_1/images folder.
5) Open the /templates/yahoo_grids_1/_style.css file and add the following line to the "h1" properties:
display: none;
6) Alter the ".header" properties as such (fill in your proper height and header image file name)
height: 180px;
background: url(/templates/yahoo_grids_1/images/header_img.jpg);
background-repeat: no-repeat;
background-color: #4FABF1;
border: 1px solid #4FABF1;
border-top-style: none;
text-align: center;
color: #ffffff;
I like to include the background color and text color just in case the image doesn't show up.
If you want to customize your site's look further, I like to suggest altering just the stylesheet... it keeps things simple. But, of course, advanced users can do as they wish.
Have fun with that!
So here's how it's done...
1) I like to license images from iStockPhoto.com. Find an image that suits your topic and buy the smallest version... they generally cost less than $2.00.
2) Open your favorite image editor. I personally use Photoshop, but anything should work. Create a new blank image with a width of 750 pixels. I generally use a height of 180 pixels as I find it works the best for my needs. Just note the size you use.
3) Take some time to dress up your image. Put some text in there and try to communicate the fact that the site your visitor is on is a portal full of information for them to explore.
4) Save your new image as a jpg or gif and upload it to your /templates/yahoo_grids_1/images folder.
5) Open the /templates/yahoo_grids_1/_style.css file and add the following line to the "h1" properties:
display: none;
6) Alter the ".header" properties as such (fill in your proper height and header image file name)
height: 180px;
background: url(/templates/yahoo_grids_1/images/header_img.jpg);
background-repeat: no-repeat;
background-color: #4FABF1;
border: 1px solid #4FABF1;
border-top-style: none;
text-align: center;
color: #ffffff;
I like to include the background color and text color just in case the image doesn't show up.
If you want to customize your site's look further, I like to suggest altering just the stylesheet... it keeps things simple. But, of course, advanced users can do as they wish.
Have fun with that!