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,

$wgExtensionFunctions[] = 'wfAddCss';
function wfAddCss() {
    global $wgOut;
    $wgOut->addStyle( 'wide-sidebar.css', 'screen' );
}

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.

div#content,
body.skin-vector div#footer,
body.skin-vector div#mw-head-base {
    margin-left: 248px;
}
body.skin-vector div#mw-panel,
body.skin-vector div#p-logo {
    width: 248px;
}
body.skin-vector div#left-navigation {
    left: 248px;
}
body.skin-monobook div#column-content {
	margin-left: -248px;
}
body.skin-monobook #column-one .portlet,
body.skin-monobook div#p-logo {
    width: 230px;
}
body.skin-monobook #column-one #p-personal {
	width: 100%;
}
body.skin-monobook div#p-cactions {
    left: 230px;
}