Difference between revisions of "Skin Adjustments"
m (→Increase Vector Sidebar from 10em to 248px) |
(combine vector and monobook, and remove code-base hack recommendation) |
||
| Line 1: | Line 1: | ||
| − | 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 | + | 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, | |
| + | {{code|<php> | ||
| + | $wgExtensionFunctions[] = 'wfAddCss'; | ||
| + | function wfAddCss() { | ||
| + | global $wgOut; | ||
| + | $wgOut->addStyle( 'wide-sidebar.css', 'screen' ); | ||
| + | } | ||
| + | </php>}} | ||
| − | |||
| − | + | 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. | |
This is intended to replace the left sidebar content, so left portlets are disabled. | This is intended to replace the left sidebar content, so left portlets are disabled. | ||
{{code|<css> | {{code|<css> | ||
| − | + | 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 { | ||
| Line 19: | Line 25: | ||
body.skin-vector div#left-navigation { | body.skin-vector div#left-navigation { | ||
left: 248px; | left: 248px; | ||
| + | } | ||
| + | body.skin-monobook div#p-cactions { | ||
| + | left: 230px; | ||
| + | } | ||
| + | body.skin-monobook div#p-logo { | ||
| + | width: 230px; | ||
} | } | ||
| Line 25: | Line 37: | ||
display: none; | display: none; | ||
} | } | ||
| − | </css>}} | + | body.skin-monobook div#p-navigation, |
| + | body.skin-monobook div#p-tb, | ||
| + | body.skin-monobook div#p-search { | ||
| + | display: none; | ||
| + | } | ||
| + | </css>}}== 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. | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | The above CSS hides the portlets allowing custom content to be placed into the sidebar. In Monobook, adjusting the size of the existing portlets to fit the new sidebar size is difficult, but in Vector you can resize them easily with the following CSS rule, | |
{{code|<css> | {{code|<css> | ||
| − | div# | + | div#mw-panel { width: 248px } |
| − | |||
| − | |||
| − | |||
| − | |||
</css>}} | </css>}} | ||
| − | Note | + | Note that the search portlet (for instance) may be placed in the sidebar using absolute positioning e.g.: |
{{code|<css> | {{code|<css> | ||
#p-search { | #p-search { | ||
| Line 57: | Line 64: | ||
| − | + | 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. | |
| − | + | [[Category:MediaWiki]] | |
| − | |||
| − | |||
| − | You can choose not to widen the logo width, but if you do and want to keep your original logo picture, you can | ||
Revision as of 12:52, 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.
This is intended to replace the left sidebar content, so left portlets are disabled.
== 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.
The above CSS hides the portlets allowing custom content to be placed into the sidebar. In Monobook, adjusting the size of the existing portlets to fit the new sidebar size is difficult, but in Vector you can resize them easily with the following CSS rule,
Note that the search portlet (for instance) may be placed in the sidebar using absolute positioning e.g.:
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.
