• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to footer

Let's Geek

What Every Geek Should Know

  • Technology
  • Blogging
  • WordPress
  • Tips n Tricks
  • Fun

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; }

.custom #logo a {width: 600px; height: 80px; display: block; outline: none;}

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!

Reader Interactions

Comments

  1. barry says

    August 29, 2010 at 11:18 am

    Great post. I was looking all over for a solution to this problem and I found it here.

    Reply
    • Harsh Athalye says

      September 5, 2010 at 1:01 pm

      Thanks barry for those kind words!

      Reply
  2. ritz says

    September 3, 2010 at 8:36 am

    Hi, i tried your shadow code on my sidebar but it doesnt work
    Here’s my code:

    .custom .sidebar .widget {
    background: url() repeat-y;
    border: 0px solid #000;
    padding-top: 0em;
    margin-top: 0em;
    padding-right: 0em;
    margin-left: -1em;
    -moz-box-shadow: 0 0 20px 0;
    border:1px solid #EEEEEE;
    }

    Reply
  3. DaleODonnell says

    October 16, 2010 at 4:32 am

    Yeah some good tips here but it took me about 3 minutes for your website to come up on my browser. Is there anyway in which you can sort this out?

    Reply
  4. Rohit @ Trickslog says

    December 22, 2010 at 8:55 am

    Hay its very interesting and easy.. i changed my thesis look..

    Reply
    • Harsh Athalye says

      December 22, 2010 at 9:01 am

      Hi Rohit,

      That’s nice to know. I am trying to find some more nice things we can implement via Thesis and will post soon.

      Reply
  5. Ashish Patel says

    March 1, 2011 at 11:03 am

    Nice to meet you harsh, i just installed thesis on my blog and was trying to customize my layout… searching the web i found your blog and its awesome i found what i was looking for. thanks bro keep it up. 🙂

    Reply
    • Harsh Athalye says

      March 2, 2011 at 10:25 pm

      Thanks Ashish for your positive comments. I am glad you found it useful. 🙂

      Reply
  6. anuj@webtricks says

    March 3, 2011 at 11:39 am

    hey thanks i am looking Category Navigation Bar code for my thesis theme and i got it thanks again 🙂

    Reply
    • Harsh Athalye says

      March 26, 2011 at 10:18 am

      Great! I am glad you found it useful 🙂

      Reply
  7. shashank chinchli says

    August 18, 2011 at 5:56 pm

    hey thanks a lot for such a great post ! currently m modifying my thesis theme so this gonna help me a lot!

    Reply
    • Harsh Athalye says

      August 22, 2011 at 9:38 am

      I am glad you are finding it useful 🙂

      Reply
  8. Kulwant Nagi says

    October 22, 2011 at 9:21 am

    Thanks for sharing these wonderful codes.. and the best thing is that all codes are working..

    Reply
    • Harsh Athalye says

      October 22, 2011 at 11:13 pm

      Thanks Kulwant 🙂

      Reply
  9. wazy says

    July 4, 2012 at 4:56 pm

    Hi..
    Thanks for this tutorial

    Reply
  10. walif says

    July 26, 2012 at 5:05 pm

    From long time,I search like this.It was work correctly in my thesis theme.

    Reply
  11. allison says

    February 18, 2013 at 11:26 pm

    Love the pretty comments. Put it on my blog. Thanks!!

    Reply
  12. How To Create A Blog says

    June 12, 2013 at 3:46 pm

    Hi, i think that i saw you visited my web site so i came to “return
    the favor”.I’m attempting to find things to improve my site!I suppose its ok to use a few of your ideas!!

    Reply
  13. How To Create A Blog says

    June 12, 2013 at 9:42 pm

    I know this if off topic but I’m looking into starting my own weblog and was curious what all is needed to get set up? I’m assuming having a blog like yours would cost a pretty penny?
    I’m not very web smart so I’m not 100% positive. Any tips or advice would be greatly appreciated.
    Cheers

    Reply
  14. Domain Registrar says

    June 25, 2013 at 4:38 pm

    I blog often and I genuinely appreciate your information.
    This great article has really peaked my interest.
    I am going to book mark your blog and keep checking for new details about once
    a week. I subscribed to your Feed too.

    Reply
  15. Go Daddy Promo Code says

    July 26, 2013 at 11:01 am

    Hello would you mind letting me know which webhost you’re using? I’ve loaded your blog
    in 3 completely different internet browsers and I must
    say this blog loads a lot faster then most. Can
    you suggest a good web hosting provider at a honest price?
    Cheers, I appreciate it!

    Reply
  16. Godaddy Discount Coupons says

    July 26, 2013 at 11:34 am

    This piece of writing is truly a pleasant one it assists
    new the web visitors, who are wishing in favor of blogging.

    Reply
  17. Go Daddy Review says

    July 26, 2013 at 7:06 pm

    Hello my friend! I wish to say that this post is awesome, great written and include approximately all vital infos.
    I would like to see extra posts like this .

    Reply
  18. Mypc Backup says

    August 2, 2013 at 12:12 pm

    Your style is unique in comparison to other folks I’ve read stuff from. Thank you for posting when you have the opportunity, Guess I will just bookmark this web site.

    Reply

Trackbacks

  1. Tweets that mention 6 Thesis Must Do Customizations -- Topsy.com says:
    June 25, 2010 at 8:46 am

    […] This post was mentioned on Twitter by Buildify Blog, Harsh Athalye. Harsh Athalye said: 6 Things To Avoid “Thesis” Look For Your Blog http://goo.gl/fb/unhoy […]

    Reply
  2. Cara Untuk Dapatkan Responsive Thesis Theme - Blog Bardboo says:
    August 15, 2013 at 4:00 pm

    […] Ideas to Avoid Typical ‘Thesis’ Look […]

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Get Free Email Newsletter!

Signup now and receive an email once I publish new content.

100% useful tips, no spam. Ever!

Popular Posts

  • Thesis 1.7 Custom File Editor Errors Out In WordPress 3.0 47 comments
  • 6 Things To Avoid “Thesis” Look For Your Blog 26 comments
  • 10 Free Stock Photography Sites To Spice Up Your Blog 18 comments
  • Improve Your Blog Ranking With FREE SEO Tool 18 comments
  • What’s Wrong With Blogging – Blogger’s Perspective 14 comments

Footer

Hi, I am Harsh, a passionate techno-blogger rambling about cyberspace and computers.
Apart from blogging, I love breaking things such as my blog and then fixing again, watching thriller and mystery movies, playing computer games and tweaking my blog design. Find out more about me here.
Copyright © 2018 · Letsgeek.net · All Rights Reserved.