User blog:DEmersonJMFM/Understanding CSS Selectors

Customization is an integral part of a wiki community and such styling sets apart a boring wiki from one that delivers the wow factor. Despite its importance, not every Admin knows how to go about editing their MediaWiki CSS pages. This blog outlines a brief summary of how to go about finding and maintaining CSS styling.

How to find the right classes?
Perhaps the biggest hurdle to jump in wiki styling is determining the appropriate CSS classes for the element you wish to modify. Generally you can find such classes through various browser tools.

For example, for users using Google Chrome (like myself), right-clicking on the object you wish to modify reveals a menu containing 'Inspect' (Ctrl+Shift+I). Once 'Inspect' is clicked, your screen will appear similar to the one on the right. Here you can see all the styling affecting the object you right-clicked, and, once the styling is highlighted, the element will highlight in the article. Style classes are shown in the box to the right (the class can also be determined by clicking the + icon below 'Properties'). To find the class of interest, styling in that class can be temporarily enabled or disabled by clicking the check marks to the left.

A class won't always work, even if displayed in Inspect Element (these are generally grayed out). Sometimes you must modify the spacing or remove prepended code such as  or. Many times playing around in the browser's tools will help identify the correct class selector through trial and error.

Be as specific as possible. A common mistake (leading to unintended styling changes across the wiki) is using a class that's too broad. For example,  will target the styling on the chat module but also every other rail module. The more appropriate class would be  instead. Pay special attention to modifying headers.

Where are the classes located?
Answering this question can help with fixing styling bugs in personal or wiki-wide styling. To the right of the class listed text can be found regarding the origin of the styling.
 * - search within the wiki's MediaWiki CSS pages.
 * - search within the user's CSS pages (wiki or global).
 * - Wikia default styling.
 * Blank ( in class location) - search inline styling or templates.
 * - search within external scripts (usually within JS pages).

Class styling suddenly stops working?
Wikia is constantly evolving and modifying its code so class changes should be an expected occurrence. Code that abruptly stops working could be the result of a class change and can usually be found by following the Wikia Technical Updates. In these updates, a link to the week's class change report (as well as the previous week's report) can be found documenting class and styling changes.

Additional tips
Site and user CSS can be disabled individually or together using URL queries ( and  ) at the end of the pages URL. Doing so is useful in filtering out styling that may affect what's being styled.

Don't be afraid to make mistakes. One of the best ways to learn CSS is to jump in and give it a try. Start modifying classes in your and, with newfound confidence, begin creating the most unique wiki on the digital block!