Implement A Custom Header In Thesis
One of the most common questions we receive from our customers is how to display a custom logo or banner in the header of our Thesis skins. In this tutorial The Bandits show you how to style your header in Thesis with ease.
Requirements
- Your custom logo or banner.
- Text Editor
- We recommend Notepad++ for Windows and TextMate for Mac OS X
The Instructions
The first step is to record the height and width of the image that you plan to use. Afterwards upload the image to your /custom/images folder. Once you are done, open your custom.css file in your text editor.
Thesis uses the id elements #header #logo to define the site name in the header. Place the following code in your custom.css file to replace the site name with your image…
.custom #header #logo a {
background: url('images/your_image_name.jpg') no-repeat;
display: block;
text-indent: -9999px;
height: (image height)px;
width: (image width)px;
}
As an example if I had a logo named wpbandit-logo.png with a width of 140px and a height of 50px, I would put the following in my custom.css file…
.custom #header #logo a {
background: url('images/wpbandit-logo.png') no-repeat;
display: block;
text-indent: -9999px;
height: 140px;
width: 50px;
}