Weaver Xtreme Tips and Tutorials (part 4)

[scrambler]

This is the fourth Tips and Tutorials for the Weaver Xtreme theme (similar to the Weaver II series 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

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

1) Button style menus

NEWER VERSION on the Guide Site Here

In the menu bar settings do the following:
In Menus Items: CSS + box add

{border-radius:15px;border:3px solid #FFEEBB !important;margin:5px;}

In the Mobile Open Submenu Arrow BG: CSS+ box add

{border-top-right-radius:12px;border-bottom-right-radius:12px;}

In the Submenus Background: CSS+ box add

{border-radius:15px;border:3px solid #FFEEBB !important;margin:5px;}

Only include the border part if you want one
The Margin value determines the space between menus items
The border radius on the Mobile Open Submenu Arrow must be equal to the value on the menu items minus the border thickness.
In the case above 12px = 15px -3px

Note1: If needing to increase the space after the sub menu arrow indicator use the rules below.

.SpecificMenuStyle .menu-hover.menu-arrows .has-submenu > a {padding-right:2em;}
.SpecificMenuStyle .menu-hover.menu-arrows .toggle-submenu::after {right:1em;}

Choices for .SpecificMenuStyle are:
.menu-secondary
.menu-primary
.menu-extra

Note 2: If you want button style in the mini header menu, use a transparent background in the settings, then use

#nav-header-mini a {background-color:grey;padding:5px;border-radius:10px;}

You can see an example below on all the menus using the secondary style.
http://demo.weavertheme.com/menus/

Note 3: If you are using Smart Menus, you will probably want to remove the separation line between menu items on the Vertical mobile menu, or the accordion menu with the rules below

.menu-type-accordion .wvrx-menu.sm li {border-top:none;}
.is-mobile .wvrx-menu.sm li {border-top:none;}

2) Have text clear the post featured image on mobile

NEWER VERSION on the Guide Site Here

3) Fixed top and Fixed bottom insertion areas

EDIT: As of Version 3, The offset is automatically created. The below instructions are no longer relevant

The Plus plugin includes a fixed top and a fixed bottom HTML Insertion area.

These are being unfixed on mobile as you do not want any wasted space on small screen devices.
Note: Once they are unfixed, the Pre Wrapper area will be before the fixed top area, and the Post Footer will be after the Fixed Bottom, as these area are outside the wrapper, but the fixed area are inside the wrapper.

On large screens (desktop) when they are fixed, you will need to add a top and / or bottom margin to the wrapper, matching the height of the corresponding fixed area, so that the top / bottom part of the wrapper is not hidden behind the fixed area.

To do that, add the rule(s) below to the Custom CSS Rule box, using the height that matches the height of the fixed area.

.is-desktop #wrapper {margin-top:50px;}      /* If using a fixed top area 50px high*/
.is-desktop #wrapper {margin-bottom:50px;}    /* If using a fixed bottom area 50px high*/

4) Increase space between Menu items

NEWER VERSION on the Guide Site Here

Note: There is an option to increase desktop menu item on non smart menus, but it only adds space on one side

To increase the space on both sides of menu items, add the rules below in Main options > Fonts & Custom > Custom CSS Rule box

.wvrx-menu > li > a {padding-left:2em;padding-right:2em;}
.menu-hover.menu-arrows .has-submenu > a {padding-right:3em;}
.menu-hover.menu-arrows .toggle-submenu::after {right:2.5em;}

1- changes right left padding to 2em
2- adds 2em to the existing .5em for the menu with sub menu arrow
3- shifts the arrow so space is added right of it

Adjust values as needed

5) Change Mobile menu 3 bars icon to text or an image

EDIT: Xtreme now has an option box for that in Main Options > Menus > Options: All Menus > Mobile Menu “Hamburger” label.
So the information below is now irrelevant!

If you prefer text to the 3 bars icon for the Mobile menu, put the rules below in Main Options > Custom > Custom CSS Rule box

.genericon-wvrx-menu::before {content:”Menu”;font-size:70%;}
.menu-toggle-button {width:2em;}

First rule sets the text and font size
Second rule extend the with so the text does not break in two lines

If you want an image there instead use the rules below instead

.genericon-wvrx-menu::before {content:””;}
.menu-toggle-button {width:20px;height:20px;background: url(ImageURL) center no-repeat;}

Use the width and height value you want (at least the image size)

6) Styling Comments

NEWER VERSION on the Guide Site Here

Find below some example rules to style the comments boxes.
You can include different properties in the various rules. They mostly tell you which selectors affect which part of the comment boxes.

Comment Top Meta info bar: Removing the background color and the line

.commentlist li.comment .comment-meta {border-bottom:none;background-color:transparent;}

Avatar Icon: Moving it in and removing the shadow

.commentlist li.comment .comment-author img.avatar {left:0px;top:0px;margin: 0 10px !important;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}

Reply link: Make it into a button

.comment .reply {width:55px;background-color:grey;border-radius:5px;padding:5px 0 5px 20px;margin-left:10px;margin-bottom:10px;}
.comment .reply a {color:white;}             /* Link Color */
.comment .reply span {display:none;}   /* Remove down arrow */

Comment text: Moving it to the right.

.commentlist .comment-content {padding:0 10px 0 60px !important;}

Main comment box Borders:

.commentlist li.comment {border:2px solid green !important;}

Nested comment box borders

.children li.comment {border:5px solid grey !important;}

Author comment box borders:

.commentlist .bypostauthor.comment {border:5px solid yellow !important;border-radius:5px;

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

[Remus]

I tried 6) Change Mobile menu 3 bars icon to text or an image
But it doesn’t work on SmartMenus that I am now using.

[Author]

Posts