Changing layout of home page only – questions

[cstreet]

I am using the genesis-sample theme, and would like to make somewhat of a custom home page.

- How can I change the site-container for the home page only? I want to change the color.
- How can I make the nav.nav-primary unique for the homepage?
- How can I hide or change the header image for the homepage?
- How can I change what displays in the header widget area for the home page only?

Some themes have .home as an identifier that allows for pretty easy CSS changes, but I cannot seem to find it on genesis-sample. Any ideas?

[marybaum]

Duplicate those rules and then add the .home body class in front of them:

.home nav.nav-primary {
background-color: #BADA55;
float: left;
margin: 0 1.2rem;
}

And so on.

Two ways to handle the home-page image:

.home .title-area {
background-image: url(http://yoursite.com/images/homepic) 0 0 no-repeat;
}

Or set the header image in either the Genesis Theme settings or the Customizer, and specify a different image for the home page.

If you want a completely custom home-page layout, write the markup in a separate file called front-page.php and use it to lay out the header, footer and widgeted areas.

In general, if you don't find CSS selectors in your style sheet, but you see them in Firebug or Chrome dev tools, you can just add them to your stylesheet and have your way with them.

Especially if you're developing a custom theme based on Genesis Sample.

Hope this helps!

Mary Baum

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[cstreet]

Thank you for the insight, Mary. This appears to be what I was after.

[archers]

Thanks... nice clue as to homepage editing !

[Author]

Posts