How to make basic changes to mediawiki skins

In this article we’ll show you the basics on how you can get started with editing skins in mediawiki.

To edit the look and feel of the your mediawiki, you’ll need to edit the css file of the current skin you’re using. In this example, we’ll edit the monobook theme, which is the default theme. The CSS file can be updated by going to the MediaWiki:Common.css CCS location in MediaWiki. You can visit it by go to the similar url below.

https://your-mediawiki.com/index.php?title=MediaWiki:Common.css

How do I change the width of the entire page and center it?

The default page width takes up 100% of the screen, and does so because of the following code in the MediaWiki:Common.css file:
#globalWrapper {
font-size: 127%;
width: 100%;
margin: 0; padding: 0;}
If you want the content of the page to take up 900px and be centered on the screen, make the following adjustments:
#globalWrapper {
position:relative;
font-size: 127%;
width: 900px;
margin-left:auto;
margin-right:auto;
padding: 0;
}

2 thoughts on “How to make basic changes to mediawiki skins

  1. Thank yo for pointing that out BewareofDoug!
    I updated the article and will have another article explaining what you said in depth. Thanks for the feedback.

    Best Regards,
    James R

  2. This is [u]NOT[/u] the right way to make changes to mediawiki skins. You should either create a custom skin or make changes to the MediaWiki page MediaWiki:Common.css. The latter is preferred. Changes to main.css are both wrong headed changes to core and will be overwritten by upgrades!

    Normal CSS changes should be made in the Common.css, if you want to change a single skin, you make the changes in, for example, MediaWiki:Monobook.css, NOT the monobook file. If you want to design an entirely new skin then you may be creating a new main.css as part of the process but you need to keep this completely separate from the css files that are part of the standard skins.

Was this article helpful? Join the conversation!