Build Your Own Business Website header image

A Beginner’s Guide to the Thesis 2.0 Skin Editor – Part 10 – Example #1, Change the Background Style for the Site

Difficulty Level -

Listed Under Lesson Subjects - ,

Applies to -

Whoops, you've found some protected content!

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

Video Transcript

So now what we’re going to do is take a look at 3 examples and then I’ll start taking questions. Anyway, 3 examples. Now, the first example is a very simple one and that is we’re going to change the background of our site. Remembering that our entire site is wrapped in this body so we’ll come over to our CSS package and go to the body. Notice that while I said that there is no reason why these names need to be the same, the fact that they are the same makes it very for you to identify them. So I mean, the name should be meaningful.

We’re going to come over here to options and go to background and we’re going to add a background color and a background image. Now that I say that, I think I want to go to… let’s see, Thesis demo… Oh perfect okay so this is the kind of background we’re going to put together. I’ve forgotten what my background color is. So no, let’s see…copy to clipboard, perfect.

Okay so we come back over to the Thesis Skin Editor and I’m going to put that background color in here. And I’m also going to put a background image in but I haven’t uploaded it yet so I’m just going to hit save to this. And notice it’s already all green, right? So we’re going to come over to Images and choose a file and I… dark green paw. That’s the one. Okay so I’m going to add that image and now, when I added that image, it gave me this address. I’m going to copy that address, come back over to CSS, go back over to the body, options, background and now, put that address in the background image here. I’m going to leave background position alone. I’m going to leave the attachment alone. I definitely want to repeat. And if I hit save, now we have that background image repeated all over the place here.

Now obviously, I don’t want it in the area where I’ve got content so I’m going to add another… I guess, for the time being, I’m just going to add background color to that. And remember that now what we’re doing is talking about the fishsticks container where it had an id of container. So in container, I’m going to give that a background color of white.

So we come back over to css and find that container. Come over to options and background and background color and type in white. I could also type in white, it’ll also work as well. But I’ll use the hexadecimal number for it. Hit save and now the page itself is white and the background has changed.

That is the way in which you make you know, a simple stylistic change to something that already exists. And note that that change happens on our front page, on regular pages, on our blog page, on single blog posts. It happens on every template. Now, the reason that it happens on every template is that that body exists everywhere and this designation of the body, this style applies every place that exists. So this is a way in which the styles can apply to all the templates. You don’t have to have styles for each template. The style that you create can apply to all of the templates.

0 Comments… add one
0 comments… add one

Leave a Comment