• 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

Best way to remove header, footer and slider from #wrap

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 › Best way to remove header, footer and slider from #wrap

This topic is: not resolved

Tagged: css, minimum, wrap

  • This topic has 6 replies, 2 voices, and was last updated 10 years, 1 month ago by lisa.burgess.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 28, 2012 at 10:17 am #7892
    lisa.burgess
    Member

    Hello,

    I am using the Minimum theme and currently have the following site structure:

    <div id="wrap">

    <div id="header">

    <div id="slider">

    <div id="home-featured">

    <div id="inner">

    <div id="footer-widgets">

    <div id="footer">

    </div>

    What I am trying to do is to either remove #header, #slider and #footer from the main #wrap.

    If this is not the best way to handle it, I would then need to add a new structural wrap around only #home-featured, #page-title and #inner.

    The reason I want to do this is so that I can have full-width for #header, #slider and #footer.

    If anyone has any ideas on the best way to achieve this, thanks,

    Lisa

    December 28, 2012 at 10:20 am #7894
    Riavon
    Member

    Link and theme?


    Twitter: @riavonentprises

    December 28, 2012 at 10:37 am #7899
    lisa.burgess
    Member

    link: http://coresmart.com/wp

    theme: Minimum

    thanks,

    lisa

    December 28, 2012 at 2:16 pm #7987
    Riavon
    Member

    oops sorry I see you did mention the theme. Thanks for the link!

    Why do you want to remove everything? If you just want full-width, simply change your fixed widths to 100% and margin: 0 auto to center things, in your style.css


    Twitter: @riavonentprises

    December 28, 2012 at 9:19 pm #8076
    lisa.burgess
    Member

    Hello Riavon,

    The thing is that I only want full width for the #header, #slider, and #footer.

     

    The rest of the stuff (#home-featured, #inner, and #footer-widgets) I want to be contained in a wrap so that I can lock down the width and add and left/right box-shadow border around.

    any ideas on how to do this?

    An alternative? I found a post in the old forum to remove the header from the #wrap here and this does work, as well as I found this which shows how to do the same for the footer, but I don't know how to remove my #slider from the #wrap.

    Any thoughts?

    Lisa

    December 29, 2012 at 10:06 am #8147
    Riavon
    Member

    You don't need to remove or move anything as far as I can tell. You have support for wraps, and you can style this the way you describe (and as I can best understand from your descriptions) with CSS. It looks like your theme already supports structural wraps, it's just a matter of configuring the widths so that you can achieve the results you're looking for. My best guesstimate based on looking at your site with Firebug is to advise you to change the width of your #wrap to 100%, then you can manage the widths of any/all of the divs contained in there. See my code below for reference. I'm not sure this is the answer that you're looking for, but figured I'd give it a shot. Let me know if this works for you.

    
    #wrap {
    	width:100%;
    }
    
    #header {
    	width:100%;
    }
    
    /* To get a full width carousel try adding this to your style.css with an !important to override the plugin style */
    .carousel {
    	width:100%!important
    }
    
    /* And/or you can try adding this to your style.css - combined with the 
    above width 100% for .carousel or instead. Whichever combination works! */
    #slider .home-slider-wrap {
    	width:100%;
    }
    
    /* You already have this set */
    #home-featured {
    	width:100%;
    }
    
    /* To contain your content width for home-featured div, you can add this to your style.css */
    #home-featured .wrap {
    	width:1140px;
    }
    
    /* You already have this set */
    #footer {
    	width:100%;
    }
    
    /* You already have this set */
    #footer .wrap {
    	width:1140px;
    }
    

    Twitter: @riavonentprises

    December 29, 2012 at 5:13 pm #8235
    lisa.burgess
    Member

    I am trying some of this out. Thanks for your help. I think I am on the right track now.

    Lisa

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 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

© 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