Build Your Own Business Website header image

Thesis 2.0 Launch Party Part 8 – Style the Backgrounds

Difficulty Level -

Listed Under Lesson Subjects -

Applies to -

Add Background Color

Now I’m going to style some backgrounds because that’s the next thing you can do, is to style backgrounds for this. We have this background color that I want to use so first, we’re going to give our body a background color. Come back over to the skin, come over to our body, our options in our body and we’re going to come down to background and here’s our background color. Save that and I think you may well imagine, now it’s all green.

We don’t want to all be green, we want the page content itself to be white so we’re going to come over to container which is where our page content is and come over to our options, background and we’ll make that white, hit save and compile. Now notice how we have this green space above? I think that means we want to get rid of our margin at the top of this. It’s actually probably container padding really. I call that margin but I bet you it’s padding. No, it’s not, it’s top margin.

Jim asks, does reference refer to a PHP variable? No, we first had this thing right here, this is the reference. The packages that are referenced in this list will get created as CSS when you hit, “Save and Compile” so that’s the connection between the reference in the package and this box over here. I think we’re going to come back to our header and give ourselves some top padding because I don’t want that up against that.

Choose a Background Texture

Now, really I don’t know if you notice this but I had a background texture that I want to overlay over this so that’s the next thing we’re going to do. We’re going to come over here to our Media Library and pick up my background texture. I think that texture is going to disappear, I think I have to use this texture. We come back over to my skin editor, go back over to body, come down to background, my background image is this.

My background position is going to be top center, my background attachment will be default, it will definitely repeat so hit save, save and compile css, there we go. Now we have that background all over the place. Let’s do the footer style going on down here so the first thing I think is my container. I want to get rid of that bottom margin too. Left and right margins have auto so must be the body has a bottom padding. No, I won’t rebut that then.

Style the Footer Background

What we’re going to do is take our footer which is here, I think that’s where the margin is or padding. I’m going to get rid of the padding and we’re going to add a new background. The background color is going to be this color, background image is going to be this background image, background position is going to be top center, background attachment will be default, it will have no repeat so hit save.

We’re going to save and compile and see what our footer looks like now. It’s not going to be quite right yet but we’ll get a better idea of what’s going on. We need to give ourselves 75px of top padding in the footer. If you don’t enter px, it assumes px, if you want 75em, you have to write 75em. I don’t know why that line is there, it’s that border, that’s what’s doing it. You got a bit of border on our footer that I forgot to get rid of.

I’ve got something else in this line but we’re going to ignore it for the time being because I don’t want to waste your time as I try to figure this out. You wonder whether or not I compiled it, maybe I didn’t compile it. That was it, thank you very much for catching that. Now we have our “woof, woof, woof” on top of this and I think we probably want a bit more padding.

Create a Page Background

The other thing I want to do is create the background for this page. Essentially, the background for this page makes a green sidebar down the side like this. I don’t want the content to be green but I’m going to put a green sidebar down the side like that. We’ll come back over here to the Media Library and we’ll add one, select the file, there’s my background, open it. Grab the URL for it and come back to my 2 Columns.

My 2 Columns does not have the ability to set the background so let’s go back and look at what HTML I do have so I could do that in. Well, I have to create a new container for this style because I can’t put it inside of this and otherwise, I have to write some custom code which should be really easy to do but I don’t want to do it because I promised I would do this without writing any custom code so instead, I’m going to create a new box and I’m just going to call it, Background.

I’m going to add the box, we’ll give it an HTML class of page_background and put it in then we will shift drag and drop it in the container and we’re going to drag the container down to here then we’re going to shift drag columns into Background. Come back over to our CSS, add a single element style to this, we’re going to call it Page Background, reference to page_background, CSS selector will be .page_background, options will be background image, copy that background image and paste it.

It’s going to repeat in the Y direction and we’ll just add the package to that, compile and save. Let’s make sure I saved the template, let’s refresh the image. Let’s see what did I do? I’ve got a background, my HTML was page_background so I got that part right. We go to CSS, my CSS selector is .page_background, my background image is that location. Maybe what I needed to do is save this, that’s probably what I needed to do. No.

Someone asked me if I saved the template, I sure thought I saved the template, let’s try it again, template saved. Let’s inspect the element, columns-32, column 1. My background didn’t make it so what’s into there yet? It’s because I did this in the single template and I didn’t want it in the single template. We’ll drop that background into header, we’ll drag this over here. It’s not supposed to be in the single template, it’s supposed to be in the page template.

In the page template, I’ve got my shift background, drag it into place, drag 2 Columns into it, save the template, refresh it and there we go. Now it’s working so that’s obviously not the best executed idea here, it obviously need more white space between these two. What did Kim have for me. Yes, she had a whole bunch of white space there, I didn’t consider that when I created these images.

0 Comments… add one
0 comments… add one

Leave a Comment