Skin Adjustments

Sometimes you want to widen the left column of a MediaWiki to use it for a tree or similar. This article shows you how to do this in Vector and Monobook, using 248px as a width, though you will use your own custom width. This can all be done with CSS in both Vector and Monobook.

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.

Increase Vector Sidebar from 10em to 248px

Either add this to the bottom of main-ltr.css (or screen.css on 1.18+) or make a new skin with these values.

This is intended to replace the left sidebar content, so left portlets are disabled.

<css> div#content { margin-left: 248px; } div#footer { margin-left: 248px } div#p-logo: { width: 248px } div#mw-head-base { margin-left: 248px } div#left-navigation { left: 248px } /* Disable left portlets */ div#mw-panel { display: none } </css>

In Vector you can resize the left panel portlets, just substitute the last rule above with:

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

Increase Monobook Sidebar from 12.2em to 248px

Either add this to the bottom of main.css or make a new skin with these values.

This is intended to replace the left sidebar content, so left portlets are disabled.

<css> div#content { margin-left: 248px } div#p-cactions { left: 230px } div#p-logo { width: 230px } /* Disable left portlets */ div#p-navigation, div#p-tb, div#p-search { display: none } </css>

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

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

You will need to remove it from the disabled elements above, and re-style the internal elements to compensate for the increased width.

Logo

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