Horizon Template Image Header Logo Tutorial

[BitBox Studio]

I just wrote a post which is just a simple tutorial to change the header title text to an image in the Horizon template. I really liked the way Scott Craig did it over at cancerbox (http://www.cancerbox.com/). And when i installed the template the header was just text. I contacted Scott and he was kind enough to go through it with me. Check the link below for a really simple tutorial. mostly a copy and paste job. Figuring out what your image is gonna look like will be the hard (fun) part. Enjoy!

Horizon Template Image Header Logo Tutorial for Pixelpost (http://www.bitboxstudio.com/horizon-template-image-header-logo-tutorial-for-pixelpost/45/)

[vshnay]

Unfortunatly i think you moved or did something to the link, the page is not there, can you please report it again, i would love to see the tutorial. Thank you.

[dhdesign]

vshnay -

It looks like that website is undergoing a website redesign (http://www.bitboxstudio.com/).

I did a quick check of Google's cache for that page, and you can still read the text of the post here (http://64.233.183.104/search?q=cache:Oq5ZwZbff10J:www.bitboxstudio.com/horizon-template-image-header-logo-tutorial-for-pixelpost/45/%3Ffrom%3Drss+Horizon+Template+Image+Header+Logo+T utorial+for+Pixelpost&hl=en&client=firefox-a&gl=us&strip=1).

I'll also post it below in case Google's cached page disappears:



Horizon Template Image Header Logo Tutorial for Pixelpost
(originally posted on bitboxstudio.com)

June 25th, 2008 Posted in how to, pixelpost

This is a simple tutorial for Pixelpost to change the header title text to an image in the Horizon template. Most of the 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 (http://www.cancerbox.com/). 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!

[BitBox Studio]

@dh: thanks for helpin...yeah....COMPLETE site redesign....and in the process of movin the blog....an unknown problem occurred. who knows....i'll repost but the address won't be the same. but yeah.....thanks for the helping hand for vshnay.

@vshnay: yeah.....i LOVED the look on the original authors site....almost a necessary change right? good luck. have fun....and if you need anything, this forum is great for it....as you've found out from dhdesign.

have a good one guys. -bitbox