Tutorial: Customizing Thesis – Standard to Unique in 6 Easy Steps

Customizing your Thesis Theme site for that unique look is often simply about changing the default look by using different colours, moving common elements to a different place and injecting a little bit of yourself into your site.

In this guest post by George Serradinho, learn how to:

1. Colour the background of your sidebars
2. Change the colours of the sidebar headers
3. Place the tagline underneath your header image
4. Add the search box to the right of the tagline
5. Add the authors profile box to posts
6. Add a Thesis ad box

Introducing Guest Posts on Thesis Theme HQ

This is my first guest post on ThesisThemeHQ.com and I hope you find my Thesis customizations useful. There are many sites using the Thesis theme and it’s always nice to see many sites offering ways and techniques to customize the theme.

George Serradinho, Serradinho.com

1. Colour the background of your sidebars

Depending on your site’s layout, you could be using one or two sidebars.

For this example, I am using 2 sidebars, one on the left and another on the right.

To change the colours of the background for your sidebars, it just means placing some lines of CSS code into your custom.css file and clicking on the save button and refreshing your browser.

I am currently using the colour #F5F5F5 in the CSS code below for my left sidebar, all you need to do is change that colour to your desired colour of choice.

You can change the colour of the left sidebar [sidebar_1] or right sidebar [sidebar_2]

CSS

.custom #sidebar_1 {background:#F5F5F5 none repeat scroll 0 0;}

2. Change the colours of the sidebar headers

I have seen many sites have their sidebar header titles highlighted or even changed the font. This is so simple with Thesis, all you have to do is just add one line of code to your CSS file and you are done.

Thesis uses the ‘sidebar h3‘ for the header titles, you could change the header background, the colour of the font and even the font style itself.

I have used the same colour for my sidebar headers as my site, which is #F5F5F5 and white for the font. You could change that to your desired colour of choice.

CSS

