6 Things To Avoid “Thesis” Look For Your Blog

I am bored. Yes, I am bored of looking blogs with same “thesis”-ly look. I have no idea why people buy Thesis theme and then just leave it as it is. I mean, Thesis looks good with its default look and feel and I agree that you bought Thesis just so that you don’t want to get your hands dirty with PHP coding. But are you going to be like 57,318 blogs out there who use Thesis as it is? (Curious readers can count those blogs for themselves ;))

If you are Thesis users and want to tweak your blog a little to stand out among other Thesis blogs, here are 6 simple things you MUST implement on your blog.

1. Custom Logo

If you want to market your blog/site, you need to create its brand and a very simple thing to create your brand is to add a clickable custom header logo to your site. Newbies in Thesis are often left flabbergasted to see that Thesis theme doesn’t provide any direct option to set header logo through options panel. But don’t that let you down! It’s really a simple thing to do. Just follow the below steps:

• • Upload your logo image to custom\\images in your thesis theme folder (thesis_17 in my case) using FTP client like FileZilla
  • Add the below code to custom.css file (either through Custom File Editor option in Thesis options or using FTP client)

.custom #logo {background-image: url('images/logo.jpg'); background-repeat: no-repeat; width: 600px; height: 80px; text-indent: -9999px; }

Make sure you change width and height to match your image size dimensions.

2. Sexy Post Thumbnails

Have you noticed the post images with nice shadow effect on my home page teasers? Adding those images really gives a glamorous look to the post. You can add just little bit of CSS code to the custom.css file to make this happen:

.custom .post_image
{
float:left;
height:auto;
width:200px;
-moz-box-shadow:0 0 20px;
border:1px solid #EEEEEE;
}

.format_text img.block, .format_text img.alignnone
{
margin:0 1em 1.636em 0;
}


This trick is inspired from http://www.serradinho.com/Blog/

3. Category Navigation Bar

In addition to default navigation menu which Thesis provides, you can add second navigation menu listing all the categories in it. It makes more sense to me to display categories in their own menu rather than placing them in either footer or sidebar. You need to make changes at two places:

custom_functions.php

function category_menu()
{ ?>
<ul id="mysecondarymenu">
<?php wp_list_categories('title_li='); ?>
</ul>
<?php
}

add_action('thesis_hook_after_header','category_menu');


custom.css

.custom ul#mysecondarymenu {
border-style: none;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
background:#024D87 none repeat scroll 0 0;
width: 100%;
float: left;
}

.custom ul#mysecondarymenu li { float: left; padding: 5px 10px; }
.custom ul#mysecondarymenu li a { font: 1.1em Verdana,Arial,Geneva,Helvetica,sans-serif; color: #ffffff; text-transform: uppercase; }
.custom ul#mysecondarymenu li:hover { background-color: #AD4F1F;}
.custom ul#mysecondarymenu li a:hover {color: #fff;}

This code was adopted from http://hegeeks.com/thesis-theme/thesis-theme-tutorial-how-to-add-a-second-navigation-menu.html

4.  Pretty Comments

Comments section is one of the most important yet most ignored section of the page. People spends hours formatting headers and sidebars, but doesn’t even think about changing the default look of comments section where you get to interact with readers. You can use the below code to color up comment section, add frame to avatars, change color-combination for self comments and so on.

custom.css

.custom dl#comment_list
{
border:1px solid #BBBBBB;
}


.custom dl#comment_list dt
{
background-color:#7B8750;
padding-top:0.5em;
padding-top:0.54em;
}


.custom .comment_time a, .edit_comment a
{
color:#DDDDDD;
}


.custom dl#comment_list dl dt.bypostauthor
{
background-color:#AD4F1F;
border-left-width:0.2em;
border-right-width:0;
border-top-width:0;
padding-bottom:0.5em;
padding-left:1.7em;
padding-top:1em;
}


.custom dl#comment_list .bypostauthor
{
background:none repeat scroll 0 0 #EEEEEE;
}


.custom dl#comment_list dl dd .format_text
{
margin-bottom:0;
}


