Normally thesis theme has no logo it has the title of our Blog in the header but no option to add logo to thesis theme, but you have seen many blogs out their using thesis and having a logo still their but how to do that, well its too easy and just a CSS trick to maintain the SEO and also to keep the nice looks.
Removing Text title from thesis theme
So the trick is quit too easy if you are familiar with CSS then you would have probably done it earlier. So now lets start the work and get a cool logo to our blog
As you can see in the above image I have written first of all we have to remove the text written in the header, some of you will use CSS as
#header{display:none;} |
Well it is completely wrong this will reduce the SEO of the site also so instead we are going to use text Indent property like below :
#header #logo, #header #tagline {text-indent:-99999px;} |
once you add the below code in custom.css file you will receive the below results
Adding Logo/Image to Header in Thesis theme
Now once we have cleared the title , we will now add the logo to our thesis theme for that first make a logo for your blog then upload it on the site, for me I have placed it in “custom/images” folder so here is my code
#header{background:url('images/best2know.png') no-repeat;} |
so as you can see the CSS you can understand if you are experienced with CSS and it gives me below result
Making Clickable Logo/Header
As you have placed the Logo you can see it is not clickable and we hate it because usually Visitors click on the logo to go back to homepage so it is essential to make the header clickable so here is the trick
#header #logo a{display:block;width:300px;height:100px;} |
Well above you can see something which might be confusing you , why i have used width and height attribute , well this are used because i just want the Image area only to be clickable so i have used the Image attributes their.
Conclusion
Now the conclusion is the result you get but before that we have to bring in together the code we have made , so the final code in custom.css will be :
#header #logo, #header #tagline {text-indent:-99999px;} #header{background:url('images/best2know.png') no-repeat;} #header #logo a{display:block;width:300px;height:100px;} |
i guess you can see the final output now , hope you are happy with it, hope you also liked my new style of writing i tried to explain the more aspect of this tutorial if you need any further help contact me or just leave a comment