• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Changing layout of home page only – questions

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Changing layout of home page only – questions

This topic is: not resolved

Tagged: css

  • This topic has 3 replies, 3 voices, and was last updated 11 years ago by archers.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 10, 2014 at 1:51 pm #94196
    cstreet
    Member

    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?

    March 10, 2014 at 4:04 pm #94212
    marybaum
    Participant

    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. 😀

    March 14, 2014 at 9:49 am #94867
    cstreet
    Member

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

    June 16, 2014 at 7:14 am #109971
    archers
    Member

    Thanks... nice clue as to homepage editing !

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble