How to change the width of the LeftMenu, and other style changes.#

When building from the source, you can change the width of the sidebar simply by changing the @wiki-sidebar-width LESS variable. (see src/main/styles/haddock/default/variables.less)

As a user or administrator, you can also overwrite the default styles of the sidebar by using Add CSS Style. When adding it to your LeftMenu page, the sidebar style will change for all visitors of your site.

EXAMPLE #

%%add-css
    /* sidebar width */
    .content.active .page { 
        width: 70%;  /* 100% - @wiki-sidebar-width */ 
    }
    .content .sidebar, .content:after { 
        width: 30%;  /* @wiki-sidebar-width*/
    }
    /* sidebar background */
    .content:after { 
        background: repeating-linear-gradient(....);
        background-blend-mode: multiply;
    }
/%

CSS sidebar design#

The top .content block acts as a container for the main page content and the collapsible sidebar.

The .active class is present when the sidebar is visible. It can be toggled with the ☰ menu toggle button on the navigation bar.

The .sidebar block is set to float:left so it appears to the left of the main page content. It is pushed in/out of the viewport when toggling the .active class on the parent .content block.

The .content:after block is a css pseudo element. It is used to style the background of the sidebar. It should always have the same width of the sidebar.

Note: this css implementation was chosen to be compatible with older browsers. In future, grid styles would be preferred to redesign the template layout of JSPWiki.

Note: Why is the width of the Sidebar set to 21.654752221994123% and not anything else, rounder, like f.ex 20%?
Well it is so the Sidebar and the page content maintain a golden ratio based proportion; even more, phi is declared as a less variable on source! This way the page layout is more visually appealing. On the former source link there is also a link to an article with a formal explanation on the reasoning of this kind of layouts.