• 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

CSS for Full Width Page

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 › General Discussion › CSS for Full Width Page

This topic is: not resolved
  • This topic has 5 replies, 2 voices, and was last updated 10 years, 4 months ago by Brad Dalton.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 18, 2013 at 2:35 pm #51352
    mitchellm
    Member

    I'm brand new to WordPress and the Genesis framework.

    I want to make my full-width page narrower. I know how to do this via CSS. I can take the original:

    .full-width-content #content {
    width: 100%;
    }

    . . . and simply change the percentage. I also know how to set this for smaller screens (e.g. phones) so the width reverts back to 100% in those cases.

    The part that's confusing me is that full-width page seems to subsequently control the look and feel of the Archives page and the Home page (i.e. that show at 75%, e.g. if I set the full-width to that). I didn't expect this result, but I am new.

    My question: is there a CSS way so that I can set full-width to something like 75%, but the Archives page and Home page (and any other impacted pages I may not have noticed) remain at 100% (or whatever they were at default)?

    Essentially I want to set up a special type of page that has a good amount of white space on the left and right. So, I suppose an alternative solution would be to create a new page template: but I have no idea how to do this, or if it's feasible.

    July 18, 2013 at 3:02 pm #51353
    Brad Dalton
    Participant

    Try adding a custom body class to the page under Layout Settings.

    Or you can use PHP with a conditional tag to add a custom body class:

    add_filter( 'body_class', 'custom_body_class' );
    function custom_body_class( $classes ) {
    	if ( is_page( 'custom-width' ) )
    		$classes[] = 'custom-body-class';
    		return $classes;
    }
    

    Source: http://my.studiopress.com/snippets/custom-body-class/

    Or you can change the layout conditionally and also add a custom body class:

    Or you could rename the landing page template and use it as a custom page template with body class so you can change the width.


    Tutorials for StudioPress Themes.

    July 18, 2013 at 4:47 pm #51360
    mitchellm
    Member

    @braddalton: Many thanks for all the options! This is good to know and I'll explore them a little later. For now it seems like your first proposal ("Try adding a custom body class to the page under Layout Settings.") seems the best for the short run. Unfortunately my specific knowledge of Genesis (and hooks and filters and many other things) is very small.

    I see where the Layout Settings is for a page. I tried putting in my CSS, but that didn't work. So how does this work? Do I add something to the CSS, and then a special code here? Something completely different? Sorry for my ignorance, but I'm not figuring out the specific set of steps I need to take in this case.

    July 18, 2013 at 4:59 pm #51364
    Brad Dalton
    Participant

    Basically, you create a custom class named whatever you like, insert it into the field under the Layout Settings and then use that in your CSS rule in your child themes style.css file:

    .your-custom-class {
    your css delarations
    }
    

    Wrote a post about this a while ago.

    If its only for one page, then the first solution is the easiest.


    Tutorials for StudioPress Themes.

    July 18, 2013 at 7:25 pm #51376
    mitchellm
    Member

    @braddalton: Thanks for the added info. Worked perfectly! Great to know moving forwards. Now that I know how to change things for a specific page, somewhere in the near future I need to follow through on some of your other recommendations so I know how to make more general changes, rather per-page. One step at a time! Thanks again.

    July 18, 2013 at 8:35 pm #51380
    Brad Dalton
    Participant

    Any time Mitchell.

    Its an absolute pleasure helping fellow StudioPress community members.


    Tutorials for StudioPress Themes.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘General Discussion’ 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

© 2023 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