Help:Customizing skins

This page details skinning information that applies to all Help:Skins. For skin-specific customization, see Help:Customizing Monaco, Help:Customizing Quartz, and Help:Customizing Monobook.

Cascading Style Sheets (CSS) code can be put in several places to affect the display of a Wikia. The core stylesheet (Main.css) that is part of the MediaWiki software determines the default look of the site.

How do I customize skins?
Specific design details can be customized on a particular wiki by editing MediaWiki:Common.css, which affects all users of the site, no matter what skin they are using. Code placed in Common.css is usually aimed at customizing the display of the content area, not the navigation or colors belonging to a skin. This is because the classes and ids for displayed objects outside the content area can be very different from skin to skin, and adding skin-specific code to Common.css can slow down page load times.

Details inherited from Main.css and Common.css can, in turn, be affected by changes to the site-wide skin stylesheets. Monaco is the default skin for Wikia installations, and MediaWiki:Monaco.css is the place where admins can add customization. Admins can also customize stylesheets for the older skins at MediaWiki:.css although only those few users who have changed skins in their preferences will see the effects.

See also Help:Customizing skins, Help:Customizing Monaco, Help:Customizing Quartz, and Help:Customizing Monobook.

Can I customize my own view?
If you are logged in, you can change your own personal view of Wikia pages by choosing your favorite skin in your preferences. See Help:Skin chooser for more details.

If you'd like even more control than that, you customize your view (without changing the look for everyone) by editing your user stylesheet to add CSS code to change the site's fonts, colors, positions of links in the margins, and many other things.

Continuing down the "cascade" of stylesheets, details from Main.css, Common.css and .css are overridden for you only by code placed in the user stylesheet User:USERNAME/monaco.css (or the User:USERNAME/ .css file for any other skin, note that they must be all lowercase).

This is also a great place to test and refine design ideas without disturbing others, before transferring them to a site-wide stylesheet.

For more information and ideas, see Help:User style. You can learn more about CSS options and syntax at one of the many CSS tutorial pages on the web. Specific design details can be customized on a particular wiki by editing MediaWiki:Common.css, which affects all users of the site, no matter what skin they are using. Code placed in Common.css is usually aimed at customizing the display of the content area, not the navigation or colors belonging to a skin. This is because the classes and ids for displayed objects outside the content area can be very different from skin to skin, and adding skin-specific code to Common.css can slow down page load times.

Details inherited from Main.css and Common.css can, in turn, be affected by changes to the site-wide skin stylesheets. Monaco is the default skin for Wikia installations, and MediaWiki:Monaco.css is the place where admins can add customization. Admins can also customize stylesheets for the older skins at MediaWiki:.css although only those few users who have changed skins in their preferences will see the effects.

Changing the arrows on the enhanced recent changes list
You can change the arrows shown on the enhanced recent changes list by editing two classes,  (right arrow) and   (left arrow).

Normal code: .mw-arr-r { background-image: url('../common/images/Arr_r.png'); background-repeat: none; }

Example code for site CSS: .mw-arr-r { background-image: url('FILEPATH'); }

There are corresponding class for up and left arrows, which are used less:  and

Changing the redirect arrow
The arrow that shows on redirect pages can also be changed:

Example code for site CSS: .redirectMsg { background-image: url('FILEPATH'); background-repeat: no-repeat; background-position: 0 0; padding: 16px 0 16px 50px; } .redirectMsg img { display: none; }

You will need all the above code - the first part places your own image for the redirect, the second part removed the default image.