In this session we show how to customize the footer in the Carta skin for Thesis 2.1. We demonstrate how to change the footer background with a background color and background image. We also discuss how to add a border width and color to add a top border without an image.
Member: Well, on the site I’ve been working on that I’m redoing, in pretty much keeping a lot of the same look and feel, it’s got like a colored purple bar at the bottom on the older site. I was wondering how I might be able to recreate that on my new Carta work that I’m doing. The old site is…
Rick: Can you give me a URL?
Member: Yeah, just a second. It is ftcollinsfamilyacupuncture.com. When you go to the bottom, footer area, there’s a two-tone purplish band on what has been a footer in this old design. So, I was wanting to determine how I can get something sort of similar that I’ll use on the Carta site which is under…
Rick: Now, just a second here. So, background color… oh I see, they’re doing it the hard way. Okay. Well, so the short answer is that you could do a background image for the footer area…
Member: Oh, and I can have the purple at the top, okay.
Rick: And just do this little section right here as a background image. So, the dark color, light color and a little bit of white line make that…
Member: I have to make everything else transparent..
Rick: Well, you don’t have to make it transparent, you could make this the background image and this could be the background color. The background color is not going to show through the image.
Member: Right, okay.
Rick: And then you just have that background image start in the top left hand corner and just repeat in the x-direction. So, if you’re looking at Carta…
Member: Okay, I should be able to do that.
Rick: See, I’m just going to show you. I mean it’s in the footer background, right?
Member: Yeah, that’s where I will end up putting it, yeah.
Rick: So under Skin Design and then Backgrounds, you’d put that background color in there…
Rick: And in that background Image Position, you could leave alone, you wouldn’t really have to put anything in there for position but for Background Image Repeat, you could use repeat-x and then it would just repeat across the top only.
Rick: So, that’s one way to handle it. I think that’s probably the easiest way.
Member: Yeah, it’s easier than I thought it would be so I like the idea.
Rick: You know, alternatively, you could do a single color purple and then just do it as a border. So if you’re going to do it as a border, you’d say the top border width would be 20 pixels so you’d say 20px, 0px, 0px, 0px, that’s Border Width. Then the border color would be that purple color and then it’ll just be a top border.
Member: Okay, I can do that.
Rick: That’s another way to do it. That’s the way to do it without an image.
Member: Okay. If I’m going to stick with a single purple that would be probably the easiest.
Rick: Yeah, no question that’ll be slam dunk then.