Social Networks

For changing background in custom theme there is no option in design option. Using the custom css easily you can change the back ground.

How to Add Custom Backgrounds

In the following tutorial, you’re going to learn about the code that makes this happen, and you’ll even be able to download a background “starter kit” that you can use to hit the ground running. Bad puns aside, if you’re ready, read on!

How Thesis Backgrounds Work

Out of the box, Thesis comes equipped with a markup structure that can accommodate background changes with ease. Three HTML elements are involved in the production of the background:

<body class="custom">
<div id="container">
<div id="page">

By adding just a few lines of CSS to your custom stylesheet, you can modify the above elements to create some pretty excellent background color, border, and page color combinations.

Download Your Custom Background Starter Kit

To begin, you’ll want to download the custom background starter kit, which contains the following:

  • custom_backgrounds.css — a file containing six sets of CSSdefinitions that produce different backgrounds
  • /custom_images — a folder containing 5 custom images used by the code incustom_backgrounds.css

Although the /custom_images folder is optional and is not required to change your background, it does contain images that are required by 5 of the 6 styles included in the starter kit. The second part of this tutorial assumes that you have uploaded these files to your server, so you may want to take that into consideration as well.

If you choose to upload the custom images to your server, you’ll need to place them inside the /custom/images folder. Don’t do anything with that custom_backgrounds.cssfile just yet—you’ll need it for the next section of the tutorial.

To clarify, the only files from the background starter kit that should end up on your server are the images contained in the /custom_images folder. When you actually upload them to your server, you should place them inside the /custom/imagesfolder.

Styling Backgrounds with Custom CSS

To illustrate how you can style your background, let’s look at an example from thecustom_backgrounds.css file contained in your starter kit. Set 1 from that file contains the following code:

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;
}

Copy and paste that code into your custom.css file, and you’ll notice that your site now looks like Figure 1, which appears below.

Please note that I’ve added some text to the figure to help explain what each CSSdefinition does. Also, the top and bottom margins in the image are not drawn to scale.

As you can see, just a few lines of CSS can really affect the look and feel of your site. And if you really want to get crazy, you can take this concept a step further by incorporating an image into your background.

 

Please post your comments for any queries !

 

 

  1. Hi Team, Thanks for the great post. Steps are correct to change the thesis theme in this technology blog post.

Leave a Reply

Your email address will not be published. Required fields are marked *

Allowed Tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>