Full Width Designs

[scrambler]

IMPORTANT: Since the new full width features of Version 3, there is a New Version of this Tutorial on the Weaver Guide site Below

http://guide.weavertheme.com/full-width-design/

The Below Tutorial is Now Obsolete, PLEASE READ THE NEW ONE ABIVE

All the tutorials reference options location from the Legacy Admin interface found in Appearance > Weaver Xtreme Admin.
You must have installed the free Weaver Xtreme Theme Support plugin to see the Legacy Admin pages
If you are using the Customizer, you will have to figure out the corresponding location.

People usually mean one of two things when they mention full width Site designs.

A- Extend Only the background full width, but keep the content within the theme width.

A-1- Extend all background attributes of an area to the edge of the browser.
This method is the preferred method if your extended area has things like border, shadow, gradient, background image.

a- Theme Areas (Header, Footer, Container, Menus..)

• For the Main Theme Areas, check the “Extend BG Attributes” option, just under the “Full With BG” option.
• For other Areas that do not have the options, simply put the class  wvrx-fullwidth  in the “Add Classes” options box of the Areas that need to be extended.

b- Your own content.
If you want to create full width containers in your content areas, do the following:

• Add the rule below to Main Options > Fonts & Custom > Custom CSS rule Box
  #content, #container {overflow:visible;}

• Then add the class  wvrx-fullwidth  to your content container.
• If you need padding and width, DO NOT use inline style, use a class and a separate CSS rule. The Full Width script uses padding, margin and width set as inline style that would conflict with yours
  For example
  <div class=”wvrx-fullwidth  mydiv” style=”background-color:grey;border-top:2px solid black;”>Your content</div>
  <div class=”wvrx-fullwidth  mydiv” style=”background-color:yellow;”>Your content</div>

• Then add the Styling for your div using the mydiv class by putting CSS rules in The Theme Custom CSS Box like
  .mydiv {padding:10px;width:100%;}

See an example here: http://demo.weavertheme.com/full-width-bg/

c- Posts

• Add the rule below to the the theme Custom CSS rule box.
  #content, #container {overflow:visible;}

• Select the color for the post in the Post BG box of the post editing page.
• Put the class  wvrx-fullwidth  in the “Add Classes to this Post” Box of the post editing page, Or use the Extend BG color box

A-2- Full width background Color only
This is an alternate method if you only need to extend color and / or need a different color for the extension.

a- Theme Areas
If you only need to extend the area with a specific color (eventually different from the actual area), The theme Main Areas below have a “Full Width BG” option box you can use.

•Main Options > Wrapping Areas > Container Area
•Main options > Header > Header Area
•Main Options > Menus > xxx Menu Bar
•Main Options > Footer > Footer Area.

You simply specify the color you want for the background extension in the option the box.

b- Using Posts.

Posts editing pages include a few options for Full Width content that are found under the “Per Post Style” box. They are Post BG, Extend BG, Post text Color, Padding and Margin.

Specify both a post BG color and an Extend BG color.

