Full-Width Stacking

[Midilizard]

Will the new Weaver Xtreme theme have options to allow (maybe as easily with even a few checkboxes) those trendy full-width sectional stacking? Here is an example: http://www.leanpath.com/  

[scrambler]

Xtreme has an option for background extension for all its main areas (header, footer, menu bar, content..). It is the “Full Width BG” box.

Then as far as creating the same within the content, the theme cannot do anything about it as it does not manage content, but there is an easy way to use custom CSS on content.

What you do is the following

Add the rules below in Main Options > Fonts & Custom > Custom CSS Rule box

.is-desktop #content, .is-desktop #container {overflow:visible;}
.is-desktop .full-width-bg {margin-left:-500%; margin-right:-500%;padding-left:500%;padding-right:500%;}
body.is-desktop {overflow-x:hidden;}

Then when creating content, use the following HTML code for each Container with a different Background color needing to be extended

<div class=”full-width-bg” style=”width:100%;background-color:grey;”>Your content</div>

I added this piece of tutorial to the full width one below

http://forum.weavertheme.com/discussion/10342/weaver-xtreme-tips-and-tutorials-part-1#Item_1

@weaver, given this is a popular demand, may be you could add the full-width-bg class style to the theme

[Midilizard]

Thanks Scrambler for your generous answer. 

And Yes, Weaver, it would be GREAT and a VERY BIG deal to us designers/developers if you had an efficient way to add “stackable” full-width backgrounds to this. Because of responsive/mobile sites, my savvy and design-oriented prospects and clients are VERY aware of this look – the one page website with a menu that has anchors to different colored full-width sections – and many like it.  When they want it, it makes me have to hack the code in ways I don’t want too, or look at other themes that offer this easily (and I now HATE using any framework other than Weaver Pro II !!!) Now, we don’t need full content to be site-wide as much as mere colored background sections that go sitewide. Again, see the http://www.LeanPath.com website. I can see “stackable” full-width backgrounds that allow lesser-width content frames within. So what about adding an option for content sections like how you do for widgets where we can make as many as we want? Maybe that’s a pro feature. I’d sure pay for that! 

[scrambler]

Weaver implementing the class, would just save you to have to put the Custom CSS Rule in the Custom CSS rule box.

As far as using it you would still be creating your content with divs using the class as the theme cannot be involved in content creation (WordPress rule)

So you are mot missing out any functionality with what I gave you above.

[Weaver]

These “parallax” style designs are now supported as of Weaver Xtreme 0.97 which I will post soon.

The thing needed to get these working was, in fact, a new page template which is a modification of the old Weaver II Raw template.

The new Raw page template will have only the #wrapper, #header, #page-raw, and #colophon divs. There will be no default styling for the #page-raw div, so it will normally take the full width of the #wrapper. No sidebars, no injection areas added to the Raw page template. And note, no #container or #content div.

Then the idea is to use posts to make up each horizontal content area and add them via the ATW Show Posts shortcode. The per page custom CSS can be used to set the width, make a maximum width, and add a bg color.

I plan to add these as options to the ATW Show Slides plugin so that the slider posts type can also be used to make the horizontal content areas, but for now, adding custom per post styling will work just fine.

[Joerg_Knoerchen]

@weaver great work and option! Many thanks!

[pzuckerman]

Your tips are always great, Scrambler. When using this technique, how can I avoid vertical white space between the div’s and between the header and the first div? (An example of what I’m referencing is at http://www.judyandsue.com/home/

[pzuckerman]

Following up, I used the technique you described with a negative margin in the DIV and it seems to have worked. Is that the “best”/recommended way to do it?

[Weaver]

Negative margins are often used to remove gaps. Sometime the real issue is a top or bottom margin on the adjoining div, so either removing that margin, or using a negative margin to move a lower div up will work. Probably cleaner to remove a bottom margin, but there’s not a lot of difference.

Do be sure to make your browser narrow to see what everything looks like on mobile devices.

[Author]

Posts