Difference between revisions of "Skin Adjustments"
m |
(simply - use rules that widen the existing portlets too) |
||
| Line 13: | Line 13: | ||
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. | 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. | ||
| − | {{code|<css> | + | {{code|<css>div#content, |
| − | div#content, | ||
body.skin-vector div#footer, | body.skin-vector div#footer, | ||
body.skin-vector div#mw-head-base { | body.skin-vector div#mw-head-base { | ||
margin-left: 248px; | margin-left: 248px; | ||
} | } | ||
| + | body.skin-vector div#mw-panel, | ||
body.skin-vector div#p-logo { | body.skin-vector div#p-logo { | ||
width: 248px; | width: 248px; | ||
| Line 25: | Line 25: | ||
left: 248px; | left: 248px; | ||
} | } | ||
| − | body.skin-monobook div# | + | body.skin-monobook div#column-content { |
| − | + | margin-left: -248px; | |
} | } | ||
| + | body.skin-monobook #column-one .portlet, | ||
body.skin-monobook div#p-logo { | body.skin-monobook div#p-logo { | ||
width: 230px; | width: 230px; | ||
} | } | ||
| − | + | body.skin-monobook #column-one #p-personal { | |
| − | + | width: 100%; | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | #p- | ||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | </css>}} | + | body.skin-monobook div#p-cactions { |
| − | + | left: 230px; | |
| + | }</css>}} | ||
| − | |||
[[Category:MediaWiki]] | [[Category:MediaWiki]] | ||
Revision as of 13:33, 7 March 2012
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,
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.
