6 Simple But Cool Thesis Theme Design Tips

I have now upgraded my site 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 as well.

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):

[sourcecode language='css'].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; }[/sourcecode]

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:

[sourcecode language='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; }[/sourcecode]

And this code into custom_functions.php:

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:

[sourcecode language='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;}[/sourcecode]

And this into custom_functions.php:

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:

[sourcecode language='css']add_filter(‘excerpt_length’, ‘my_excerpt_length’);
function my_excerpt_length($length) {
return 30; }[/sourcecode]

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:

[sourcecode language='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; }[/sourcecode]

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:

[sourcecode language='css']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; }[/sourcecode]

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:

[sourcecode language='css'].custom h1.entry-title { background:#2361A1 none repeat scroll 0 0; color:#FFFFFF; padding:0.3em 0; text-align:center; }[/sourcecode]

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 site.