Build Your Own Business Website header image

Thesis 2.1 for DIY Website Builders – Part 11 – Add Background Images and Color to Thesis Classic Using Custom CSS

Difficulty Level -

Filed Under Topics - , ,

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.

Now that we’ve removed borders from all page in the Thesis Classic Responsive skin, the next thing we’re going to do is add some background colors and background images in Thesis 2.1 to make the page stand out.

Change the Site Background Color

We’re going to start actually with design. And what I want to do is to take this color and make it my background color. So I’ve just made that the site background color, it’s the interior backgrounds color, now it’s also the site backgrounds color. We’re going to save that then I’m going to refresh this and now, everything is that light green.

Add a Repeating Background Image

Of course this isn’t particularly useful if you want the page itself to be white but we’re going to get to that in a moment. First, we’re going to add a background image. We’ve got our background color and now I’m going to add a repeating background image.

Let’s come over and look at our cheat sheet. I have a section for backgrounds and this is one that creates a repeating background image that fills the entire window and repeats in both directions and it goes to the body tag so I’m going to come here and copy that.

Now, you notice there’s an image already specified in here? You’re going to replace this URL with your own image. But I’m going to copy this, come back over to Custom CSS and then since it’s my body, I’m going to take it up to the top and save it.

This image actually doesn’t exist in our library currently so we have to bring that in and the way we do that is to come over to our editor and go to images. Choose a file and then my files are here, tutorial graphics and Barking Chihuahua and I want the paw print. I’ll say okay to that, add the image and now we’ve got our image here.

I’m just going to take this CSS reference, copy it, come back over to the Custom CSS and then replace this URL with the correct one. Actually, it turns out it was the correct one but nevertheless, replace that URL here.

You could also use images that were from your Media Library or images that are hosted somewhere else, it doesn’t really matter what you put in here just as long as the URL is correct. Now, when we refresh our page, we’re going to have a little paw print repeated in every place.

Add Background Color to the Page

Now that we’ve got that done, we want to add a background color to our page so that it is nice and white. If you remember the page layout, the section that contains everything else is called container so I’ve got this little snippet of code here. Background color that fills the page background and that’s this one right here. This is going to reference .container and it’s just going to make the page color white.

Now, it’s saying that for the HTML container, with the class of container, make its background color white. Save that, come back over and refresh this and now we’ve got a white background for our page with the colored background everywhere else.

Add Background Color to the Entire Sidebar Area

However, I want to jazz up my sidebar and what I want is a color that goes all the way down the sidebar and I want that color to extend all the way down even if I’m on say the News page where the sidebar is short and the content is long. In order for me to do that, what I have to do is use a repeating background image and place it inside the columns package.

Remember this section was the Columns box so what we do is first, come over to the editor and add an image. That is going to be the page background image and this background image is 354 pixels wide and 20 pixels tall. I’ve got that.

Then I’m going to come back and actually, I would copy it, right? My code snippet has it correct so I don’t really going to need to copy it but let’s come back over to the Custom CSS section and then grab my code snippet which is the background image that fills the sidebar with the solid color. It’s going to go into columns and it’s taking this image and it is repeating it in the y-direction. The background position starts with the top right so it’s not repeating in both directions, it’s only repeating vertically, copy that.

I have good videos on what the positioning means for using background images and its styling, it’s Lesson 4 in Customize Thesis Like a Pro which will help you get a handle on this idea. They will be updated for 2.1 but the concepts are still the same.

Now we’ve got the correct image URL, it’s repeating in the y-direction, it’s right on top so if we repeat that now we have this dark green color that goes all the way down. Lots of times, if you just put it in the sidebar it would stop as soon as the sidebar didn’t have any more content.

Now, there is a problem though and that is I don’t want it up here so what I’m going to do is use the CSS principle of specificity and remove it from here. Remember I gave the Feature Box an id of feature_box so what I’m going to say is that for the box called columns, inside of a box called Feature Box, don’t have a background image.

That’s essentially this, #feature_box.columns and then background-image:none; okay. So I’m saying, in columns put this one in but in feature box columns, don’t put any background image in. That was why I gave the Feature Box an id so I could target this column’s container separately from this column’s container.

So now we have our feature boxes white all the way across and our sidebar has a color all the way down to the bottom regardless of how long it is.

Add Color and Background Image to the Footer

Now, the next thing I want to do is add a color and a background image to my footer. We’re going to do that using some of these code snippets. But first, we need to get our image and the image is this footer-base background.

This is 1008 pixels wide, 125 pixels tall, it’s a little different so we’ll come back over to the Custom CSS and I’m going to take my background image for my footer. This is the background image that fills the top of the footer, .header, .columns, .content, .footer and paste it there. The background image URL is the image we just uploaded, we’re not going to repeat it and we want it to sit at the top of the position.

Review Footer and Make Style Changes

Now, we’re going to take a look at this and then we’re going to add a background color. I’m going to show you something quite cool. So there’s our background image and that’s not actually where I want it so I’m going to have to add some top padding to move the footer down. Plus I want to add some background color.

So we’re going to add background color next and so we’re going to come along like this and say background-color: and now I’m going to show you something cool. See this thing over here? This is your variable list and what I’m going to do is insert my variable and the one I want is the variable that is that dark green color. I believe it’s also the headline color although this is it here.

I’m going to stick that in here for the moment just like that, just by clicking on it, it inserts it. I’m going to save this. I’ve forgotten which color it was actually. It’s 679da5 so we’ll go back to Custom, da5 and I’m going to get rid of that, it’s color 1, 679da5, add color 1 there. That’ll add the background color and then if I change those colors, it’ll automatically changes so now I’ve got this background color.

Now, what I really need to do is add some padding to shove this thing up into place. So I’m going to add 150 pixels of padding to the top. So padding top 150 pixels and in fact, since there’s no reason for me to have 2 separate lines footer code here, I’m going to cut that out and paste it here so we have one footer rule. That’s what this is, it’s a rule.

Let’s save my Custom CSS, come back over, refresh it and now, we’ve got the image where we want it. And what’s happened to our headlines? Well, our headlines are actually the same color as this so what we want to do is change the headlines for our widget areas and the same thing is true up here. We just didn’t notice it, that changed because we’re using the same color.

So we’ll come over here to our Design and we’ll look at our Sidebar Headings and the text color is going to be white, ffffff. Save those design options, refresh our page and now we have set up our colors in a way that I think works quite well. So we now have backgrounds that were set up using our Custom CSS.

0 Comments… add one
0 comments… add one

Leave a Comment