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.
I simply couldn't depart your website before suggesting that I actually loved the standard information a person supply in your visitors? Is gonna be again continuously in order to inspect new posts
- spam
- offensive
- disagree
- off topic
Like