In this session we demonstrate how to add a background color to the sidebar in Thesis 2 using a single element styles package. We also demonstrate how to use a background image to make the sidebar color extend all the way to the bottom.
Rick: Did you want me to demonstrate that color in the sidebar thing that you asked about in the forum?
Member: Sure. That would be great.
Rick: Is that what it was?
Member: Sure, that’s great.
Rick: Okay so I will. So we come back over here to that, the same Thesis Skin Editor. And in the first place, let’s see… let’s drag these menus out of here. So you know, you’re sort of tempted in the first place, to add a color to the content column and add a color to the sidebar column. So you have one color to the content and one color for the sidebar.
And I’ll show you what that looks like here. The class that we would be styling is content and this class is sidebar. So if we go over to our CSS and we just create… let’s just create a couple of single packages just for grins. Single element style package and we’re going to call this content and we’ll reference content and the selector will be .content. And then under Options, let’s say our background color is light grey. We hit save and then I think up here under Container, I’m just going to add to that content. Okay, save the CSS. I guess we’re going to have to reload this.
Lesson 4… where am I? Front page… oh, I didn’t save the template, I see. Okay let’s cut back up. However, my CSS didn’t work quite right so at content, that’s the… and .content and our options have a background color of that. Okay somebody’s supposed to be pointing out my typo now. Content… okay, let’s go back over to HTML, look at the content column. It is content. I don’t think I’m spelling that wrong. Okay, let’s ask ourselves why it’s not grey. It should be grey. I just lost it. Div class content… oh because the background is being overridden by this, by the hard written code here. So that’s what’s causing… it’s causing this then it creates this line. It’s overriding my little piece of code and that is, I believe, inside of container. No, not inside of container. Must be inside of columns. Yeah, okay. I’m just going to cut that out for a second. There we go. Okay so now it’s grey.
And then if we were going to say turn this one into blue, we’d create a new package. We’ll call it sidebars, sidebar, sidebar and the selector was .sidebar. And make its background color that blue grey color. Okay, hit save, come up to content and add that. And so now you’ve got grey and blue.
Problem is, the blue is never going to match the grey unless it’s exactly the same height. The sidebar color is never going to extend all the way down to the bottom. So you can’t do it this way. What you have to do is use a background image for the container that contains both of these things so that it will go all the way to the bottom of this container for this color here.
And so the first question is, how big should that be and that is 959 pixels in the standard Thesis size. So that’s how big our image needs to be. So I’m going to open this up in my favorite photo editor. You can… whatever software you use for this. I’m using Photoshop but it can be anything. And the width will be 259 pixels and the height will be 20 pixels. And then I’m just going to pick a background color and I’m going to fill that image with that background color and save it. It’s a little tiny image, right? 167 bytes although it could just as easily be a… as a PNG 8, it’s a little bit smaller. What’s a GIF? Yeah, we’ll make it a GIF.
And I’m just going to dump this on my desktop. For the moment, we’ll just call it sidebar background. And then what we’ll do instead of what we’ve done here is we’ll go ahead and dispose of the content and the sidebar because we don’t need them. And what we’re going to do is come into our columns package now and we’re going to add this stuff to our columns package. But first, I want to upload that image.
So we come over to images, choose a file. I’ll put that on my desktop and I’m looking for… I’m going to call it sidebar background.
Member: I think so but you could sort it by date, I guess.
Rick: Yeah, I’m going to have to do that. There it is. Okay now that I’ve got the image, I’ll just copy the URL, go back to CSS, open up my columns package, go to Options. Oh no, that’s right. I can’t do it here because it doesn’t have that available. So we’ll just go back and create a new package and we’ll call it columns styles. And the selector is still .columns because it’s still the same selector that we’re styling. Go over to options, background. Paste that background image. The background position is going to be top left… I mean, top right and then we’re going to repeat in the y direction. And if we hit save… oh I still need to add that here though. No, not that. Column styles… let’s see. Now you see that image goes all the way down to the bottom. And it’ll keep on going regardless of how much content this is. The blue will always extend to the bottom of the page.
Now if you want this to be a different color so we make that… the rest of that an off white color. Come back over to column styles again, same one we were just working in. But then just give it a background color as well. Okay, Chrome is freaking out on me a little bit. There it is.
So now you’re going to have both colors consistent from the top to the bottom regardless of how much content each one has. If the sidebar has more content then this light blue will continue all the way to the bottom of the sidebar. And if the sidebar has less content, the dark blue will still continue all the way down to the bottom here.