Build Your Own Business Website header image

What’s New in Thesis 2.0 Part 8 – Style the Backgrounds

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

In this session we show how to style the backgrounds for the the Body and Footer in Thesis 2.0 by editing the existing packages for those areas. We then add and customize the options for background colors and images.

The next thing to do is to style the backgrounds. So we’ll come back over to our Thesis 2.0 Skin Editor and we’re going to start with the body.

Edit Body CSS Package

The body has background styles and the first thing we’re going to do is add a background color. That color is a green color and I also want a background image. Let’s save that and go back to my images because I haven’t uploaded my background image yet.

Add Background Image in Image Editor

We’ll choose an image, come down here to my dark paw prints, open that up, add the image, copy the URL. Go back to CSS, open up the body, look at options, background, background image then we just get rid of the extra stuff. Background position will be top center. Background repeat will be repeat and I think we’re good to go with that. Hit save and compile, come back over and take a look at it.

Oh yes, it is a circle, Cynthia. Very good catch. I don’t know why I did that but yes, it was the circle. So come back over to body and there we go, background. Save, save and compile, refresh. Now that’s not what’s supposed to happen though because I thought the little feet print were transparent which means the green should show through.

Troubleshoot Background Color Issue

Let’s just double check that. Maybe I missed the color. No, I definitely did not. So let’s just repeat in the x direction and see if the green shows up there real quickly because I might be using the wrong image then. No, my body is not getting the green color. And it should be getting the green color just fine.

Let’s see what they say here. Something is killing the background color. I see, the background color, for whatever reason in this instance, the background color insisted on me putting in the pound sign. Now I don’t know why that’s the case because that hasn’t been the case elsewhere. But I could just be totally wrong about this. Maybe I pasted in a character that was wrong or something.

Add White Page Background

Let’s come back over here to body and repeat everywhere. Okay so we’ve got that. Now I want a white page background so we’ll come over to our container and go to our options and our background and we’re going to say fff. Let’s see if that works. That did work. Earlier I must have copied and pasted from a document that other number and there must have been some extra character in there that I didn’t realize stayed with it.

We’ve got our green background. Although I don’t want that up there so we need to get rid of a top margin or something. I don’t think there’s a padding and body but let’s just look real quick. Padding, there’s no top padding and body so there must be some top margin and container. Indeed, there is. So we’ll get rid of the top margin and container, save and compile that, come over and take a look. There we go.

Edit Footer CSS Package

Next I want to add a cool background to the footer. So we’ll come back over to the footer style now. Not footer columns but actual footer.

Add Background Image & Color

Actually, first, let’s copy our image and that is this little woof image. Go back to CSS, over to footer, go to options. Now our background image is going to be that. Our background color is going to be this turquoise green. Our background position is going to be top center. Choose no repeat. The background image won’t repeat. It’s going to sit up there at the top but I do need a bunch of padding. And really, what I need is like 125 pixels of padding. We’ll have some bottom padding. We’ll just leave it like that. Let’s hit save and we’re just about there.

Review Changes and Adjust Options

I’ve got a border that needs to be removed so let’s come down to our footer again and look at border and say none. Save that one. And actually we’ve got the same kind of thing in the header that I forgot about. Delete that and say none. Save and compile. Okay now this obviously wants to be styled yet but we do now have a bottom footer and our heading. And I just want to add some page style here real.

Add Container for Page Background

In order for us to add page background, I need to add another container. So I’m going to come over to the page and add a container. The container is going to be called page background. And it’s going to hold my background image. Okay, shift drag it up to the container. Page background will come down below header. Shift drag columns into page background and save that template.

Add Package for Page Background

And then we’ll come over to CSS and add a single element style. The name is going to be page background. The reference will be page background. The CSS selector will be class page background. Let’s see, let’s hit save. We’re going to make sure we put this in here.

And then we need to get the page background image which is this one right here. This is going to give me a background color down my sidebar. So come back over to CSS, down to page background, options, background, background image, background position is top center. It’s going to repeat only in the y direction. We’ll go ahead and hit save. Save and compile.

Come over and take a look at it. Let’s see, page background. Maybe I didn’t hit save and compile. Refresh it. Okay, so I missed something. Oh, I’m on my front page and this is only right now taking effect on the page itself. Now you can see why I wanted a little bit of extra padding here so I’m going to add 10 pixels of padding to this column and then it’ll slide over properly.

But before I do that, I’m going to come over to the front page and I’m going to add this page background box to it, to container, move it down, drag 2 columns into it, save that template, come back over to CSS and we are looking at the 2 columns and column 2 options. And remember, this padding where I said 32? That’s what I’ll do, 32 pixels there. Save, save and compile, refresh and now our everything fits inside of that nicely.

I can see I also want a little bit of padding on top of this though. So since we’re there, let’s just go ahead and do that. That is 2 columns. Options column 2, go down to column 2 padding and give it 30 pixels of top padding. There we go, it drops down. If we go to our front page, we get the same thing going on here. And now we’ve styled the backgrounds in Thesis 2.0 on our demonstration site.

2 Comments… add one
2 comments… add one
  • Babette November 30, 2013, 11:21 pm

    Hi, Thanks for all the great tutorials. I have become so dependent upon their guidance, I am hoping that you have followed this one up with an update for thesis 2.1 wherein packages are deprecated.

    • Rick Anderson December 4, 2013, 4:04 pm

      Babette – there is a whole series for 2.1. Look for the Thesis 2.1 Launch Party videos.

Leave a Comment