Fandom

Games Movies TV
Wikis
Start a Wiki

Prey Wiki

Watchlist Random page Recent changes

Help:Advanced CSS and JS

Create
Questions? Ask in the Community Forum.

Creating some custom code for your community, or for your own account? This page has more background details to help you with both.

For a more basic overview, see Help:CSS and JS customization.

Note: Community JavaScript is enabled on demand by contacting FANDOM Support. Visit Help:JavaScript review process for more information.

CSS and JS cheatsheet

The tables below are summarized guides to most of CSS and JS customization pages. The most common choices are highlighted in green.

CSS
Stylesheet Located at Affected communities Affected users Affected skins
MediaWiki:Wikia.css this community this community all users Default
MediaWiki:Common.css this community this community all users varies
MediaWiki:Monobook.css this community this community all users Monobook
MediaWiki:Chat.css this community this community all users (Special:Chat)
Special:MyPage/common.css this community this community you only all
Special:MyPage/wikia.css this community this community you only Default
Special:MyPage/monobook.css this community this community you only Monobook
Special:MyPage/chat.css this community this community you only (Special:Chat)
w:Special:MyPage/global.css Community Central all communities you only all
JavaScript
Script file Located at Affected communities Affected users Affected skins
MediaWiki:Common.js this community this community all users all
MediaWiki:Wikia.js this community this community all users Default
MediaWiki:Monobook.js this community this community all users Monobook
MediaWiki:Chat.js this community this community all users (Special:Chat)
Special:MyPage/common.js this community this community you only all
Special:MyPage/wikia.js this community this community you only Default
Special:MyPage/monobook.js this community this community you only Monobook
Special:MyPage/chat.js this community this community you only (Special:Chat)
w:Special:MyPage/global.js Community Central all communities you only all

Note: the default FANDOM skin is sometimes referred to as 'Oasis', the original codename for that layout, or 'Wikia' after the company.

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.

Common issues

CSS issues
Issue Explanation
@import prevents parallel downloads, use <link> instead Link tags are normally used to import CSS. However, MediaWiki does not support adding your own link tags without use of JS, so this error can normally be ignored.
Expected X but found Y This means you have entered an invalid value for a property. For example, in color: foo; foo is an invalid value for the color property because it is not a color.
Use of !important !important should generally be avoided in CSS as it can make it harder to maintain, and also makes it harder for users to override settings in their personal CSS. Most of the time, using the correct selector will help you avoid using !important.
Unknown property 'codename' Although not all CSS code is recognized by the tool (as CSS itself is a frequently updated artform), certain CSS codes can still be read when they are implemented for a certain object on the page (For example, mix-blend-mode: color-dodge;).

Advanced notes

Applying CSS to specific pages
Using CSS classes, you can apply CSS to specific pages. The <body> 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 page-[article name], and spaces, colons, and other special characters are replaced by underscores.
There are other classes on the body tag that allow you to apply code by namespace, and more. A browser's "inspect" or "view source" functionality will let you see what is available.
Applying JS to specific pages
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
If you prefer to keep most of your personal CSS in one location (global.css), there is a class on the body tag that will let you target specific wikis.
It is based on the database name of a community, not the URL - these often match, but not always. The format is:
wiki-[database name]
For JS, wgDBname 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 !important property to ensure a CSS rule is applied.
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 use the following tricks:
Note: After saving, you may have to bypass your browser's cache to see the changes.
  • Chrome - Windows: Hold the Ctrl key and press the F5 key. OS X: Hold both the ⌘ Cmd and ⇧ Shift keys and press the R key.
  • Safari - Hold down the ⇧ Shift key and click the Reload toolbar button.
  • Firefox - Windows: Hold the Ctrl key, and press F5. OS X: Hold the ⌘ Cmd and ⇧ Shift keys, and then press R.
  • Internet Explorer - Hold the Ctrl key, and press F5 (or click the Refresh button).
You may need to refresh each page you recently opened manually to see the change there.
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 write the code such 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.

Further reading

Further help and feedback

Retrieved from "http://prey.wikia.com/wiki/Help:Advanced_CSS_and_JS"

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.