Using these options, you can create the various sections of your full width content using one post for each color band.
You can use regular posts with their own category, or if you have Weaver’s ATW Show Posts (https://wordpress.org/plugins/show-posts/) and ATW Show Slider (https://wordpress.org/plugins/show-sliders/ ), you can use Slider Posts with a specific group..

You then have two ways to make these posts display with their background extended to the full width of the browser.

1- Using ATW Show Post:

•Create a Filter that selects either the category of posts with full width options set, or selects your group of Slider Posts (if you created your posts using Slider Posts).

•Create a New page, select the “RAW” template for it, and insert the Show Posts Filter in the page content, either typing the shortcode as it appeared at the top of the Filter page, or using the Insert Show Posts button above the content editor.
See and example here: http://demo.weavertheme.com/plus-plugin/

2- Using a regular Page with posts:
If you created your full width posts using regular posts and gave them a common category:

•Create a New page, select the “Page with posts” Template for it.

•In the Category Filter box select your post category.

•Then add the rules below in the “Per Page Style” box.

#container {background-color:transparent;padding:0;margin:0; overflow:visible;}
#content {background-color:transparent;padding:0;margin:0; overflow:visible;}
#content article.post {margin-top:-5px !important;padding-top:20px;padding-bottom:20px;}

B- Full width Content
Have the whole area, including content, extend full browser width.

In Weaver Xtreme, for full width content, you set a large width for the Wrapper to make everything full width, then you reduce the witdh of the areas you do not want full width.

Xtreme has options to set a reduced width for each of the 3 main areas (Header / Container / Footer).
You have the choice to do that by specifying a % width, or a max-width, or a combination of both.
You can also choose the alignment type (left / Center / Right

To make anything full browser width, you would therefore start by setting the Wrapper (Theme Width) to a very large value. (Alternatively, you could place the rule below in the Wrapper Area BG CSS+ box).

{max-width:100%;}

Then you can bring in specific areas (container, header, footer), using the Width % box or the max-width value box. In both cases, you have the choice to align that area as you please (left/center/right)

Notes:

• Using the Max-width value box is usually the most likely desired situation. The area will be reduced to the max-width specified, but as the browser gets smaller, the space on the side will progressively be eliminated until everything is the same and scales together.
• If using a % width, you will always have empty space on the side of the area content, even when the browser gets smaller, they will just scale down with the browser.
• The Width & Max-width boxes are available on the main areas like Container, Header and Footer. Some other areas like header and footer widget areas, header and footer HTML area only have a %width option.
• If you need to set a max-width on areas without the option, you can add one of the max-width rules below to the Area BG CSS+ box.
  {max-width:940px;margin:0 auto;}    /*Centered*/
  {max-width:940px;}    /*Left*/
  {max-width:940px;float:right}    /*Right*/

For example, let us say you want a full width Header and Footer but limited Content.

You set the theme width to 2000px, and set the Container Area to a max-width of 940px.

Now let us say you would also like the header widget area to be contained in the 940px wide area, you would add the rule below to the Header Widget Area BG CSS+ box
{max-width:940px;margin:0 auto;} 

In the same way if you wanted your menu bar to be limited and centered you would put that same rule in The menu Bar BG: CSS+ box

If the area you wish to constrain does not have a BG CSS+ box, you can add a full Custom CSS Rule in Main Options > Custom > Custom CSS Rule box.

Below is the example of the rules for the Footer Copyright. (Inspect your page with your browser developer tools to figure out the appropriate selector)

#site-ig-wrap  {max-width:940px;margin:0 auto;}

C- Mixed Configurations
If you are using the Full Width Content method (above) and are restricting the content width of some of the areas, but would still like their background to extend full width, you can do one of two things.

Method-1:

• Set the site width to something large (or use max-width:100%) as explained previously.
• Reduce the width of some areas using the max-width options as explained previously
• Extend the background of the restricted areas using The “Extend BG Attributes” option or the wvrx-fullwidth class as explained previously, or using the “Full With BG” option if needing a different color for the extension

Method-2

• Use a max-width custom CSS rules on the sub container of the area if there is one available (you will need to inspect your page with your browser developer tools)

Examples:

a- Full content width header and footer with limited width content area but full width BG color. See it here:http://demo.weavertheme.com/full-width/  

• Setup site to full width using {max-width:100%;} on the wrapper to make Header and Footer content full width
• Limit the Content width using the Max-width Option Box & Align: Center on the Container Area
• Yet extend the Container BG color to the full width of the browser using the Container Area “Full Width BG” color option box, or using The “Extend BG Attributes”

b- Bring in some of the header content width keeping their BG full width

• If you have a full width header and therefore a full width Menu Bar, and you wish to limit the width of menu items and add HTML areas while keeping the Menu Bar background color full width, you can put the rule below in the Menu Bar BG: CSS+ box
  {max-width:940px;margin:0 auto;}
  Then Set the “Full Width BG” option on the Menu Bar, or check the “Extend BG Attributes” box.

• If you also wish to limit the width in the title and tagline area, Add the rule below to the Main Custom CSS Rule box
  #title-tagline {max-width:940px;margin:0 auto;}
  If you have a search bar also add
  #header-search {position:relative}
  #header-search .search-form {top:-40px;right:0px;}

[scrambler]

Creating a full browser width header image that has a fixed height for browsers wider than a specific width, but that scales down proportionally for browsers under the specified width

On very large browsers, when the browser gets smaller, the header image gets cropped right and left but stays the same height.
Below the specified width, and as the browser keeps getting smaller, the header image will scale down proportionally (width AND height).
This offers the benefit of the header image scaling down on mobile devices so the header image height remains proportional to the device, while preventing the header image from becoming too high on large browsers while remaining full browser width.

Open the demo site page below on a very large browser, then reduce the browser width and observe how the header image changes.
http://demo.weavertheme.com/full-width-bg/

Method:
• Using an image editor, create an image that has the maximum width and height you want for large browsers (like 1920 x 200 px)
• Save that full image to be used as the header-image area background image.
• Then crop a middle portion of that image as wide as the width from which the image will scale with the browser (ie:1024 x 200px), and save that to be used as the actual header image.
• Select the cropped file as the header image in Appearance > Header
• Use Main options > Header > Header Image > Use Actual Image Width option If you have plus. If you don’t add the rule below in Main Options > Fonts & Custom > Custom CSS Rule box
   #branding #header-image img {width:auto;}
• Select Center in the Header Image Align option
• Then add the rule below to the custom CSS Rule box (Main options > Fonts & Custom > Custom CSs Rule box) to put the large 1920px wide image in the background of the header container
   #header-image {background:url(LargeImageURL) bottom center no-repeat;}

Note: If this will only be done for a specific page, you will need to add the page-id class selector in front of the rules like
.page-id-xxx #header-image {background:url(LargeImageURL) bottom center no-repeat;}

replacing xxx by the page ID number

[Kimmer99]

Quick question though – are these instructions only for Weaver X Plus? If so, is there anyway to accomplish full width in standard Weaver X?

Thanks,

[scrambler]

Most of it works with X only , but some do require plus.

From What I can see in the admin UI

The “Full Width BG” that extends the background color is Plus

The “MAx width” option that allows to restrict some areas content is plus but can also be done with Custom CSS.

The Extend BG attributes that can actually do all that “full width BG” can do plus more appears to be in the base version.

If you are unclear, open a thread with a link to your site and explain in full details what parts (various header pieces, content area, footer)  need to be full width, and if you only need the background of the area to be full width, or the actual content.

[Kimmer99]

Thanks Scrambler, will do!

[swmagic999]

I’m still confused scrambler as I don’t see what you are referring to in A.a. 

Can you drop me in from the top of where you are referring?
For the Main Theme Areas, check the “Extend BG Attributes” option, just under the “Full With BG” option.

Can you instruct me where “Main Theme Areas” is? I don’t see that under Appearances. Maybe some other place?

I’m at Weaver Xtreme Plus

[scrambler]

What I am referring to when I say “Main Theme areas”, are things like Header, Container (holds content and sidebars), Menus and Footer (I added it to the tutorial for clarity, thank you)

These have their own options pages under Appearance > Weaver Xtreme Admin. In these options you will find the extend BG attribute one.

Of course, since Xtreme implemented all its options in the customizer, in order to see the Xtreme Admin pages, you need to have installed the Weaver Xtreme Theme support plugin.

This plugin holds all the page and post pages options, shortcodes, AND the Legacy Admin pages.

[scrambler]

@weaver, wanting to explain where the “Extend BG attribute” option was in the customizer, I cannot find it anywhere (nor can I find the Full width BG color option).

Am I blind, or are these missing from the Customizer ??

[Weaver]

All the extend attributes are in the Customizer : Spacing : Full Width Site menu item – “hidden” there at the bottom of the menu choices.

[scrambler]

🙂 I am getting senile I guess. I kept looking in every area, and never saw the dedicated full width site one 🙂

[MCR]

Could you tell me if these sizes are actually fixed? I just got some results with 1920×810 I haven’t got designer skills! 🙂

[scrambler]

Not sure what you mean by “these sizes”, but no size is fixed in Xtreme, so that the site is responsive and will adapt to any device / screen resolution. You can see this by reducing your browser width and observe what happens.

When you set a theme width, this is actually a maximum width, which mean the site wont be larger than the set width. But when the browser gets smaller, everything will scale and reorganize automatically.

Of course the theme has no control over your content, so it is important that when you create page content, you follow responsive design rules, and in most cases this means not use fixed width styling, but either % or max-width.

If you have more questions, open a separate thread with a link to the site

[Author]

Posts