We began using the Thesis theme a little while ago and just love it.
http://diythemes.com/thesis/
It is very good at content management and we think makes a great site. One issue we are currently working on is placing an image header on a few of the sites we are creating with thesis. So we decided to take a screenshot of online message on how this is done. Here is the link
http://diythemes.com/forums/thesis-customization-tips/397-how-clickable-header-images.html

We start off with our image which we created in Keynote.

Now we want to copy this code.
<pre class=”alt2″ style=”border: 1px inset ; margin: 0pt; padding: 6px; overflow: auto; width: 640px; height: 258px; text-align: left;”>/* This line sets up our clickable background image based on the site title’s link */
/* DIY: Adjust the height & width attributes to reflect the actual size of your image */
/* DIY: Change the filename of your image to reflect the actual header’s file name */
.custom #header #logo a { display: block; height: 100px; width: 960px; background: url(‘images/header.jpg’) no-repeat; outline: none; }
/* This line gets rid of the site title & tagline by casting them out to far left field */
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }
/* This line collapses the vertical space of the tagline so that there isn’t unnecessary white space after the header image */
/* This is a bit of a kludge, but it seems to work. */
.custom #header #tagline { height: 0; }
/* This line removes the padding from the header so that the background image sits close to the nav menu, the bottom border of the header, and the sides of the content */
.custom #header { padding: 0; }
</pre>

We will change the height and width to match the height and width of our image. We then need to change the name to match what we are uploading.

We will then save and upload our .jpg

Now we can go and check our site. We can see that it worked. However, its a bit big, so we will go back and adust. However, it is working properly.


1 comment
Comments feed for this article
October 30, 2009 at 3:40 am
canon-5d-shooter
Thanks for posting this valuable tip. If you have a logo such as mine, that is white, and your site is a darker color, is there an easy way to “pad” the header area with white to make the image appear wider?