Changes: Help:Advanced CSS and JS

Revision as of 21:38, 18 September 2015

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.

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 wikias	Affected users	Affected skins
MediaWiki:Wikia.css/Special:CSS	this wikia	this wikia	all users	Wikia (default)
MediaWiki:Common.css	this wikia	this wikia	all users	varies
MediaWiki:Monobook.css	this wikia	this wikia	all users	Monobook
Special:MyPage/common.css	this wikia	this wikia	you only	all
Special:MyPage/wikia.css	this wikia	this wikia	you only	Wikia (default)
Special:MyPage/monobook.css	this wikia	this wikia	you only	Monobook
w:Special:MyPage/global.css}}	Community Central	all wikias	you only	all

JavaScript
Script file	Located at	Affected wikias	Affected users	Affected skins
MediaWiki:Common.js	this wikia	this wikia	all users	all
MediaWiki:Wikia.js	this wikia	this wikia	all users	Wikia (default)
MediaWiki:Monobook.js	this wikia	this wikia	all users	Monobook
Special:MyPage/common.js	this wikia	this wikia	you only	all
Special:MyPage/wikia.js	this wikia	this wikia	you only	Wikia (default)
Special:MyPage/monobook.js	this wikia	this wikia	you only	Monobook
w:Special:MyPage/global.js}}	Community Central	all wikias	you only	all

CSS and JS editor error checking

Wikia's 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 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 prevent 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 makes 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 Wikia 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> element on Wikia 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

There are other classes on the body tag that allow you to apply code by namespace, and more.

Load orders: The general load order on Wikia is: core code, then local community code, then personal code.; Within each level, the load order is: '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 Wikia'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 publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

You may need to manually refresh each page you recently opened 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 {{#NewWindowLink:http://dev.wikia.com/index.php?title=List of JavaScript Enhancements|list of JS Enhancements}} on the Developers Wiki.

Duplicate JavaScript: Many scripts can have problems if they 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 code in multiple files as it will likely conflict and cause confusing errors for you and other visitors.

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

@@ Line 187: / Line 187: @@
 [[de:Hilfe:Fortgeschrittenes CSS und JS]]
 [[ja:ヘルプ:CSSとJavaScriptに関する高度な情報]]
-[[pt:CSS e JS Avançados]]
+[[pt:Ajuda:CSS e JS Avançados]]