Header is quite sensitive area of any layout as it contains your brand identity i.e your logo. It perfectly described the motive of the website. In Thesis wordpress theme people often forget to change their logo and live with traditional default layouts. In this tutorial we would like to drag your attention on the thesis header and logo customization.
Before going further on thesis customization we should know about the custom keys. All the thesis customization is carried with the help of files located in custom folders. Mainly there are two files:
- custom.css
- custom_functions.php
How to change the thesis header with your own logo
If you want to change your logo then you should use the following style sheet in your custom.css file. Copy and paste this code in your custom.css file and upload your logo image in custom/images folder of the thesis theme.
.custom #header #logo a { display: block; height: 80px; width: 410px; background: url(images/header.png) no-repeat; outline: none; }
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }
.custom #header #tagline { height: 0; } .custom #header { padding: 0; }
.custom #header {border-bottom:none;background-color : transparent; }
.custom #header_area .page {padding-top:0;}
.custom #header {height:80px;/*background: #333 url('images/bg-body.png') no-repeat; background-position:bottom right; border-bottom:none;}
Few properties of the logo used in above style
- height: –px– Height of your logo (you should describe your own logo height here).
- width: –px – Width of your logo (you should describe your own logo width here).
- background: – Logo url (you should describe your own logo url path here).
How to change the header background
In the above described styles( for changing logo) we already used a header background to matched it with the layout. Here is an example:
.custom #header {height:80px; background: url('images/bg-header.png') no-repeat; background-position:bottom right; border-bottom:none;}
Points to be noted:
- Don’t forget to upload the images in custom/images. In hurry we upload the images in the root images folder and face the problems.
- Don’t try to edit another style sheet apart from custom.css. In case you are a css expert you can carry the changes but you need to change them again at the time of thesis upgrade. So its better to change the css only from custom.css.
Lot more thesis tutorials are coming soon in this series. Do drop in comments for any queries and suggestions.
Update
You can easily add the texts in the thesis header as its very easy to customize the thesis header.
Just add any hook for example
function honey_header(){
?>
< center >< h1 style="text-align:center;" >{ Your Title }< /h1 >< /center >
add_action('thesis_hook_header','honey_header');
Here
< h1 style="text-align:center;" >{ Your Title }< /h1 >
is responsible for the style of the text heading on header.
No related posts.
{ 1 trackback }
{ 11 comments… read them below or add one }
Nice tweaks Honey, i was always confuse with Thesis while trying to edit it. As it is very sensitive theme, while changing the style.css all the thumbnail image disappear , can you suggest any WordPress plugin to get it back.
Himanshu’s last blog post..Multi-Login Chatting Site Meebo for Facebook Yahoo MySpace ICQ
Thesis thumbnail images is carried through the default options in each post. You need to put the thumbnail image url in that option.
Thanks for the useful tip.I thought thesis is going to be very simple theme and glad it is. All thanks to you.
Harsh Agrawal’s last blog post..What is RT or retweet in Twitter?
great, this explanation in layman language made the customization quite simple,otherwise people were banging their head for a simple correction.
ashish’s last blog post..10 movies which make Indians feel proud: Blockbusters of all time
@tongstromberg These are some I used for #thesis http://bit.ly/bi1ac http://bit.ly/As6ey http://bit.ly/gbZ2s http://bit.ly/zbGXX
This comment was originally posted on Twitter
Thanks again Honey for this nice tutorial, I just added a new logo in my blog. http://www.helloicy.com. Highly recommended tutorial.
Nice Tutorial
Thanks for this wonderful tutorial. I have follow all the steps as described by you and i have uploaded the header image in my blog http://infoedutech.com. You can check it out.
I would like to ask you that after navigation it is not showing some white space. Can you help me out in this?
I like this post very much , but I also want to add text links at the header and centering all the header data like blog title tag line and the text links
please waiting foe your replay
You can easily add the texts in the thesis header as its very easy to customize the thesis header.
Just add any hook for example
function honey_header(){ ?> < center >< h1 style= "text-align:center;" >{Your Title}< /h1 >< /center > < ?} add_action('thesis_hook_header','honey_header');Here < center >< h1 style= "text-align:center;" >{Your Title}< /h1 > is responsible for the style of the text heading on header.
Note: Don't forget to remove gaps from < center >< h1 style= "text-align:center;" >Your Title< /h1 >
The code didn’t work.
I uploaded the logo to custom/images
I pasted your code in custom.css and changed image file name accordingly
FAIL