Build Your Own Business Website header image

The Beginner’s Guide to the Thesis 2.1 Skin Editor – Part 11 – Example – Change the Background Style for the Site

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

We’ve moved on in this Beginner’s Guide to the Thesis 2.1 Skin Editor from the what, when and where and the next thing we’re going to do is to look now at a whole bunch of different examples.

Changing the Site Background Color

So, the first example is we’re going to change the background of the site. Now you know that of course, in design options, you can change the site background color. Let’s see, let’s use the Thesis Color Scale and then first I’m going to copy this and then I’m going to pick that. And then I’m going to type, e3f5eb and then paste its original color back.

So now I’ve got this set of colors, let’s see, I’m going to bring in… Dang, I just lost all of that. So we’ll just take this and put it there. And then we’ll take this and we’ll pick that. We’ll save our design options. Come over and look at our site and now we have this color setup. But what we really want is a white color behind everything else here.

Adding a Background Color to the Main Container

So the way for us to get that white color then is to come in and add that color to our container. So you can see that it’s a class of container here. Just copy that class. Come over to our custom CSS and type .container{ background-color:#fff. Let’s save that and now we have a white background for our page with the rest of it being that greenish color.

Now if we want to put further margin around our container, we can come along here and say padding:24px and see what happens. That might actually break it but we’ll see. No it did not break it. So we put some padding all the way the outside of that and it still works fine.

0 Comments… add one
0 comments… add one

Leave a Comment