Build Your Own Business Website header image

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 I want to add some background images and color to the Thesis Classic Skin. So we’re going to start off in Skin Design with this. I’m going to take this interior backgrounds out of here. And then let’s really, really lighten it up. Save design options.

Let’s take a look at the site, flush the cache and inspect element and reload. Now that odd background color has gone. This is now our entire site background but that’s not what we want. So the next thing we are going to do is take this Container and we’re going to give it a background color.

In fact, I just want to give the Container a background color of white. Come back to Custom CSS and then I’m going to show you something you may not know. This stuff could actually all be consolidated. We could take this, put a comma there, take this and put a comma there and delete that.

Now we have a more efficient CSS file. We don’t need to write border none all those times. All we need to do is put the selector that we want the border none to apply to and we separate each selector with a comma. And now we can just take out this comment because it says remove borders but we’ve now taken care of that.

Let’s come over and copy the comment. Just backgrounds. So we are going to start by saying that the Container is going to have a background color and I’m going to say white. You can actually just type white which in this case is fine. I could also do pound sign fff. Then close that curly brace. So the Container now has a background color of white. Save that.

Come back over to the site, flush the cash and we now our page is white. Now that I’m looking at this I think I’m missing padding on this column here. I need to add that padding to content widget. I’m going to do that here, dot content dot widget, padding hyphen left colon.

Then I’m going to use again the variables that are available in Thesis Classic so that they are always the same. I’m going to come down here to x single which is the single space and put that there. Padding, left single. Save our Custom CSS.

Go to the site and flush the cache. And there we go, that looks properly laid out in its space.

Now I also want to add a solid background to the Sidebar. The way I’m going to do that is using a little background image that is the width of the sidebar and that is the size I want. If we look at this content you can see the sidebar ends before the content area does. I actually want that green background to go all the way down to where the content ends.

The way to do that is to use a background image but rather than attaching it to the sidebar attach it to the content and just make it right aligned and have it repeat vertically.

We’ll say div id content, I’m going to use this selector to put that in. And before I can do that I actually have to go to my media library and Add New. I have to upload that background image file. Select that file, come down to my pictures and I’m looking for sidebarbackground.png. Open that, hit edit so I can get its URL.

Then come back over to my Custom CSS and say pound sign content then background image color url. Now all the syntax for this is in that other cheat sheet we talked about earlier. Then open parenthesis, paste the url and semicolon background position colon and it’s going to be top right. Finally background repeat colon repeat Y. Y is vertical and X is horizontal.

Now we’ll save the Custom CSS and come back over to the site. Flush the cache and now I’ve got my green background that goes all the way along the content. I doesn’t matter how long the content is the green stays all the way beside it.

Next we’re going to add a background image to the footer. It’s actually going to be in the content area instead of the footer. I’m going to give the footer a solid background color. That’s what I’ll do first.

All I have to do is use div class footer and give it that background color. Say dot footer background color and then put in color 679. Save Custom CSS. Go to the site and flush the cache. You can see the color in the footer.

The next thing I want to do add this cute artistic color image that I want down here in the bottom. I’m going to say div id content and then content as my selectors. Come back over here. Copy that. Content dot content and then position is bottom center, background repeat is no repeat.

And now I just have to get the image. Add New, select the file and that is this footertopper file. Open it. It’s loading. Again, click edit so we can get its URL. Come back over to Custom CSS and just replace that URL with this URL. Save our Custom CSS.

Go to the site and flush the cache. Oh I also need some bottom margin here so that little barking chihuahua image moves up. Let’s just test that. Say, margin bottom 20px. Nope it’s not margin, it’s padding we need. It’s not 20px it’s probably 40px or 60px. I’m going to take that code there and add it to that Content content in Custom CSS.

Then there’s one last thing I want to do and that is to put a little paws image in the background. That’s actually going to go in the body. So I’m going to remove that and say body and background image url. It doesn’t matter what the position is so I’m going to delete it. And by definition, things are going to repeat if you don’t specify so I’m going to delete that as well.

All I need to do is select the new file and it’s this paw print here. Click edit so I can get the URL. Copy that and come back over to the body one and replace the URL. Let’s go to the site and flush the cache. Now we’ve got those little footprints all round there and we’ve got a nicely styled page.

Obviously we need to change our heading color here because you can’t see it now. So come back over and use this color here for the heading. Go to sidebar headings now we’ll pick that as the color so that it stands out. Text color. Save design options.

Go to the site and flush the cache. Now the heading color has changed. Everything looks as you’d expect.

I have a question here, “Does Custom CSS apply to all skins?”. No, it does not. If I loaded a different skin a different Custom CSS would be here. This is tied to my version of the skin. When go to the Skin Editor and Data Manager and create a backup, it’s going to backup that CSS as well. Just to be clear, Custom CSS is skin dependent.

0 Comments… add one
0 comments… add one

Leave a Comment