Thesis Basics

Adding a Custom Background to Your Thesis Theme

One of the most under appreciated aspects of a blogs design is the background color/image. The theory is debatable, but it’s my belief that an effective (usually simple + dark) background supplements the content of your blog by providing a sharp contrast in color to the reader. With an all-white background, you risk having your text, sidebar, and background all running together.

So how do you add a custom background to your Thesis blog? It’s surprisingly easy:

Step 1: Pick a background image. This makes up the bulk of your time investment here. Settling on an effective background image is no easy task. My advice: Keep it simple, shoot for a darker color or patterned image that will contrast the white background of your main content area.

Step 2 (for those who want a solid color background): Paste the following text into your custom.css file (accessed through your FTP account). The text in red is what you’ll want to edit to suit your color scheme (for a full list of HTML color codes, CLICK HERE).

body.custom {
background: #44443f;
}

.custom #container {
margin-top: 2em;
margin-bottom: 2em;
padding: 0.3em;
background: #33332f;
border: 0.4em solid #3e3e3a;
}

.custom #page {
background: #fff;
}

Step 2 (for those wanting to implement an image/pattern background): Paste the following text into your custom.css file (accessed through your FTP account). The text in red is what you’ll want to edit and replace with your image’s file name.

body.custom {
background: #8db6b6 url(’images/bg-ocean.jpg‘) 50% 0 no-repeat;
}

.custom #container {
margin-top: 2em;
margin-bottom: 2em;
}

.custom #page {
background: #fff;
}

Step 3: Upload your image (if applicable) to the custom/images folder

Step 4: Save/upload your revised custom.css file and enjoy your pretty new background!

Be Sociable, Share!