Build Your Own Business Website header image

Page Layout with Page Specific Menus and Headline Images

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 page layout with page specific menus and headline images and applying a custom body class to the pages to assign a background image. We talk about how to create a background for the content on the home page and make it a typical content area background.

Video Transcript

Member: Is it possible to… if you go to kimbia.com you know and… I don’t know if this might be a question that you could take on another class. I don’t know if you have more people online but if you click on any of the navigation bar where it says nonprofit focus and you go to that page… see how there’s a banner right there that says advocacy health and disease?

Rick: Yeah, it’s a menu?

Member: Yeah they have different menus like every time you go into a… and then across, they have that nonprofit. They have the title and they have an image. Would that be possible to do on Thesis then?

Rick: Sure. What you’ll have to do is you’ll have to create… and it doesn’t on like advocacy, right? It only exists on this main kind of… oh no, it does exist on every page.

Member: Yeah and if you click on solutions, it’ll change to a different navigation like…

Rick: Well, it certainly is possible to do that in Thesis. What those are are you know, those are context menus and then there’s you know, a… some kind of an image that goes along with the headline. So you’ve got… this is your headline then and then… oh I see. Everything that is… for solutions has the same headline image, nonprofit focus, learn. So you really only have 4 headline images and every subpage inside those usese the same headline image. So… yeah, it certainly is possible. I mean, there’s a little bit of tricky stuff there because you’re going to have to apply a custom body class to those pages so that you can then assign that image as the background image and you’re also going to you know… you’re going to need to style the headline in a way that Thesis doesn’t really let you style so you’re going to have to style it custom. But I mean, what this is… what this looks like to me is a 3-column layout… oh I don’t know. Is that a 3-column layout? Yeah, it’s a 3-column layout with 2 very narrow columns. This column doesn’t really have anything in it except for the vertical menu. And then this column sometimes have stuff in it and sometimes it doesn’t.

Member: So I need to make my layout 3 columns then?

Rick: Yes. In order for this… in order for you to accomplish this, you’re going to have to make your layout 3 columns. And the tricky bit here is going to be… well, you’re going to have one kind of background for the content area on your regular pages and then a different… then you’re going to have this background for the content on your homepage. So your typical content area background is going to be this dark line with the grey and this dark line. It’s going to go through the content area. And then you’ll have this little graphic and it goes to the top of sidebar 1 and you’ll always… you’ll put context aware menus here in sidebar 1 and then you’ll have to have a custom body class that puts this image in. Or I suppose, actually, this image could be a… actually, this image could be a widget. You could put this image in as a widget. Actually, it’s going to be a lot easier, yeah. You put this image in as a widget and just make sure you assign that widget to these pages. And so your background image is you know, a 20-pixel wide strip that is this dark grey line, the light grey and the dark grey and that goes across the top of every content area. And then you’ll have this which is a menu and you’ll put… you’ll use the menu widget and you’ll assign that widget to specific pages and the same thing with this image. You’ll assign this image to specific pages.

Member: Okay.

Rick: Does that make sense?

Member: Yeah, yeah. It does make… it makes perfect sense. That was… so then I’ll have to create… I’ll have to craete one… also probably shadows, right? I mean, the ones that… the grey on top and the bottom?

Rick: I would make this just an image.

Member: Just an image… the whole image?

Rick: Yeah. I would just make a 20-pixel wide image that has this dark grey, that light grey and that dark grey in the image.

Member: Okay.

Rick: Yeah. It would be very easy to do that way and it would be hard to do as borders and gradients and that kind of stuff. But very easy to do as an image.

Member: Just as an image?

Rick: Yeah.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment