How to style THESIS by DIYThemes

Thesis is one of THE most amazing premium themes there is. Nearly every element of your website can be amended and styled thanks to the use of hooks.

It’s got a vast array or user options in the back end and I’m not lying when I say they’re the most sophisticated I have ever seen in a premium theme.

When you decide to buy the theme, you’ll get access to a huge moderated members only forum so all your install/how-to/troubleshooting/styling questions will be answered promptly.

At the time of writing, Thesis is at version 1.8. Consider getting it before version 2.0 hits the market – Chris Pearson has hinted at a hefty (and well deserved) price increase from then on – which won’t be applicable for version 1.x subscribers! You can get Thesis here.

Whenever I built a new site, I often start with Thesis – which is why I often have to tweak some defaults to my liking. Here are the small bits of code I always forget where to find:

Swapping Header and Nav Menu

My favourite option. Pop this line into your custom-functions.php file for eternal happiness:

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'thesis_nav_menu');

How to make the Nav Menu bold

I like the nav bar to stand out from the crowd. Even though you can change the font and colours via the excellent Thesis Design Options, you can’t turn the font bold. If we put this in out custom.css file we can do this easily:

.custom ul.menu li a {
 font-weight: bold;
}

Removing the message “Comments are closed”

Again this goes in the custom_functions.php file:

function remove_no_comments() {
if (!comments_open())
remove_action('thesis_hook_after_post', 'thesis_comments_link');
else
add_action('thesis_hook_after_post', 'thesis_comments_link');
}
add_action('thesis_hook_before_post','remove_no_comments');

Alternatively you may use this in your custom.css file:

.custom .comments_closed p {
display: none;
}

How to change your own comments background

You know that Thesis automatically alters the background colour for odd and even comments, right? That way you have a nice alternation going. But if you as “The Author” want to stand out from the other comments, you can change the background colour to something else ONLY when you leave a comment. And here’s how to do just that.

Put this into your custom.css – replacing the #edd with your own desired colour:

dl#comment_list .bypostauthor {
background: #edd;
}

Removing “From the Categories Archive”

Again this goes in custom.css:

.custom #archive_info p
{
display:none;
}

Fix PayPal buttons

If you copy and paste a piece of code PayPal give you for say a subsctiption button, you’ll notice that it won’t be formatted very well. If you pop this piece of code into your custom.css file, you’ll fix this problem:

.custom .format_text input, #commentform input, #commentform textarea {
width:auto;
}

How to change the Sidebar Colour

Pop this into your custom.css – replacing the #edd with your own desired colour:

.custom #sidebars {
 background: #edd;
}

How to add a Custom Background

Even though this is explained in the Thesis User Guide, I tend to forget where exactly that is… so here’s how we do that. The second line isn’t that important, it just sets the background colour which since Thesis 1.6 you can do without touching code under Design Options.

/* now let's look at a ---CUSTOM BACKGROUND--- */
body.custom { background: #f9f5db url('http://yoursite.com/yourbackground.jpg'); }
.custom #page { padding: 2em 1.9em; background: #eee; border: 0.3em solid #999; border-top: 0; }

Adding Thumbnails to Teasers

I like having thumbails displayed when my posts are displayed as archives – and here’s a trick on how we can make it happen:

/* bring on those thumbnail teasers */
 .teaser .format_teaser img {
 width: 260px;
 height: auto;
 float: left;
 margin: 0 10px 5px 0;
 padding: 0;
 background: #eee;
 border-style: solid;
 border-color: #999;
 }

Put a frame around every picture

At the same time, I really like it when those teasers all have a dark grey border. Here’s how:

/* put a frame around every image */
img.alignnone, img.block { border: 0.5em; background: #fff; border-style: solid; border-color: #999; }

How to create a Random Header image

I’m using many of these styles over at versluis.com, and the random header is one that generates a lot of interest. I’ve borrowed this code from another of Chris’ themes called Neoclassical. It works well with Thesis too.

Put all this into your custom_functions.php file. Change the second value in the rand() function to the amount of images you have. Each image should end in a number (say header_1.jpg, header_2.jpg and so forth) and all images must be available at the given path.

/* RANDOM HEADER IMAGES, courtesy of Neoclassical */
add_action('thesis_hook_before_header', 'super_header');
function super_header () {
$random_image = rand(1,21); // the second number should equal the total number of images that you want to rotate
echo '<img src="http://yoursite.com/headers/header_', $random_image, '.jpg" alt="Random header image... Refresh for more!" />';
}

Change Product Headlines in WP e-Commerce

If you’re using Thesis with Instinct’s WP e-Commerce Plugin, you’ll notice that the product headlines look way too small. That’s because WP e-Commerce uses h2 tags for those, and by default Thesis styles h2 tags smaller than h3 tags. Thanks to this snippet in custom.css we’ll give your products a bigger headline:

/* Shopping Cart re-styling (GetShopped) */
.custom #content h2.prodtitles {font-size: 1.5em;}

Happiness 😉

I’ll amend this list as I go along.

Remember: you’ll get countless more styling tips over at the Thesis Members Section, including an Answers Guide, User Guide, Getting Started Guide, Styling Guide and of course an excellent Members Forum. Head Over and get your copy of Thesis today.