Through personal CSS and JavaScript, you can change the way Fandom looks and behaves. Things like fonts, colors, and positions of page elements can be altered. However, it will only affect the way that you see Fandom when you're logged into your account.
CSS[]
To customize how the site looks for you using CSS, create and edit Special:MyPage/global.css on Community Central. This will apply the changes wherever you go on Fandom.
If you want to apply personal CSS on just one community, visit Special:MyPage/common.css on that community.
JavaScript[]
The personal JS preference
You can customize how Fandom looks for you using your own JavaScript — but first, you need to enable personal JS in your preferences. You won't see any effects from your JS until this is turned on.
Before you start, please understand the implications of turning the feature on by reading all the notes below:
- Be very careful — if your JS has mistakes, it can break the site for you or cause strange behavior.
- Avoid including JS that you do not understand, and don't import from sources that you do not fully trust or that are not secure
- Fandom is not responsible if something breaks because of your personal JS — you are in charge of fixing it.
If you're 100% sure you want to enable it, go to your preferences — the option can be found on the Appearance tab, under Skin.
After enabling personal JS, create and edit Special:MyPage/global.js on Community Central. This will apply the changes wherever you go on Fandom.
If you want to apply personal JS on just one community, visit User:<YourUsername>/common.js on that community. (For example, community.fandom.com/wiki/User:Fandom/common.js)
Additional notes[]
- As noted on the Customization policy, personal CSS and JS is an area in which you can make any tweaks you like (so long as they do not adversely affect any other users).
- Only account owners can edit their own CSS and JS pages - other users on a community, including admins, cannot edit another user's personal CSS and JS pages.
- Personal CSS is not affected by cache. Personal JS is not affected by the Javascript review process. This makes rapid testing and iteration much easier and simpler.
- You can also target specific communities in your global CSS and JS:
- CSS: a wiki-specific class is available on the
<body>tag, based on the database name of a community. The format is:.wiki-[database name]. - JS: the
wgDBName(database name) variable can be used to target a community.
- CSS: a wiki-specific class is available on the
Troubleshooting[]
If you come across an issue with your JavaScript or CSS, you can add ?safemode=1 to the end of your current URL. This disables all site and personal CSS and JS.
(The same can be done with community CSS and JS for individual wikis, using ?usesitecss=0 or ?usesitejs=0.)
More information about temporarily disabling your CSS and JS can be found here.
See also[]
- How to customize your community
- More info for those delving further into the world of CSS and JS editing
- The hub page for all CSS and JS details
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