Build Your Own Business Website header image

How to Simulate a Full Width Slider in the Thesis Feature Box

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we discuss how to simulate a full width slider in the Thesis Feature Box and place a background image in the content area that has the same height as the Feature Box using the same color on all the images so that it expands from side to side. If the color is the same in every image, it can give the background area a color that expands all the way across.

Video Transcript

Rick: What are you working on?

Member: You kind of took my question because I need some help on a website I’m working on

Rick: Okay

Member: The URL is

Rick: Okay so show me what you got

Member: So this is the website that I’m working on and let me show you what they wanted. Okay this is the copy… this is the website that they want. They want me to model this website. So far, this is what I have. But the challenge that I’m having is making this image full width and also having these images lined up in this box.

Rick: Okay so the challenge you’re going to have with the full width slider, that’s what you’re looking at. You’ve got the slider plugin that’s got an image that extends from side to side. The image doesn’t really extend from side to side. The color does. The image is just like you’re showing it, it’s just this one little… the image is one little piece of it and then the color keeps on going. If the color was the same in every image, it would be pretty easy to do because you can make… give that area a background color that would span all the way across.

Member: Is that possible?

Rick: Well, that is possible. It will require you to place that backgroudn image… well, it will require you to put the slider inside of an HTML element that can span the full page. Right now, your slider… well, I’m not actually sure where your slider is but my guess is it’s inside of the content area and probably inside of content area .page. And so…

Member: It’s in the features… I think the feature box.

Rick: Right. But the feature box is never any wider than the pages so content area .page contains the feature box. And so what you could do is you could put a background image in content area that was the same height as your feature box and that spanned from side to side, just like you’ve got in your header area. You could do that same thing in your content area but you would need to use the same color on all the images. What the…

Member: That’ll be fine, I think.

Rick: Okay well then that’s… if that’s fine then that’s the thing to do. So you would craete a background imaeg that was as tall as your feature box and you would assign it to the content area. In fact, what you might do is you might make it as tall as the feature box plus the white space above where the… well, I don’t know. Is the contact us today’s tip owner’s club… what’s that inside of?

Member: Oh these ones?

Rick: Yeah.

Member: The navigation bar? Yeah, this would just be the navigation bar.

Rick: But I mean, is it inside the content area or inside of the header area?

Member: It’s above the header.

Rick: Below the header.

Member: Below the header.

Rick: But inside… so it must be still inside the header area though.

Member: Correct.

Rick: So if it’s still inside the header area then all you need to do is create a background image for the content area that is the same height as your slider and is the color that’s going to be the main background color for your slider. And then you would just repeat it you know, horizontally the entire width.

Member: Oh okay.

Rick: Does that make sense?

Member: It does. So just d oa background on the content area and I’ll repeat… just do a repeat all the way and then…

Rick: Right.

Member: Okay.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment