Weaver Xtreme Tips and Tutorial (part 8)

[scrambler]

INDEX for all the threads is here: http://forum-archive.weavertheme.com/discussion/10344/index-for-the-weaver-xtreme-tips-and-tutorials-threads

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

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.

Unless indicated otherwise, custom CSS Rules go in Main Options > Fonts & Custom > Custom CSS rule box

IMPORTANT: 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.

1) Creating a splash page with just a piece of content centered both horizontally and vertically

Centering horizontally is easy, but the vertical part can be tricky.
On your page editing page, check hide the entire footer and hide the entire header options.
Then use the CSS below in Main Options > Fonts & Custom > Custom CSS Rule box to center the wrapper in both directions

.page-id-xxx #wrapper {position:absolute;top:50%;left:50%;-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

If you have “plus”, you can simply put that rule without the .page-id-xxx selector in the per page style box

Note: If you need some header on that page and just want the page content to be centered in both direction, you will need “Plus” as you will need the page option that can force the page to be full browser height.

In your page editing page check the full browser height option.
Once that is done, you can add the CSS below in the Per page Style box to vertically center juts the content area

#content {position:absolute;top:50%;left:50%;-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

2) Expanded search bar

NEWER VERSION on the Guide site Here

The default search bar only shows the search icon, and you need to click on the icon to open the search field.
If you need the search field to always be opened, add the rule below in Main Options > Fonts & Custom > Custom CSS Rule box

#header-search .search-field,.header-search .search-field,.menu-search .search-field {background-color:#f0f0f0;border:2px solid #c3c0ab;cursor:text;outline:0;width:230px;}

Note: If you are changing any of the values in that rule, you will need to also add the following one with the same modified values
#header-search .search-field:focus,.header-search .search-field:focus,.menu-search .search-field:focus {background-color:#f0f0f0;border:2px solid #c3c0ab;cursor:text;outline:0;width:230px;}

3) Logo Image and menu side by side

EDIT: as of V3 of Xtreme, You can define a Site Logo, and add that logo to the left of the menu bar, as well as set its height. Read the New Weaver guide tutorial here:
http://guide.weavertheme.com/menu-mar-advanced-customizations/#xlogo

Another way to do this is with the “Plus” Plugin.
You simply use the header widget area with two widgets, put the logo in the left one, and the menu in the second using an extra menu shortcode.
You can define how they share the site width on each device size, using the custom widget width option.
To learn more about using the custom widget width options, read the tutorial below:

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

4) Fixed width left sidebar with vertical menu, that switches to a sidebar on top with a slide open mobile menu under a specific browser width (requires the Weaver “Plus” plugin)

This tutorial allows to change two of the Xtreme theme behavior. It makes the primary sidebar widget area a fixed width instead of the % width of the theme, and it make the threshold for switching layout variable instead of the fixed 767px.

a- Set your sidebar layout to sidebar on left (stack top)

b- Place a text widget in the Sidebar primary widget area, and add the two shortcodes below in it. The first one will be used for the vertical menu when the sidebar is on the left, the second one will be used to create a slide open mobile menu when the sidebar is above the content. The menu will use the Extra menu style option.

[extra_menu menu_name='yourmenuname'  menu_style='extra' menu_type='accordion' class='mydesktop-menu']
[extra_menu menu_name='yourmenuname'  menu_style='extra' menu_type='standard' class='mymobile-menu']

c- Add the rules below in Main Options > Fonts and Custom > Custom CSS Rule box

#container {overflow:visible;position:relative;}

@media all and (min-width:1012px){                                   /*Rules for when sidebar is on the left*/
#primary-widget-area {width:300px;position:absolute;}   /*width and position of the sidebar*/
#content {padding-left:300px;width:100%;}                       /*Space for the sidebar, must match the above*/
.mymobile-menu {display:none;}                  /*Hide the mobile extra menu shortcode*/
}

@media all and (max-width:1011px){                                 /*Rules for when Sidebar is on top*/
#primary-widget-area {width:100%;position:relative;}     /*Reset width and position of sidebar*/
#content {padding-left:0px;width:100%;}                         /*Reset Content padding*/
.mymobile-menu {display:bock;}                 /*Show mobile extra menu shortcode*/
.mydesktop-menu {display:none;}              /*Hide desktop extra menu shortcode*/

/*Below are Rules to center the mobile menu in the sidebar*/
.menu-extra .wvrx-menu, .menu-extra .wvrx-menu-container {text-align:center;}
.wvrx-menu-button {float:none !important;}
}

d- In Main Options > Menus, check the “Use Smart Menus” option, and put the min-width value from the above rules in the “Menu Mobile/Desktop Switch Point:” box (1012  in the example above). This will make the standard extra menu shortcode switch to the slide open menu earlier than the default 767px theme mobile threshold.

Notes:
• Threshold can be changed, but the max-width value must equal the min-width one minus one pixel.
• If you had set your sidebar widget are to use the “Add side margins” option, you will need to replace    .l-sb-left   by   .l-sb-left-rm   in the above rules
• If you don’t use the primary and secondary menu bar in the rest of the layout, hide them by selecting “Hide on all devices” in their respective “Hide Area” option.

5) Additional social icon or icon replacement

NEWER VERSION in the Guide Site Here

The method allows you to replace the genericon used for one of the Social Icons by your own image icon.
This can be useful either if you need a different icon, but also allows you to use any of the existing social icon to show a different one if not supported in the list of available icons

.genericon-iconname::before {content:””;display:block;width:32px;height:32px;background:url(ImageUrl) center no-repeat;}

You will need to inspect your page to see what is the iconname that you want to replace.

6) Make the search shortcode slide open

NEWER VERSION on the Guide site Here

The search in the header is a modern slide open one. If you click on the icon, the search box slides open. But the search shortcode will open a traditional always open search box.
The rules below will make the search shortcode behave like the header one, display just the icon and slide open on click.

.search-field {
background-color:transparent;
background-position:2px center;
background-size:24px 24px;
border:0;
cursor:pointer;
height:24px;
margin:3px 0;
padding:0 0 0 32px;
position:relative;
width:0;
z-index:21;
}
.search-field:focus {
background-color:#f0f0f0;
border:2px solid #c3c0ab;
cursor:text;
outline:0;
width:230px;
}

[scrambler]

Added two more tips.

Social Icon replacement, and slide open styling for the search shortcode

[Remus]

At 2) Expanded search bar, I suppose the rule should have a ‘;‘ in the end.
width:230px;}
Nevertheless, it works without it.

[scrambler]

My undesrstanding is that the ; at the end of the last rule inside brackets is not necessary, but I do usually include it, so I corrected it 🙂

[Author]

Posts