Weaver Xtreme Tips and Tutorials (part 2)

[scrambler]

This is the second 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 )

INDEX for all the threads is 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) Menu bar Height.

NOTE: There is a new options called “Desktop Menu Bar Padding:” that will increase the height of the menu bar.
It will not however apply to the menu item hover which will remain the same (smaller) size.
The tip below will increase the menu bar height as well as the Menu item hover

There is a menu bar padding option box in the Main Options > Menus that allows you to increase the height of the menu bar. It will increase both the height of the menu bar and of the sub menus.
If you want to keep the Sub menu a different height, add the rule below in Main options > Custom > Custom CSS Rule box, to change the Sub menu height using the padding value to your liking (original default is 0.75em)

#nav-primary .wvrx-menu ul li a {padding-top:0.75em;padding-bottom:0.75em;}   /* For the primary menu bar*/
#nav-secondary .wvrx-menu ul li a { padding-top:0.75em;padding-bottom:0.75em;}   /*For the secondary menu bar*/

2) Move Header HTML content area over header image.

EDIT: Next Version will have an option in the Title/Tagline section to move this area above the header.
The Title Tagline will also have its own “Site Logo/HTML Area” where you can add an image to the Title area.
You will be able to selectively hide Title / Tagline > Logo area, so you can use that to move some logo image over the header.

EDIT-2: As of V3, You can also set the header Image to be used as a Background of the header area, so all the content gets placed Above it

Weaver II Pro has an option to move that area over the header. To do the same in Weaver Xtreme, do the following.
Set the width of the area with the width box
Add the rule below in main Options > Header > Header HTML BG CSS+ box: to move it over.
{position:absolute;}

To set the position, just add position properties in your rule.
For horizontal positioning:
Use right:xxx;  if the area position is respective to the right side
Use left:xxx;  if the area position is respective to the left side
For vertical positioning:
Use top:xxx;  if the area position is respective to the top side
Use bottom:xxx;  if the area position is respective to the bottom side

Use pixel values for fixed amounts, and percentage for responsive ones. For example, if you wish the area to stay 10% from the left, and be 10px above the bottom use
{position: absolute;bottom: 10px;left: 10%;}
Note: the width set in the option box changes as the browser shrink, to override that add it to your rule
{position: absolute;bottom: 10px;left: 10%;width: 50%;}

3) Style Mobile menu horizontal divider lines differently for each menu.

NEWER VERSION on the Guide Site Here

The Horizontal line dividers for the slide open mobile menu is done by the rule below

.menu-arrows.is-mobile-menu ul li:first-child a, .menu-arrows.is-mobile-menu a {border-top:1px solid rgba(255, 255, 255, 0.2);}

If you need to change it for a specific menu, add the menu ID selector in front of each selector.
Example below for primary menu bar
#nav-primary .menu-arrows.is-mobile-menu ul li:first-child a, #nav-primary .menu-arrows.is-mobile-menu a {border-top:1px solid rgba(255, 255, 255, 0.2);}

ID class for other menus are
#nav-secondary
#nav-primary

For Plus Extra Menus, see below.
n is the menu number that you will have to figure out inspecting your page with your browser developer tools.
The value of 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

4) Default margin / padding on the edge of menu bars

NEWER VERSION on the Guide Site Here

By default weaver Xtreme add some left margin and some right padding on the menu bars, so that on left aligned menu, the first menu Item is not against the edge, nor is the last one on right aligned menus.

If you need your menu items to be flushed (left or right, you can remove these with the rule below

ul.wvrx-menu {margin-left:0px;}
.is-desktop .menu-alignright {padding-right:0px;}

5) Additional styling for Simple Vertical menu (“plus” plugin shortcode and widget)

If you want a fully styled Vertical menu with slide open submenus, use the accordion style.

If you want a Styled Vertical menu with fixed submenus, the “Simple Vertical menu” option is the solution. That menu type is meant to be used with the header_mini style, but will also pick up minimal styling from the other menu_style option (primary, secondary, extra..)

That minimum styling does not however include the Hover nor the Current Page background colors.

You can manually add these style with the rules below

.wvrx-vertical-menu  li > a:hover {background-color:#887755 !important;}   /*hover back color*/

.wvrx-vertical-menu .current_page_item > a, .wvrx-vertical-menu .current-menu-item > a, .wvrx-vertical-menu .current-cat > a, .wvrx-vertical-menu .current_page_ancestor > a, .wvrx-vertical-menu .current-category-ancestor > a, .wvrx-vertical-menu .current-menu-ancestor > a, .wvrx-vertical-menu .current-menu-parent > a, .wvrx-vertical-menu .current-category-parent > a {background-color:brown !important;} /*current page back color*/

/*For the separators*/
.wvrx-vertical-menu li a {border-top:2px solid #000000 !important;}
.extra-menu-xplus.menu-vertical {border-bottom:3px solid #000000 !important;border-top:1px solid #000000 !important;}

6) Flow Color, Equal Height Widget Rows and dynamic content

NEWER VERSION On the Guide Site Here

Weaver Xtreme includes two height equalization features.
Sidebars & Layout > “Flow Color” and “Equal Height Widget Rows”

The first one makes the sidebars and content containers the same height by extending whichever container(s) is (are) shorter with a calculated min width style value.
The second does the same with widgets on the same row of a widget area.

This equalization takes place when the page is loaded, or refreshed, and whenever the wrapper is resized. So it is maintained dynamically when changing the browser size, or on mobile devices when switching between portrait and landscape.

If you are using an extra menu that can expands and contract like the standard type in mobile slide open mode, or the accordion type vertical menu when opening and closing submenus, the equalization is also performed when these change size as they can not only expand, but also contract content.

If you happen to add your own dynamic content in a widget area or #content area, and if you are using “Flow color” or “Equal Height Widget Rows”, when that dynamic content expands, it will cause an expansion of the wrapper that will cause the equalization to be updated, but when your dynamic content contracts, the reduction in size will not trigger any wrapper size change. So unless you refresh the page, the empty space created by the contraction will not be reclaimed.

If you need to make sure that empty space is indeed reclaimed as soon as the dynamic content contracts, you can ask the theme to monitor your dynamic content and refresh “Flow color” or “Equal Height Widget Rows” when it happens.

To do that, you will need the container of your dynamic content to have and ID and you will need to give it the class dynamic-content
<div id=”mydivid” class=”dynamic-content”….>The dynamic content</div>
 
Important: If you are not using “Flow Color” or “Equal Height Widget Rows” in the area where your content is located, there is no need for this.
So make sure to test your page beforehand, and only implement if absolutely required.

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

[scrambler]

Added 3 more items

[aengberg]

Hi Scrambler,

In Weaver II there was a workaround to get the menu displayed over the header image as shown here: http://forum.weavertheme.com/discussion/2427/position-horizontal-menu-bar-over-header-image. 

I’ve been trying to find an elegant way of doing the same thing in Weaver Xtreme and the best I’ve done is a modification of the above, so:

#wrapper, #branding { position: relative; }

#nav-primary { position: relative; top: -7em; z-index:2; }

I don’t know if this would be the recommended way or not but it seams to work. If it isn’t too hacky, other users may find it useful.

[scrambler]

@aengberg If you have “Plus” you can use an extra menu shortcode in one of the many insertion areas like the site title tagline site logo HTML, the header widget area, or the header HTML.

  

[Author]

Posts