Home Forums Tutorials and Hints from Users Creating alternative Sidebar Widths for Xtreme

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #17642
    Weaver
    Keymaster

    It is possible to define custom CSS to change the widths of the Left or Right sidebar depending on screen width for Weaver Xtreme.

    Changing a sidebar width is actually somewhat complex, involving changing percentages for the main content, the sidebar, and for horizontal margins.

    The following examples demonstrate how to change the width of the Right sidebar (1st example), or the Left Sidebar (2nd example) for extra wide screens (over 1100px) to 41%. Using 41% makes it easy to see where 41 is used in the rule, as well as the derived 40, 58, 59, and 1 to leave 1% margins between areas.

    You can adjust the @media rule and the 40,41,58,59, and 1 as needed to achieve a look you want. The !importants are required due to CSS priorities (the theme generates .is-desktop and not @media for custom sidebar widths which is a more specific rule and thus “wins”.)

    RIGHT SIDEBAR – 41% for views > 1100px:

    @media(min-width:1100px) { /* example for 41% right sidebar */
    .l-content-rsb{width:59.00000% !important;}
    .l-content-rsb-m{width:58.00000% !important;margin-right:1.00000% !important;}
    .l-sb-right{width:41.00000% !important;}
    .l-sb-right-lm{width:40.00000% !important;margin-left:1.00000% !important;}
    .l-sb-right-rm {width:40.00000% !important;margin-right:1.00000% !important;}
    }

    I’ve changed the LEFT example to 44% for between 768px and 900px just for a different example.
    Note that this technique  doesn’t work for devices under 768px since they are treated as small tablets, and the sidebars are stacked and not side by side. Sidebar stacking is handled by JavaScript, and thus not really subject to CSS rules.

    @media (min-width:768px) and (max-width:900px) { /* example for 44% left sidebar */
    .l-content-lsb{width:56.00000% !important;}
    .l-content-lsb-m{width:55.00000% !important;margin-left:1.00000% !important;}
    .l-sb-left{width:44.00000% !important;}
    .l-sb-left-lm{width:43.00000% !important;margin-left:1.00000% !important;}
    .l-sb-left-rm {width:43.00000% !important;margin-right:1.00000% !important;}
    }

Viewing 1 post (of 1 total)
  • You must be logged in to reply to this topic.