Community Central


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 selectors?

Google Chrome Inspect Example

Google Chrome's Inspect Element Menu

Perhaps the biggest hurdle to jump in wiki styling is determining the appropriate CSS classes and selectors for the element you wish to modify. Generally you can find such information 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, or the rule, affecting the object you right-clicked, and, once the line of code to the left is hovered over, the element will highlight in the article. Style selectors 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 for that selector (its properties and corresponding values) can be temporarily enabled or disabled by clicking the check marks to the left. Doing so also updates the element's styling in real time so you can see how that change will affect the article without ever editing a CSS page.

A chosen selector 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 div or section. 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 selector that's too broad. For example, .WikiaRail .module will target the styling on the chat module but also every other rail module. The more appropriate choice would be .ChatModule.module instead. Pay special attention, especially when modifying headers.

Where are the selectors located?

Style Locations in Inspect Element

User CSS overrides site CSS

Answering this question can help with fixing styling bugs in personal or wiki-wide styling. To the right of the selectors listed text can be found regarding the origin of the styling.

  • site:1 - search within the wiki's MediaWiki CSS pages.
  • user:1 - search within the user's CSS pages (wiki or global).
  • Qualaroo.scss:2 - Wikia's default styling.
  • Blank ( in the selector location) - search inline styling or templates.
  • load.php?debug=...s.importArt...:1 - search within external scripts (usually within JS pages).

Styling suddenly stops working?

Detailed CSS Updates in Technical Blog

Keep an eye out for sudden class updates!

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 (?useusercss=0 and ?usesitecss=0) 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 by modifying styling in your personal css and, with newfound confidence, begin creating the most unique wiki on the digital block!

Also on Fandom

Random Wiki