Help:Advanced CSS and JS

Creating some custom code for your community or for your own account? This page goes a little further than our overview page to give you some helpful details.

Before you get started, though, you'll want to check out which pages can be customised. If you're planning to write some JavaScript for your community, you'll need to ask for it to be turned on by contacting FANDOM Support. Finally, you'll want to familiarize yourself with the JavaScript review process.

CSS
The  HTML element on articles includes a unique identifier based on the name of the page. For example, on this help page, the class is:

.page-Help_Advanced_CSS_and_JS

The general format is, where spaces, colons, and other special characters are replaced by underscores.

JavaScript
In MediaWiki:Common.js, use a switch to apply JavaScript to certain pages:

switch (mw.config.get('wgPageName')) { case 'page name': // JS here will be applied to "page name" break; case 'some other page': // JS here will be applied to "some other page" break; }

Applying CSS and JS to specific communities
In your personal CSS, you can add a class to the front of any other CSS selectors that will let you style the way your account looks at specific wikis.

This class is based on the database name of a community, not the URL — which are usually, but not always, the same. The format is:

or, if a non-English wiki:

For instance, if you wanted to make part of the background of Wookieepedia appear red to you, add this to your global.css file:



For JavaScript,  can be used to identify a specific community.

Load orders


The general load order is the core code, then local community code, then personal code.

Within each level, the load order is the "common" code, then skin-specific code.

!important in CSS
Due to CSS load orders, you may sometimes need to make use of the  property to ensure a CSS rule is applied. But  should be avoided when possible by use of specific (even overly specific) CSS selectors.

Caching issues
Every file you download from the internet gets cached. Normally that's great because it reduces traffic both for your own device and for FANDOM's servers, but it can be a problem when it comes to testing design changes. It may take a while before your changes to take effect unless you bypass your cache.

Popular JavaScript snippets
To get an idea of some scripts others have written that you might find useful or would like to try, take a look at the list of JS Enhancements on the FANDOM Open Source Library.

Duplicate JavaScript
Many scripts can have problems if they are run multiple times on the same page. Make sure to write the code in such a fashion that a particular piece of code runs only once. Avoid pasting the same JS in multiple files as it will likely conflict and cause confusing errors for you and other visitors.

CSS and JS editor error checking
The CSS and JS editors have active error checking ("linting") and syntax highlighting:
 * As you type code, the page will let you know about any errors in the syntax that might have occurred.
 * Note that not every flagged issue has to be solved; CSS (and even JS) technology is ever evolving, and browsers do not all behave identically: some messages may not require action.

Further help and feedback
de:Hilfe:Fortgeschrittenes CSS und JS es:Ayuda:CSS y JS avanzado fi:Ohje:Edistynyt CSS ja JavaScript fr:Aide:CSS et JS avancés it:Aiuto:CSS e JS avanzati ja:ヘルプ:CSSとJavaScriptに関する高度な情報 ko:도움말:자바 스크립트 및 CSS 목록 pl:Pomoc:Zaawansowane CSS i JS pt:Ajuda:CSS e JS Avançados ru:Справка:Шпаргалка по CSS и JS uk:Довідка:Шпаргалка по CSS і JS vi:Trợ giúp:CSS và JS nâng cao zh:Help:進階JS和CSS