This question about Developing extensions (plugins skins etc.): Asked

How to change sidebar width

I would like to increase the width of the WebLeftBar or (ideally) give it a flexible width based on it's contents.

Is there an easy way to do this?

I think I should be able to accomplish this by changing the PatternSkin CSS files but I can't find a "width" property for the sidebar.

-- BenMacLeod - 02 Oct 2012

I have the same problem, can anyone please help??

-- JeyBu - 05 Sep 2013

Just to answer this:

there are some sidebar related examples at System.PatternSkinCssCookbook :

i have made a example for a custom sidbare width: Sandbox.StefanKrüger.PatternSkinCssCookbookSidebarCustomWidth

the needed CSS is this:
#patternOuter {
   margin-left: 8em;

#patternSideBar {
   width: 8em;
   margin-left: -8em;

/* optional remove padding */
#patternSideBarContents {
   padding-right: 0;
   padding-left: 0;

as you see this is really a hardcoded width. i don't have tryed to make it fit its content.

-- StefanKrüger - 20 Oct 2016

Thanks StefanKrüger. That's a nice addition to the Documentation.

-- GeorgeClark - 20 Oct 2016

-- GeorgeClark - 20 Oct 2016

@GeorgeClark feel free to move it to the official documentation smile iam willing to document what i needed to do for my own needs so it can support others smile

-- StefanKrüger - 20 Oct 2016

QuestionForm edit

Subject Developing extensions (plugins skins etc.)
Extension PatternSkin
Version Foswiki 1.1.5
Status Asked
Related Topics
Topic revision: r5 - 20 Oct 2016, StefanKrüger - This page was cached on 03 Jun 2020 - 18:22.

The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. See Copyright Statement. Creative Commons License    Legal Imprint    Privacy Policy