.custom .sidebar h3 {font-weight: bold; color: #FFFFFF; padding: 0px 5px; background: #339999;}

3. Place the tagline underneath your header image

I have previously written about 3 Basic Thesis Customizations detailing how to add a clickable header image to your site and this is a follow up on that post to now add the tagline underneath.

You will have to play around with the indent and the font colour if you wish to change it. I have also added the CSS code to make the header image clickable.

CSS

.custom #header #logo a {display: block; width:950px; height: 200px; background: url('images/main_serradinho_logo2.png') no-repeat; outline: none;}
.custom #header #logo {text-indent: -9999px;}
.custom #header #tagline {height: 30; text-indent: 25px; font-weight: bold; color: #000000; padding: 5px;}

4. Add the Search Box to the right of the tagline

I had struggled with this for a while and eventually got it right. Once the tagline has been placed, then you can add this CSS code to have the search box aligned to the right. You could use this to place the search box anywhere if you like.

You will have to play around with the font size and colour, box width, the top margin and the background colour to get your desired results.

CSS
/* Position the Search Box */
.custom #s {font-size:12px; position:relative; float:right; margin-top:17em; background:#EEEEEE; color:#000000; padding:0.2em; width:200px;}
.custom widget thesis_widget_search {background:#fff;}

PHP
add_action('thesis_hook_before_title', 'thesis_search_form');

5. Add the author’s profile box to posts

Most sites have a small box at the end of the post containing the authors profile showing the author’s name, total number of posts written, a small profile of the author, etc.

The authors profile is taken from the details they have entered in the admin panel for the users profile.

Once logged in, you can:

• Go to ‘Users’ panel
• Then to ‘Your Profile’
• Then browse down to ‘Biographical Info’ and enter whatever you want to see
• Click on ‘Update Profile’

In the following code, you will have to:

• change the link details for ‘RSS’, ‘EMAIL’
• remove the link for ‘Mobile Version’ if your site does not have one

You could add all kinds of other information here by including it in another paragraph – it’s your choice.

PHP

function post_footer_author() {
if (is_single())
{ ?>
<div class="postauthor">
<?php echo get_avatar( get_the_author_id() , 100 ); ?>
<h4>Article by <a href="<?php the_author_url(); ?>">
<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>
<p><?php the_author_description(); ?></p>
<p class="hlight"><?php the_author_firstname(); ?> has written <span><?php the_author_posts(); ?></span> awesome articles.</p>
<p>Subscribe to Serradinho feed via <a href="http://www.serradinho.com/Blog/feed"><b>RSS</b></a> or <a href="http://feeds2.feedburner.com/SerradinhoBlog" target="_blank"><b>EMAIL</b></a> to receive instant updates. We also have a <a href="http://serradinhoblog.mofuse.mobi/" target="_blank"><b>Mobile Version</b></a> for viewing on cell phones.</p>
</div>
<?php }
}
add_action('thesis_hook_after_post_box', 'post_footer_author');

CSS
.postauthor {background: #F5F5F5; border-top: 1px solid #e1e1e0; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 1.5em;}
.postauthor img {border: 1px solid #e2dede; float: left; margin-right: 1.5em;}
.postauthor h4 {color: #666; font-size: 2em; margin-bottom: 5px;}
.postauthor p {color: #515151; font-size: 13px; margin-bottom: 12px;}
.postauthor p.hlight {font-size: 11px; text-transform: uppercase;}
.postauthor p.hlight span {color: #CB3131; font-size: 13px; font-style: italic; font-weight: bold; letter-spacing: 0.8px;}

6. Add a Thesis ad box

On Serradinho.com, I have a yellowish box at the bottom of each post promoting Thesis, this box could however be used for any purpose. You could play around with the colour of the link, background colour, font size and so much more.

PHP
function powered_by() {
if (is_single())
{ ?>
<div id="powered_by">
<h3>Powered by Thesis</h3>
<a href="http://diythemes.com/thesis/get-thesis/?a_aid=style&amp;a_bid=47c5a620" target="_blank"><img src="http://www.YourSiteURL.com/Blog/wp-content/uploads/2009/05/thesis-125x125_b.png" height="125" width="125" alt="Thesis Theme" align="right" /></a>
<p>An amazing WordPress Theme, nothing beats the versatility and SEO friendliness of the Thesis framework.</p>
<p>From beginners, to the most advanced WordPress developers, Thesis makes it easy for anyone to customize it.</p>
<ul>
<li><a href="http://diythemes.com/thesis/get-thesis/?a_aid=style&amp;a_bid=47c5a620" target="_blank">Get Started With Thesis Now</a></li>
</ul>
</div>
<?php }
}
add_action('thesis_hook_after_post_box', 'powered_by');

CSS
#powered_by h3, #rightcol h3 {font-size: 1.8em; letter-spacing: normal; padding-top: 15px;}
#powered_by {background: #FFFBCC; border: 1px solid #E6DB55; float: left; margin: 5px; padding: 19px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; width: 45%;}
#powered_by img {border: 0px solid #e2dede; float: right; margin-right: 1.5em;}
#powered_by {float: left; width: 93%;}
#powered_by p {font-size: 14px; line-height: 1.5em; padding: 10px 1em 10px 0;}
#powered_by h3 {padding: 0;}
#powered_by ul {list-style-position: inside; list-style-type: square; margin-left: 1em;}
#powered_by ul a {border-bottom: 1px solid #CB3131; font-size: 14px;}
#powered_by ul a:hover {border: 0;}
#powered_by li {margin-bottom: 10px;}

Final Words

I hope the customizations above have shown you how easy it easy to make changes to your theme. Thesis is an unbelievable theme and I would recommend it to anyone.

A bit about Our Guest Writer

George Serradinho is a 30-something South African blogger who uses Thesis Theme for his personal blog Serradinho.com. Visit his site for articles on blogging news and tips and tricks for WordPress and Thesis Theme. You can also find free downloads of PLR articles, ebooks, images and graphics.

If you would like to read Thesis Theme HQ’s review of his Thesis site, read:

Switching to Thesis Theme: When Personal Blogging Becomes Business

Related Posts

1. Free HTML and CSS for a Table Within a Post or Page
2. 4 Nifty Code Snippets to Trick Out Your Thesis Theme
3. Thesis Theme Tutorial: Image Line Up
4. Trick: Thesis Feature Box For A Dynamic Navigation Bar
5. 6 More Examples of Unique Thesis Theme Sites