Skin Adjustments

Sometimes you want to widen the left column of a MediaWiki to use it for a tree-menu or similar. This article shows you how to do this in a way that works for both the Vector and Monobook skins. The example here sets the width to 248 pixels, but you can easily adjust it to your own width value.

This is done with CSS which needs to be added after the skin's native CSS loads, note that it should not be appended to existing files in the skin because you are then unable to upgrade your wiki without having to redo the changes to the files again. Instead you can put any CSS in the MediaWiki:Common.css article, or for a more efficient method put it in a file in your wiki's skins directory (in this example I've called it "wide-sidebar.css", and include it from LocalSettings.php as follows,

{{{1}}}

These examples use pixel (px) widths which have the effect of locking down font sizes. You may wish to use to an em size instead, e.g. to something like 15em, if so just use proportions of this new em width.

<css> div#content, body.skin-vector div#footer, body.skin-vector div#mw-head-base { margin-left: 248px; } body.skin-vector div#p-logo { width: 248px; } body.skin-vector div#left-navigation { left: 248px; } body.skin-monobook div#p-cactions { left: 230px; } body.skin-monobook div#p-logo { width: 230px; } </css>

In Monobook, adjusting the size of the existing portlets to fit the new sidebar size may be difficult, but in Vector you can resize them easily with the following CSS rule,

<css> div#mw-panel { width: 248px } </css>

Note that the search portlet (for instance) may be placed in the sidebar using absolute positioning e.g.:

<css> p-search { position: absolute; top: 160px; width: 230px; } </css>

You can choose not to widen the logo width, but if you do and want to keep your original logo picture, you can centre it using the background selector.