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

[lisa.burgess]

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

[Riavon]

Link and theme?

---

Twitter: @riavonentprises

[lisa.burgess]

link: http://coresmart.com/wp

theme: Minimum

thanks,

lisa

[Riavon]

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

[lisa.burgess]

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

[Riavon]

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

[lisa.burgess]

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

Lisa

[Author]

Posts