Web Hosting

One Way to Tart Up Your Thesis Teasers

Thesis Theme for WordPressI often read people saying things like ‘I don’t want to use Thesis because Thesis sites are instantly recognisable’.

So let’s look at some ways you can disguise your Thesis site.

The reason Thesis sites are so often recognised is because the site owners haven’t bothered to change many of the default settings.

Things like the navigation bar, teaser boxes and sidebar headings have easily recognisable characteristics, but are very simple to change.

So let’s look at a simple change to the teasers boxes that will begin the process of disguising the fact that you use Thesis.

Tart Up Your Thesis Teaser Boxes

Here, then, is a simple way to tart up your Thesis teaser boxes.

The default teaser boxes have a simple divider between the rows, like this:

Default Thesis Teaser Boxes

Enough to demarcate the rows of teasers but hardly exciting.

A simple and subtle way of altering the appearance of these is to create a slight shadow, which looks like this:

Customised Thesis Teaser Box Dividers

Not as creative as you probably are but, none-the-less, a little more interesting.

So here’s how you do that:

Step 1: Create a small image.

I’ve used a gradient image in the second screenshot above, but you can use any kind of image you like.

Whatever you use, though, it must be small – the one I’ve used above is 15px X 15px.

Step 2: Upload your image

Upload your new image to your images folder, or wherever you normally store them, but it needs to be somewhere online.

Step 3: Update your custom stylesheet

Log in to WordPress and pull up your Thesis custom stylesheet. (Go to Thesis>Custom File Editor. The custom.css file is the first file that’s displaid).

In your custom.css file add the following CSS code:

.custom .teasers_box { background-image: url(http://www.yoursite.com/your-images-folder/your-new-small-image.jpg); background-repeat: repeat-x; }

(Be sure to insert the real URL to your image and adjust the code!)

That will place your small image at the top left of the teasers_box div and repeat it horizontally from left to right for the width of the div.

It’s important to make the image small so it uploads quickly. Repeating it from left to right (repeat-x) means it doesn’t need to be uploaded again. The browser simply has to repeat the image.

All of which minimises the impact on the page load time.

Depending on whether or not you have some featured posts above your teasers, you may want to keep the default divider at the top of your top row of teasers.

In this case add the following code immediately below the previous code:

.custom .teasers_box.top { background-image: none; }

That will cause the top row of teasers to have the default divider at the top, rather than your customised divider, with all the other rows having your customised divider.

It’s important to place this second snippet below the first one because CSS becomes more specific with depth.

Essentially that means that you create an overall style and then you create exceptions to that overall style in specific areas of your site. Each exception snippet must be stated below the previous one, and they become more specific each time.

Step 4: Save your Changes

Click the Big Ass Save button and you’re all done.

That’s it – a simple way to change the appearance of your Thesis teaser boxes.


Martin Malden

Web Hosting