Backgrounds: Quick updates to your site with Thesis

One of the questions I get a lot is what will it take to make my blog look like my site or less like a blog (or both).

Here are some easy ways to begin making changes to your site. This is the first in a series of posts talking about easy ways to modify your WordPress/Thesis site.

Today, let’s tackle your background.

Sure you can use the Design Options and set the background color. And if you’re feeling really adventurous you can even check the box that adds a cool shadow effect to the site. (this keys off your background color to create the shadow effect)

But what about adding a tiling image to your background? This page has a custom tiling background, here’s how you can do it. (you can also do it for a particular post, more on that in a moment)

Enter custom.css – and a little bit of code. (don’t worry, it’s not hard to work with…)

First you’ll need an image to use as your background. Check out this site for generating background patterns: bgpatterns.com (warning this site can be fun and you might find you spent more time there than you intended) and download your background. This site’s backgrounds are nice – because they seamlessly tile to create a background. Small file sizes create really striking looks.

Got your background? Good. You can rename the file to something easier to work with – if you downloaded from the bgpattern site – it will be a randomly generated name beginning with patt_. You’ll need to ftp or upload it to your web server. It belongs in the wp-content/themes/thesis/custom/images folder.

Now for custom.css. Go to the custom file editor in Thesis and you should see the the custom.css file there ready to edit.

Here’s what you’ll paste in:

body.custom  {
  background:#F3F7FB url(images/wpa-clouds.jpg) repeat-x;
}

Now change the name of the image to your background image’s name. That works for all the pages on your site – but what if you want to assign a special background to a particular page? Thesis makes that easy, actually!  For example, say you have a page called “services”. You can apply a different background on this page by using this css, because Thesis adds a css class for each page of your site. (home would be home, contact would be contact, basically whatever you entered in as the page’s name in the permalink or slug field.

body.tiling-background-thesis {
 background:#F3F7FB url(images/patterntile.jpg) repeat;
}

If you wanted to – you could even apply different backgrounds to your category pages of your blog – the classes for these are created like this: cat_categoryname – so if you had a category called Beaches, it would be cat_beaches.

If you decide to apply this to a post, there’s one more step – after you’ve created your style, note what the class name is – that’s the part after the dot. Then edit your post, look in the SEO Details and Additional Style section for the  CSS Class field, add your class there (no dot) and update your post. That’s how I got the different background on this post! Easy!

There’s a lot more customization you can do with this system – but this is one of the simplest and easiest changes you can do to your Thesis site.  Have fun!