9 Easy Steps to Customize Your Thesis Theme

If you’re like most bloggers that use WordPress, you will most likely be thinking about how you can customize your blog to set it apart from the crowd. Changing the design and functionality of your site is a must if you want to be a little more individual.

If you are using the Thesis Theme by DIY themes you’ll already know how easy it is to customize a zillion aspects of your theme at the click of a mouse, or with a little code here and there.

Whilst you can change a lot of things by simply using the theme editor functions, there are so many other ways to enhance your Thesis Theme. So, to help you I’ve put together a few quick customization tips to get you started.

Insert Header Image

On of the most visually important parts of any blog is the header. You can very easily change this in Thesis and replace the text on the default Thesis installation with your own header image. All you need to do is paste the following code into your custom.css page.

Here goes…

This makes the header clickable and defines the background and size. Make sure you change the url, height and width to match your own site

.custom #header #logo a { display: block; height: #px; width: #px; background: url('INSERT IMAGE URL') no-repeat; outline: none; }

Now add this code line to remove any whitespace after the header image:

.custom #header #tagline { height: 0; }

Now add this code to cast the text title and tagline out of the way:

.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }

No add this code to remove the padding around the header, this will remove all the white space in any other region:

.custom #header { padding: 0; border-bottom:none;}

Done...

Change the Sidebar Colour

A great way to customize your Thesis Theme is to change the colour of your side bar. All you need to do is add the following code to your custom.css file:

.custom #content_box {background-color:#'Put your own colour code here';}
.custom #content {background-color:#fff;}

Change Your Nav Hover Colours

Changing the hover colours for your nav menu is easy! To change the colours of the Nav Menu only, put the following code in your custom.css and change the colours to match your theme:

.custom ul#tabs li a:hover {colour: #fff; text-decoration: underline; background-colour: #00008B; }

And this code if you want to change the hover colour of your Subscribe to RSS link:

.custom ul#tabs li.rss a:hover { background-color: #fff; color: #FFA500; }

Remove the Divider Line from Your Sidebar/Content Area

A quick bit of code will remove the vertical line between your Sidebar and Content Area, just add this code into the custom.css file:

.custom #content_box {background:none;}

Remove Category Titles on Category Pages

On all category pages in Thesis, there is a visible title near the top, which is above all the content. You can easily remove the category titles by adding the following code:

#archive_info {display:none;}

Social Media Links at Bottom of Posts

Here’s how to add a box that will display your social media links and author profile! You will need to do some minor editing of your custom_functions.php and custom.css files. The change is effected by using the Custom Hooks in Thesis. The box will automatically pull each author’s description, photo, and number of posts.

First job is to paste all of this into your custom_function.php:

function post_footer() {
	if (is_single())
	{
	?>


Share this post: Tweet It | Facebook It | Stumble It | Digg It | 

Delicious It


		
Article by 

		 

 has written  awesome articles for us. 

If you liked this post, you will definitely enjoy our others. Subscribe to the feed via RSS or EMAIL to get instantly updated for those awesome posts soon to come.


	
Now make sure that you insert your own URLs in the specified areas above. You can remove any links that you don't need.
No style it any way you like, but here's a example to get you going. You can change the colours to suit your own profile:
.postauthor { background: #D3D3D3; border-top: 2px solid #FAF0E6; border-bottom: 2px solid #e1e1e0; overflow: hidden; padding: 2.0em; }
.postauthor img { border: 6px solid #DCDCDC; float: left; margin-right: 2.0em; }
.postauthor h3 { color: #666; font-size: 2em; margin-bottom: 6px; }
.postauthor p { color: #00CED1; font-size: 12px; margin-bottom: 11px; }
And the css for the Social Media Box:
.socialmedia { background: #F0F8FF; border-top: 1px solid #E6DB55; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 1em; text-align: center;}
.socialmedia p { color: #515151; font-size: 1.3em;}
Insert a TweetMeMe Button (Without using a Plugin)



If you would like to insert the TweetMeMe button automatically into every new post you create, just add the following code in to the custom_functions.php fike:
function author_avatar() {
if (is_single()) {
    echo '


';
   }
}
add_action('thesis_hook_before_headline', 'author_avatar');
You can also modify the last line in the php to choose the exact placement on your post. You then need to edit the inline CSS to fine tune the positioning.
Get a Better Background for Your Author Replies in Comments
By default, the Thesis main author comments have a light blue background in order to differentiate them from any reader comments. This is a little impracticle when replying to reader's comments as there is only a blue line positioned to the left of the author comment.
To make all the comments by the author share the same backgroung just add this bit of code to your custom.css file:
.custom dl#comment_list dt.bypostauthor, .custom dl#comment_list dd.bypostauthor>div {background: #E7F8FB none repeat scroll 0 0; padding-top:20px;}
Alter the Reply text in Threaded Comments to a Button
To make the Reply text in your Thesis Threaded Comments to be more prominent, you can change it to a button using only CSS. To do this, simply add the following code to your custom.css and change the style to suit:
.custom dl#comment_list dd p.reply { margin: 1em 0 1.5em 0; }
.custom dl#comment_list dd p.reply a {background: #6495ED; color: #FFF;font-size: 12x;font-weight: normal;padding: 4px 6px;text-transform: uppercase;}
.custom dl#comment_list dd p.reply a:hover {background:#46382d; border: 0;}

So what are you waiting for? Start customizing your Thesis Theme today!


					
Tagged as:
						thesis theme, 
						wordpress