Through community CSS and JavaScript, local administrators can affect the way all visitors—logged in or not—see their wikis on desktop and tablets.
Local customization offers great challenge and satisfaction to many editors, so we at Fandom encourage you to try your hand at it. But there are two important things to keep in mind as you do:
- Use the Theme Designer first, before attempting any CSS customization - it'll likely make your life a lot easier.
- There are some limits as to what and how you can customize things, as both our customization policy and Terms of Use explain in greater detail.
CSS[]
Editing a community's CSS.
A community's CSS is governed by two pages: MediaWiki:Common.css for desktop use and MediaWiki:FandomMobile.css for mobile use. You can also access these pages from the Admin Dashboard via the "Desktop CSS" and "Mobile CSS" links.
The Community Central Technical Updates board contains periodic updates about changes that might affect your customizations. Another board, Designing Your Wiki, is a great place to get help from other users if needed.
CSS pages[]
Both MediaWiki:Common.css and MediaWiki:Fandomdesktop.css can be used for customizing a wiki's layout on desktop.
When viewing a page, the code in MediaWiki:Common.css and in MediaWiki:Fandomdesktop.css is combined together, with MediaWiki:Common.css coming first. For most communities this doesn't matter, but if you use both pages and @import rules (such as for importing custom fonts), then these rules must be added at the top of MediaWiki:Common.css to function.
MediaWiki:FandomMobile.css is wholly separate from MediaWiki:Common.css and MediaWiki:Fandomdesktop.css. No other file is used for customization on the mobile skin.
JavaScript[]
With the exception of imported scripts from the Fandom Developers Wiki through ImportJS, you cannot add custom community JS until you make a request for it to be turned on for your wiki (you can contact Fandom). After it's enabled, you can add freeform JS, rather than only imports. Whatever JS is there will be loaded for all visitors to your community, whether they're logged in or not. The main pages for adding custom JS are MediaWiki:Common.js and MediaWiki:Fandomdesktop.js.
Be aware of the following:
- For security reasons, edits to community JS must go through an approval process.
- Using ImportJS to import existing scripts bypasses the need for the review process.
- JS errors can break basic functionality in your community. Please be careful to avoid introducing errors.
- Please do not include JS that you do not understand, nor import from sources that you do not fully trust. Additionally, do not import JS from personal JS pages, or from insecure pages.
- As with the CSS pages, changes to the Common.js and Fandomdesktop.js pages will affect the experience of everyone visiting the wiki.
Some technicalities[]
Changes you make to either CSS or JS are usually not immediately seen upon publication. This is because of a concept called "caching". If you're in the middle of a lengthy period of editing your CSS and JS, you may have to frequently bypass your cache to see your changes.
Also, Fandom's load order—the priority given to each of the various pages used to customize your wiki—is crucial for administrators to understand. A common reason that some customizations aren't seen is because a later-loading page effectively cancels a declaration made on an earlier-loading page.
See also[]
- Help:CSS best practices – some best practice suggestions for CSS customization
- Help:Personal CSS and JS – creating customizations that only affect you
- Help:Advanced CSS and JS – more info for those delving further into the world of CSS and JS editing
- Help:CSS and JS pages - an overview of the CSS and JS pages that can be customized at Fandom
- Help:CSS and JS customization – the hub page for all CSS and JS details
- Help:Including additional CSS and JS – Importing CSS and JS onto your wiki
Further help and feedback[]
- Browse and search other help pages at Help:Contents
- Check Fandom Community Central for sources of further help and support
- Check Contacting Fandom for how to report any errors or unclear steps in this article