Home Forums Weaver X Tutorials and Hints Weaver Xtreme Tips and Tutorial (part 9)

This topic contains 1 reply, has 1 voice, and was last updated by  scrambler 2 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #19262

    scrambler
    Moderator

    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) Maintaining Hover BG color on Top menu item when hovering its sub menu items

    Newer version on the Guide site here

          .menu-primary .wvrx-menu li:hover > a {background-color:#742836 !important;color:white !important;}

    2) Making the equivalent of show_if / hide_if shortcodes for device classes like Ipad, ios, android, macos and windows

    The device parameter of the show_if shortcode only supports desktop, mobile, smalltablet and phones.
    To reproduce the same effect as show_if or hide_if for other device types supported by Xtreme, use the method below

    Example is for ipad (using the  is-ipad   Xtreme mobile class) but it can be extrapolated to the other Xtreme mobile classes (is-android, is-ios, is-windows, is-macos)

    a-To reproduce a show_if

    Put your content in a div container with a class reflecting your device
        <div class=”my-show-ipad”>Content to show only on ipad</div>

    Then put the rules below in Main options > Fonts & Custom > Custom CSS Rule box
        .my-show-ipad {display:none;}
        .is-ipad .my-show-ipad {display:block;}

    b-To reproduce a hide_if

    Put your content in a div container with a class refelecting your device
        <div class=”my-hide-ipad”>Content to hide only on ipad</div>

    Then put the rules below in Main options > Fonts & Custom > Custom CSS Rule box
        .is-ipad .my-hide-ipad {display:none;}

    3) Styling the tabs shortcode for button style tabs (or others) and various behaviors

    NEWER VERSION on the Guide Site Here


    a- Styling the various components

        /*-Styling the content area (border and space at the top)*/
        .wvr-tabs-style#wvr-tab-group-1 .wvr-tabs-pane {border:2px solid blue;border-radius:10px;margin-top:10px;}

        /*-Styling the tabs for a Button style (border height and space)*/
        .wvr-tabs-style#wvr-tab-group-1 .wvr-tabs-nav span {border:2px solid grey;border-radius:5px;height:36px;margin-right:10px;margin-bottom:5px;}
        /*-Different color for current tab border*/
        .wvr-tabs-style#wvr-tab-group-1 .wvr-tabs-nav span.wvr-tabs-current {border-color:green;}

    Note: If you want to change the tab hover color use the rule below
        /*-Tabs hover color*/
        .wvr-tabs-style#wvr-tab-group-1 .wvr-tabs-nav span:hover {background-color:yellow;}

    b- Starting with all tabs closed
    Changing the display of the tab when clicking is done with javascript, so you would normally need to use javascript to change that behavior and start with all tab closed.

    What you could do without resorting to javascript, is make the first tab empty and style the first button and tab to be hidden, so It will start with noting opened.

    First method hides both first tab and content, so you wont be able close it back once one is opened.

        /*-Hide first tab to start closed*/
        .wvr-tabs-style#wvr-tab-group-1 .wvr-tabs-nav span:nth-of-type(1), .wvr-tabs-style#wvr-tab-group-1 .wvr-tabs-pane:nth-of-type(1) {display:none !important;}

    Second method, to have a way to close it back, you can name the first tab “Close”, and use the rule below instead of the one above to only hide the content of the first tab, but keep the (Close) button.

        /*-Hide first tab content, keep a Close button*/
        .wvr-tabs-style#wvr-tab-group-1 .wvr-tabs-pane:nth-of-type(1) {display:none !important;}

    c- Adding an Icon to the tabs
    You can insert an Icon in the tab title Shortcode by just adding the HTML in it like below
        [tab title='<img src="ImageUrl" style="margin-right:10px;"/>tab two']Content for the second tab.[/tab]


    4) Changing Split Sidebar width on a per page basis

    NEWER VERSION on Guide Site Here

    Xtreme has Per page sidebar Width option, but only for single sidebar.
    If you want to change the Split sidebar width on a single page, you need to use the rules below

    For regular Split Sidebars not using smart margins use

    @media screen and (min-width:768px) {
    .page-id-xxx .l-sb-right-split{width:20%}
    .page-id-xxx .l-content-ssb{width:66%;margin-left:14%;}
    .page-id-xxx .l-sb-left-split{margin-left:-80%;width:14%}
    }

    The way to calculate the values is as follow
    In the first and third rule you set the width of the right and left sidebar (here 20% and 14%)
    In the second rule, the width (of the content) needs to be 100% minus Width of sidebars, here 100-20-14 = 66%
    The margin left is the left sidebar width
    In the third rule, the margin left must be negative of the content width plus content margin-left here 66+14=80

    For regular Split sidebar but using Smart margins, use

    @media screen and (min-width:768px) {
    .page-id-xxx .l-sb-right-split-lm {width:20%}
    .page-id-xxx .l-content-ssb{width:63%;margin-left:16%;}
    .page-id-xxx .l-sb-left-split-rm {margin-left:-79%;width:15%}
    }

    The way to calculate the values is as follow
    In the first and third rule you set the width of the right and left sidebar (here 20% and 15%)
    In the second rule, the width (of the content) needs to be 100% minus Width of sidebars and twice smart margin, here 100-20-15-1-1 = 63%
    The margin left is the left sidebar width plus smart margin, here 15+1=16
    In the third rule, the margin left must be negative of the content width plus content margin-left here 63+16=79

    For Split Sidebar stacked on top without smart margin use

    @media screen and (min-width:768px) {
    .page-id-xxx .l-sb-right-split{width:25%}
    .page-id-xxx .l-content-ssbs {width:60%;}
    .page-id-xxx .l-sb-left-split-top {width:15%}
    }

    Just make sure the sum of the width is 100%

    For Split stacked using smart margins, use the rule below

    @media screen and (min-width:768px) {
    .page-id-xxx .l-sb-right-split-lm {width:24%}
    .page-id-xxx .l-content-ssbs {width:60%;}
    .page-id-xxx .l-sb-left-split-top-rm {width:14%}
    }

    Make sure the total of the width is 100% minus twice the smart margin (1% by default), here 100-24-14-1-1=60

    As usual if I missed something or screwed up, speak up 

    #29430

    scrambler
    Moderator

    Added Per page Split Sidebar sizes

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.