This is a simple tutorial for Pixelpost to change the header title text to an image in the Horizon template. Most of the photoblogs that use Horizon or demos show an image but after the template’s installed, just text for the header shows up. Being that the image was one of the many reasons I wanted to use the horizon template in the first place, I contacted the creator. You can see an example of the logo image on the his photoblog at Cancerbox . I really liked this effect especially with the moving comment section that fits in with the white of the logo. You’ll need a text or CSS editor and a way to upload the new file when you’re done.
Make a copy of your old horizon.css file located in the \templates\horizon\styles\ directory so that you may switch back if necessary. Use the following css code to replace the existing #header .inside and #header .inside h1 a entries in the horizon.css file:
#header .inside {
background:url(../YOURLOGO.gif) top right no-repeat #000;
height:100px;
}#header .inside h1 a {
float:right;
/*text-align:right;*/
color:#666;
padding-top:30px;
font-weight:normal;
width:300px;
height:60px;
display:block;
text-indent:-9999px;
}
All this does is move the text -9999 pixels away from the viewing area so that no monitor could possibly see it and places an image where the text used to be. You can replace the code ‘YOURLOGO.gif ‘ to any filename you want your logo image to be. Now all you need to do is replace the old horizon.css file with the new one (NOT the backup copy) and upload a new logo image to the \templates\horizon\ directory and you’re set to go. I’m not responsible if you mess anything up but it’s pretty hard to do especially if you made a backup. I’ll be glad to help you if you are having problems. All this was sent directly from the creator of the horizon template. Thanks Scott!
Popularity: 27% [?]
