6 simple but cool Thesis theme WordPress design tips

Share it!

Share

Delicious

I have now upgraded my blog to Thesis theme 1.6. I have tweaked a thing or two in the design as well, so wanted to share the latest changes with you.

As usual, I will include all the codes so you can easily implement the same design features into your own Thesis blog as well. Want more info on Thesis? See my Thesis 1.6 video review.

Changes to the navigation menu

Thesis 1.6 makes it to easy to create a cool looking menu within its interface. I wanted to get the same look as my old menu so I inserted this into the custom.css file (note that in Thesis 1.6 nav menu name is changed to ul.menu from ul#tabs):

.custom ul.menu li.current_page_item, .custom ul.menu li.current-cat { padding-bottom:0; background:#FFFFFF; }
.custom ul.menu li a:hover { text-decoration:none; background:#2361A1; }
.custom ul.menu li.current_page_item a:hover { text-decoration:none; background:#2361A1; }
, .custom ul.menu li.current-cat a:hover { text-decoration:none; background:#EEEEEE; }

Social media links on the left side

Thanks to a great Thesis tutor I now have cool social media links (Facebook, Twitter, YouTube, RSS) on the left side of my content. To get this look, you need to upload the picture files to your server plus insert this code into custom.css:

.custom #feedback { background: transparent; width: 3.2em; position: fixed; top: 40%; left: 0.25%; }
.custom #feedback a { display: block; text-indent: -9999px; height: 3.2em;}
.custom #feedback #facebook { background: url('facebookimageurl') no-repeat 0 -3.2em; }
.custom #feedback #facebook:hover { background-position: 0 0; }
.custom #feedback #twitter { background: url('twitterimageurl') no-repeat 0 -3.2em; }
.custom #feedback #twitter:hover { background-position: 0 0; }
.custom #feedback #youtube { background: url('youtubeimageurl') no-repeat 0 -3.2em; }
.custom #feedback #youtube:hover { background-position: 0 0; }
.custom #feedback #rss { background: url('rssimageurl') no-repeat 0 -3.2em; }
.custom #feedback #rss:hover { background-position: 0 0; }

And this code into custom_functions.php:

function social_iconz() {
?>
<div id="feedback"><a id="facebook" href="facebookurl">On Facebook</a><a id="twitter" href="twitterurl">On Twitter</a><a id="youtube" href="youtubeurl">On YouTube</a><a id="rss" href="rssurl">RSS feed</a></div>
}
add_action('thesis_hook_after_html','social_iconz');

These are the images, feel free to upload them onto your own server and use them:

• http://www.howtomakemyblog.com/pictures/facebookicon.png
• http://www.howtomakemyblog.com/pictures/twittericon.png
• http://www.howtomakemyblog.com/pictures/youtubeicon.png
• http://www.howtomakemyblog.com/pictures/rssicon.png

Star icon next to the subscribe alert

Thanks to the Building Camelot, I inserted a star image next to the “subscribe” yellow alert at the end of all my posts. It helps attract the attention and hopefully gets more people to subscribe. To get the effect, insert this into custom.css:

.custom .format_text p.voteme {
background: #ffffa0 url('urlofthestarimage') center no-repeat;
border: 2px solid #e5e597;
background-position: 7px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 5px 5px 45px;}

And this into custom_functions.php:

function seth_godin_stuff () {
if (is_single()) {
?>
<p><p class="voteme">Get all my blogging tips for FREE! Subscribe to HowToMakeMyBlog <a href="rssfeedurl">via RSS</a> or <a href="emailfeedurl">via e-mail</a>.<p/>
<?php
}
}
add_action('thesis_hook_after_post', 'seth_godin_stuff', '1'); 

Change to the look of front page teasers

I did a change to my magazine style front page. According to latest eyetracking research the larger the headline is in relation to the teaser the less likely it is that it will be viewed or read. Test participants viewed both the headline and blurb when the headline was bold and the same size as blurb text.

So I made it look like that. In Thesis Options in Design Options, in “Teaser Font Sizes” I made both post title size and post excerpt size 14 pt. And I made the teaser headline bold with this code in custom.css:

.custom .teaser h2 a { font-weight: bold }

Another eyetracking finding was that the shorter the excerpt is, the more people get to read it. Generally, a short excerpt was one or two sentences and it encouraged testers to continue reading. So I have shortened the number of excerpt characters down to 30 by inserting this into custom_functions.php:

add_filter('excerpt_length', 'my_excerpt_length');
function my_excerpt_length($length) {
return 30; }

Hover over links and sidebar

I created a nice “hover over” effect when visitors hover over different text links. It looks cool and it is very simple. Find colors that fit your blog best and insert them via this code into custom.css:

.custom a:hover { color: #FFFFFF; background: #000000; }
#footer a:hover { color: #FFFFFF; background: #000000; }
dl#trackback_list dt a:hover { color: #FFFFFF; background: #000000; }

Similar cool effect can be done for the sidebar widget links. Insert this into your custom.css to get the same look as on my site:

li.widget ul li { border-bottom:1px solid #DDDDDD; display:block; margin:0; padding:0.5em; }
li.widget ul li:hover { background:#DDDDDD; display:block; margin:0; padding:0.5em; }
.custom li.widget { margin-bottom: 0.5em; line-height: 1.2em; }
.custom li.widget a:hover { color:#222222; background: none; }

Centered article headline with background color added

I have added the background color for the article headline on the article pages. You can do this by inserting this code into custom.css:

.custom h1.entry-title { background:#2361A1 none repeat scroll 0 0; color:#FFFFFF; padding:0.3em 0; text-align:center; }

Thesis theme makes it easy

All in all, not much work needed to get this done as you can see. The visual effect for your readers will be great though. Thesis theme really makes it easy to have a modern, professional looking blog.

If you want even more tips, see more of my Thesis design tips here and even more Thesis customization tips here.

Join thousands of bloggers and get all my blogging tips for FREE! Subscribe to HowToMakeMyBlog via RSS or via e-mail.

If you liked this article, you may also like:

Why I run my blog on Thesis Wordpress Theme

Thesis theme gives my blog a professional, clean, easy-to-read layout and SEO friendly design. Thesis makes it simple to make your own blog unique. See more details and get your own Thesis today.

Post written by Marko Saric on January 7, 2010 in Thesis Theme