Weaver Xtreme Tips and Tutorials (part 1)

[scrambler]

This is the first Tips and Tutorials for the Weaver Xtreme theme (similar to the Weaver II series below http://forum-archive.weavertheme.com/discussion/8575/index-for-the-infos-and-examples-for-custom-css-rules-threads#Item_1 )

INDEX for all the threads will be here: http://forum-archive.weavertheme.com/discussion/10344/index-for-the-weaver-xtreme-tips-and-tutorial-threads#Item_1

If you are new to CSS Customization, read the introduction of http://forum-archive.weavertheme.com/discussion/590/infos-and-examples-for-custom-css-rules#Item_1

Weaver Xtreme is a brand new theme, so these first issues will include emphasis on some of its new features.
If you have not done so yet, PLEASE READ THE HELP in Weaver Xtreme > Help > Weaver Xtreme Theme Documentation!!
There is a lot of information there that will help you understand what the theme has to offer.

If not indicated otherwise, custom CSS Rules go in main options > Fonts & Custom > Custom CSS rule box

1) Responsive and Adaptive Layouts for multiple widgets inside Widget Areas.

NEWER VERSION on the Guide Site Here

Weaver Xtreme comes standard with the ability to define any number of responsive columns in the various Widget Areas (header, footer, sidebars…), the number of columns will be automatically reduced on Small Tablets and Phones to prevent the columns from becoming too narrow.
Just set a number of columns, drop several widgets in the Area, and then progressively reduce your browser size to see how the layout changes when you cross the small tablet threshold (768px) and the phone threshold (580px).

The Plus Plugin adds the “Custom Widget Widths” option.
Using that, you can specify any number of rows and widths for the widgets, as well as specify different set of values for Desktop, Small Tablets and Phones.
This gives you full control on the layout of all your widgets and its adaptability to small devices.

For example, let us say that you have placed 6 widgets in Appearance > Widgets > Footer Widget Area.
Then you put the following values in the Main Options > Footer > Footer Widget Area section > Custom Widget Widths boxes
Desktop:          100;30,70;20,50,30;
Small tablets: 100;30,70;70,30;100;
Phones:           100;100;100;100;100;100;

The values in the Desktop box will organize your widget in 3 rows:
widget 1 full width on the top row (100;)
widget 2&3 on the second row with respective widths of 70% and 30% (70,30;)
Widget 4,5&6 on the third row with respective widths of 20%, 50%, 30% (20,50,30;)

The Smart margin is the horizontal space between widgets. (Default 1% change in Main Options > Custom)
That margin is taken of the width of the widget on the left, so 50,50; will create  49% + 1% space + 50%. 

Always put a semi colon (;) at the end of a row, and keep the total width for each row at or under 100%.
The Small Tablet and Phone boxes values define how the layout changes for each of these screen sizes.
This allows you to control how the widgets spread on smaller screen so they do not become too narrow.

Note-1: In the Header Widget Area, and combined with the Extra Menu Shortcode, this will allow you to create any responsive header layout for logo, slider, menu etc… You can organize imagery and menus in any way you like, and have their layout adapt to any screen size. This makes for limitless design possibilities of the header area.

Note-2: Weaver II users may think that they have less Sidebar Widget Areas in Weaver Xtreme. But using the Custom Widget Widths feature they now have an infinite number of possible layouts.

2) Equal heights widget Rows.

NEWER VERSION on the Guide Site Here

“Plus” also Adds an “Equal height widget Row” Option that will make sure all the widgets in a given row will have the same height for a clean look (works both on default columns or custom widget widths).

a- Using the widget equalization feature on your own elements
If you create your own set of widgets or columns in your content you have a way to invoke the equalization function on your own elements.
(If you need help creating a group of responsive columns or widgets, below is a generator that will do it for you)
http://forum-archive.weavertheme.com/discussion/9939/responsive-and-adaptive-columns-and-widgets-layouts-generators#Item_1  )

There are only two prerequisite conditions.
All the columns or widgets divs must be inside a div container with an ID name (ie: mycont)
All the columns or widgets divs must have a common class called widget

To invoke the equalization for such a set of divs in your page, you would simply add the class   widget-eq  to the container div classes like in the example below.
<div id=”mycont” class=”widget-eq”>
<div class=”widget mywidget mywidget-1”>content of widget 1</div>
<div class=”widget mywidget mywidget-2”>content of widget 2</div>
<div class=”widget mywidget mywidget-3”>content of widget 3</div>
</div>

