Full Width Backgrounds

[dmorda]

Hello,

What's the best way to properly implement full width background colors/images using the Reverie framework similar to how Zurb has their homepage?

http://foundation.zurb.com/

On that website, each section is centered in the page in 12 columns, but has a background color that stretches the entire width of the screen.

By default, that doesn't seem possible in Reverie because the header.php wraps the main content into a row such that anything in between will only have twelve columns to work with, not the entire width of the screen.

Maybe it's as easy as removing the row class from the header.php file for the entire main content wrapper, but I figured I'd ask to see what others might suggest.

[randomfreeform]

I'd like to do that too! Ideally we'd be able to put any content we want in a full window width div, header or footer... (just like so many new web designs are doing).

(Though rare, I'd also be curious if we could make complete sites that are full screen width using Reverie in WP.) R

[TechnologyArchitectureLLC]

register a custom background admin option.. new to wordpress since 3.o.... throw it in functions.php

[randomfreeform]

Thanks for jumping in but at first glance not sure exactly what ya mean.. (I'm a low to mid level wp coder). We're looking to do something more like this (which is fairly common design layout lately). http://dev.evernote.com

Ideally we'd be able to put any content we want in a full browser window width div, header or footer... this would be trivial if we weren't working in WP and doing simple html pages.

[randomfreeform]

Worth noting... I just found out that the menu bar will stay just above the page content area when it has 'contain-to-grid' (the Reverie4 default)... but the menu items will go to the edges of the browser window if you take that out. Hmmm, is there something like 'don't contain-to-grid' for a div in a WP page or post?

[randomfreeform]

Having backgrounds or even content go to the windows full width is a common design approach these days... Zhen or anyone have any thoughts on how we might achieve this?

(TechnologyArchitectureLLC.. care to elaborate on what you suggested above?) Thanks!!

[awshout]

Wrap a <div class="row"> with another <div class="your-class">. Give this div.your-class a background and width: of 100%. The div outside the .row will be full width and the contents of the .row will remain 1000px wide. If you want the background to change size with the window, look into the CSS background-size: cover property.

[randomfreeform]

You're so cool.... will give this a try and report back for others.

[randomfreeform]

OK, I tried your suggestion above Anthony but it doesn't work in Reverie with all it's Foundation grid workings... (If I was doing normal hand coded html this all would be trival.) FWIW - we CAN have full window width headers already and I did make your '100% container div around a .row' work on the footer.php.

I think what we need are some special css modifications or new special classes added to the Reverie>CSS>foundation.css file that alows a div class to break outside the top level 1000 pixel .row grid.

(Maybe some sort of special page template trick would work but this sounds messy compared to modifying the css classes.)

Fingers crossed that other more adnvaced foundation coders see the deign merits of having this functionality! R

[awshout]

You're correct that you'd need to remove the top level .row from header.php. Creating a new template would still leave you confined to that row. You would have to rewrite all the templates to suit your needs, but I think Reverie is intended to be a starter theme anyway.

[randomfreeform]

Hmmm, does anyone else think they might be interested & knowedgeable enough to try making this template or some smart mod?

It seems like such a common design element these days... I admit I haven't had time to explore it really, nor am I experienced enough to do it cleanly. Fingers crossed.

[milohuang]

One simple way to achieve this is to wrap a new container div in both header and footer, so it becomes something like:

<div class="container">
    <div class="row"></div>
</div>

and add width: 100%; to the new container.

Will make the change to the framework this week.

[randomfreeform]

Yea! Will give it a try asap - but looking forard to you making the change on the next version of Reverie...

(BTW, sorry for my wordy posts around here Zhen... just trying to be clear which isn't always easy or short.)