How to change the width of the LeftMenu

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

What's the best way to change the LeftMenu width?

I can tell that it's actually the .sidebar class's width that needs to be changed. It's currently set to 21.654752221994123% and I'd like it more like 15%. The "page" class width is 78.34524777800587%. Obviously, there's some computation that's going on, and I'm betting it's with Bootstrap, but I'm not very familiar with Bootstrap. Gary Kephart, dd. 18/apr/2021 

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.


Note: this example is included on this page, so you should see a different sidebar!
Following css will change the sidebar width and the sidebar background.
    /* sidebar width */ .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;
/% .page { width: 70%; } .content .sidebar, .content:after { width: 30%; } .content:after { background: repeating-linear-gradient(45deg, transparent, transparent 1em, moccasin 0, moccasin 2em, transparent 0, transparent 3em, powderblue 0, powderblue 4em, transparent 0, transparent 5em, lavender 0, lavender 6em, transparent 0, transparent 7em, beige 0, beige 8em), repeating-linear-gradient( -45deg, transparent, transparent 1em, khaki 0, khaki 2em, transparent 0, transparent 3em, beige 0, beige 4em, transparent 0, transparent 5em, peachpuff 0, peachpuff 6em), whitesmoke; background-blend-mode: multiply; }

CSS sidebar design#

  • div.sidebar
  • :after

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.

See Haddock Stylesheet Design