Build Your Own Business Website header image

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.

Part 4 – Using Different Background Images on Different Pages

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

So far we’ve covered how to add tiling background images and adding multiple background images in the same HTML element in Genesis 2 Child Themes. Now we’re going to take a look at using different background images on different pages.

Apply Background Image to Home Page Only

Let’s look at a different page than our Home Page. We’ve got our big blue line here but you know we probably don’t want a big blue line on these pages. We probably only wanted this background image on the Home Page.

In the Introduction to HTML for Genesis Users, I talked about the Genesis body class system and you can see what body class is being employed on this page by inspecting the element. We’ll just come all the way up here to body and you can see it’s class=home blog logged-in admin-bar custom-header header-image full-width-content executive-pro-home. I think it makes the most sense to simply use the body class home here so that’s what we’ll do.

Let’s we’ll come over here to body.home using that body class to make this style apply only to the Home page and to no other pages. So you can see it applied just fine but if we come over to a different page, it’s not there anymore.

Apply An Image to Every Page

Now, we still want this bottom one to continue everywhere, so that means that we’re going to come back over to this and copy it and paste it. Then for this one we’re just going to say body and in that case, we will eliminate the first background image. So it’s just this second background image, that url. We only need one repeat and we only need center bottom so this is the rule that’s going to apply everywhere. And this is the rule that’s going to apply only on the Home page.

Order of Adding CSS Rules

In a situation like this, we want to put the most general rule at the top and more specific rules as we go down. Actually, we won’t put it into there so a new line. Let’s refresh this. Now we have the single background image on all of our typical pages and we have the multiple background image on our Home page. They both behave exactly as we expect it to.

Change the Background Color of the Navigation Menu

One final thing we’ll do with background colors here is we’re going to change the background color of the navigation menu, of the current condition of the navigation menu. Let’s inspect this element and it brought us to the “a” which is inside of the li which is inside of the ul main-menu. It brought us to this “a” and it’s showing a background color here, right?

Let’s come over and click on style.css, this is the selector that is creating that background color so we’re going to copy that selector. Now scroll down here. What we’ve said is .genesis-nav-menu .current-menu-item > a. This greater than (>) symbol means, “immediate children” so all of the links that are immediate children of the .current-menu-item inside of .genesis-nav-menu are going to now take this background color.

Menus often get edited quite a bit and this might be a case where you would take your menu rule and make it separate so you can keep all of your menu rules together. We may take a look at that here later but for the time being, we’ll just save it like this. This is more efficient because the rules are only written once but if you’ve got a bunch of menu stylistic changes, you’d be better off keeping all your menu changes together. In any case, if we reload this, now our menu gets that dark blue color instead of the light blue color.

Inheritance and Specificity Example – Applying Colors to Menu Items

Andrea asked an interesting question, “What would have happened here if you didn’t have the immediate child in front of the a?”. The answer to that is it would’ve applied to all a elements or all link elements that were under the current menu items.

So if we take that out and save Custom CSS. Let’s see, unfortunately that’s a dummy one. I forgot about that so I need to change my menu in order for us to see what that looks like. Let’s come over to Appearance and Menus and what we need to do is add something under the carousel. Actually, what we’re going to do is add these items to the menu like that.

Now, notice how this is a link tag under the current menu item, right? This is the current menu item and so this is under the current menu item or this is a link under the current menu item and the consequence of which is that it is automatically blue if you hover over it, so that’s the consequence. Now, it doesn’t happen here because categories is actually is a dummy menu item that doesn’t go anywhere and so it can’t have a current condition and none of these things would be current under it. Well, I suppose we could go to Bananas and see what happens. Yeah, I guess it isn’t really.

So, it’s a little confusing but this is why you use the immediate child instead of just the a’s because there is a potential of a number of a’s under there. This greater than (>) symbol means it only applies to that single a. When making stylistic changes like this to existing styles, I recommend you just stick with the selector that Genesis uses rather than changing that selector in any way unless you really find that there’s a strong rationale for changing it.

Save $200 on Membership Now!

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

Leave a Comment