.custom .avatar img
{
border:4px ridge white;
float:left;
margin-right:0.909em;
}


.custom .url
{
color:white;
}


.custom dl#comment_list dd p.reply
{
border-style:outset;
float:right;
margin:1em 0 1.5em;
}


.custom dl#comment_list dd p.reply a
{background: #2f2c28; color: #FFF;font-size: 11px;font-weight: normal;padding: 4px 6px;text-transform: uppercase;}
.custom dl#comment_list dd p.reply a:hover {background:#46382d; border: 0;}


5. Personalized Subscribe Me Message

Adding a personalized “subscribe my feeds” box for each page can turn your casual readers into loyal followers (See sample of this on top of this post). I somehow feel that adding RSS subscription option works more above or below the actual post, than in sidebars. I adopted the code for this trick from http://www.howtomakemyblog.com/ decided to spice up the message little bit. I thought it would be nice to add my own image inviting readers to subscribe the feed, taking inspiration from  http://thinksimplenow.com. I decided to give it a try and it worked quite well. Here is the code to achieve all this.

custom_functions.php

function subscribe_bubble()
{
if (is_single())
{
?>
<p>
<div class="subscribe_bubble">
<div class="subscribe_image"></div>
Hi there, Do you like reading posts here? If you do, please take a moment to subscribe to <strong><a href='[your feed url]'> RSS Feed </a><strong> or via </strong><a href='[email subscription link]'>E-mail</a></strong> to receive all the FREE updates!
</div>
<?php
}
}

add_action('thesis_hook_before_post', 'subscribe_bubble');

Make sure to replace [your feed url] and [email subscription link] with your RSS feed URL and email subscription URL.
custom.css

/* Subscribe bubble formatting */
.custom .format_text .subscribe_bubble
{
background: #ffffa0 center no-repeat;
border: 2px solid #e5e597;
background-position: 7px 50%;
text-align: left;
padding: 5px 5px 5px 5px;
margin-bottom: 10px;
}


.custom .format_text .subscribe_bubble .subscribe_image
{
float: left;
background: url("images/me.jpg") no-repeat scroll 0 0 transparent;
height: 35px;
width: 36px;
padding-right: 10px;
}

Here, me.jpg is the image file which I have uploaded to custom/images folder under Thesis theme. You need to be little proficient in Photoshop to extract the image from background. To properly display the image, you need to set the image dimensions optimum. Mine are 36×35 pixels. Make changes to width and height settings as per your image dimensions.

6. Widgetized Fat Footer

Footer is a really good place to keep all less important but useful items like Calendar, popular tags, Recent comments, Top commentators, Archives, Flickr photo stream, recent tweets or just about anything. However, it would be very cumbersome if you need to make changes to your custom_functions file to add new items to the footer. Kristarella provided a nice tutorial on how to add widgetized footer to thesis blog. Widgetized footer allows you to add anything to the footer just with simple drag-n-drop. Here is what I have implemented on this blog.

custom_functions.php

register_sidebars(1,
array(
'name' => 'Footer',
'before_widget' => '<li class="widget %2$s" id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>'
)
);

function custom_footer()
{ ?>
<div id="footer_1" class="sidebar">
<ul class="sidebar_list">
<?php thesis_default_widget(3); ?>
</ul>
</div>
<?php }

add_action('thesis_hook_footer', 'custom_footer', '1');

custom.css

.custom #footer_1 {text-align:left; color:#fff; background-color:#333333;}
.custom #footer_1 ul.sidebar_list li.widget {width:23%; margin-right:2%; float:left;}
.custom #footer_1 ul.sidebar_list li.widget h3 {color:#222;}
.custom #footer_1 ul.sidebar_list li.widget a {color:#ddd; border-bottom:0;}
.custom #footer_1 ul.sidebar_list li.widget a:hover {color:#8FB72D;}


What Do You Think?

These are few of the Thesis tricks I learned from fellow Thesisers around. What’s your take on this? What new features you implemented for your blog? Which tweak you liked the most? Let me know by leaving the comments. Keep geeking!