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.
Related posts:
- How to create commenting icons for websites and applications. Bubble icons are widely used by the designers and developers...
- Micro Blogging Startup – Kwippy Kwippy one of the fastest growing micro blogging platform where...
{ 3 trackbacks }
{ 26 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.
How to customize the Thesis Header in few easy steps http://is.gd/17d3e
Good one! RT @honeytech: How to customize the Thesis Header in few easy steps http://is.gd/17d3e
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?
Reading How to customize the Thesis Header in few easy steps | Tech Prone http://is.gd/17oRC
Harsh Reading How to customize the Thesis Header in few easy steps | Tech Prone http://is.gd/17oRC. http://ff.im/-4dGTy
How to customize the Thesis Header in few easy steps | Tech Prone http://nf2et.tk
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
RT @tweetmeme How to customize the Thesis Header in few easy steps | Tech Prone http://is.gd/17d3e
RT @techprone: RT @tweetmeme How to customize the Thesis Header in few easy steps | Tech Prone http://is.gd/17d3e
@tongstromberg These are some I used for #thesis http://bit.ly/bi1ac http://bit.ly/As6ey http://bit.ly/gbZ2s http://bit.ly/zbGXX
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
I use Thesis Open Hook (a free plugin). On some of my sites I design a header in my html editor and just paste the html into the ‘header’ section of Open Hook.
Could you please tell why does the thesis theme not allow in posts/pages? Or do we need to use CSS for them too?
Also I need to increase header & tagline size to more than 46 pts & 20 pts. Please guide me how to do it.
Thanks
Hi,
I added the code in my customs.css padding-bottom: none so that the logo header is flush with the body. This works in Explorer but not in Safari or Firefox, can you tell me what more code do I need to add?
Mahalo!
Thanks for the css header customizing tips. It’s good to have this explained out in a tutorial like this. I’ll give it a try on my thesis install.
Mark
really useful tutorial…..
thanxx for sharing….
Thank you such a lot! It’s the only working code I found in the Internet for the header which also displays in Internet Explorer correctly.
is this article unique ?
Nice tutorial..Now thesis has made easy to upload header image by using Header image option in the thesis 1.8 version.Thanks