You can see it in action on responsive columns and widgets in the pages below. Columns and widget are generated with the code generator mentioned above.
They are inserted twice side by side on the page.
Then the left one is equalized with the procedure described above.
Reduce your browser width and observe both areas behaviors.

http://demo.weavertheme.com/columns/
http://demo.weavertheme.com/widgets/

b- Margin on last widget row
If you need vertical separation between widgets, you need to set a bottom margin for your widgets.
By default that options Leaves the Widget Bottom margin on the last widget row.

If you wish to eliminate the bottom margin on the last widget row, simply put the class   nobm   in the “Add Classes” option box.

3) Add Content to the right of the Info Bar

• Place your content in Advanced Options > HTML Insertion area > Container top
• Add the rule below in its Container Top BG: CSS+ box
  {position:absolute;right:20px;top:0px;}
• Use the right and top value to adjust the position

4) Change alignment of the Mobile Menu Bar Icon (3 bars)

NEWER VERSION on the Guide Site Here

By default, the Mobile menu icon (3 bars) is always on the left of the Menu bar, regardless of the alignment you chose for the menu bar.

If you want to change that and make the icon respect the alignment chosen for the menu bar add one of the rules below in Main Options > Fonts & Custom > Custom CSS Rule box

To align it right
.menu-toggle-button {float:right;} /*-aligns it right*/

To center it
.wvrx-menu-container {text-align:center;}  /*-Centers it*/
.menu-toggle-button {float:none;} /*-centers it*/

Note1: If you have several menu bars in your page you should add the menu ID or class selector (see items 1 & 2 above) at the beginning of the rule like below for the primary menu bar
#nav-primary .menu-toggle-button {float:right;} /*aligns it right*/

Note2: If you want to center the Sub menus Add
.is-mobile-menu.menu-arrows {text-align: center;}

5) Limiting the width of the mobile slide open menu and moving it to the right

NEWER VERSION on the Guide Site Here

The slide open mobile menu is always full width and left aligned. If you want it to be right aligned with a limited width, you can use the rules below in the Main Custom CSS Rule Box

/* removes full width BG */
.is-mobile .menu-primary .wvrx-menu-container {background-color:transparent;}
/*apply limited BG */
.menu-primary .menu-toggle-button {width:100%;background-color:grey;padding-bottom:.5em;}
/* align hamburger right with right space */
.menu-primary .genericon-wvrx-menu::before {float:right;margin-right:15px;}
/* removes space above first sub menu */
.is-mobile.is-menu-default .wvrx-menu-container ul li:first-child.menu-item, .is-mobile.is-menu-default .wvrx-menu-container ul.weaverx-theme-menu li:first-child, .is-menu-mobile .wvrx-menu-container ul li:first-child.menu-item, .is-menu-mobile .wvrx-menu-container ul.weaverx-theme-menu li:first-child {margin-top:0px;}
/* Align sub menu right and set width */
.menu-primary .menu-arrows.is-mobile-menu {text-align:right;width:200px;float:right;background-color:grey;}
/* adjust sub menu arrows */
.is-mobile .menu-primary .wvrx-menu li.has-submenu a {padding-right:2.5em;}
.is-mobile .menu-primary .menu-arrows .toggle-submenu::after {margin-right:0.4em;}
.is-mobile .menu-primary .menu-arrows .toggle-submenu {width:2em;}

– Replace grey by the wanted background color

– To let the width be the widest item, remove width:200px; for a fixed width use the value you want

– If you are using content in one of the ADD right/left HTML and you want it on the menu bar, some additional CSS will be required.

– Replace  .menu-primary by the appropriate selector if the menu is not using the primary style

.menu-secondary, .menu-extra  for other styles, or use the ID of the menu to target an individual menu

For Primary and Secondary menu bars the ID is:

#nav-primary
#nav-secondary

For extra menus, you will need to inspect you page to find the Specific Menu Id of the menu you need to affect.
In the names below, n is subject to change depending on how many extra menus you use on the page, including sidebars and [show/hide_if] shortcode usage.

#primary-xn
#secondary-xn
#extra-xn
#header_mini-xn
#none-xn

As usual, If I missed something or messed up, please speak up

[scrambler]

Removed Full width designs to give it its own thread

Added two more items instead

3) Add Content to the right of the Info Bar

4) Limiting the width of the mobile slide open menu and moving it to the right

[latortuga]

In #5 above, this line: .menu-primary .genericon-wvrx-menu::before {float:left;}

Should be: .menu-primary .genericon-wvrx-menu::before {float:right;}

as the example is showing aligning the mobile menu to the right.

Thank you for the instructions!

[scrambler]

Thanks for catching the typo. Fixed

[Author]

Posts