Help:Including additional CSS and JS

This help page will explain the recommended ways to include additional CSS and JavaScript on your community.

ImportJS
This new method adds the MediaWiki page MediaWiki:ImportJS and provides an interface for including articles that contain scripts on a community - both local or from Dev Wiki.

The functionality is similar to the existing method, which can import articles from external communities, bundle several articles into one, minify them and serve them as a single request. This reduces both file size and web traffic, effectively making a community with a large number of additional files load much faster. ImportJS affects all skins much like Common.js.

Usage
MediaWiki:ImportJS provides a plain text article in which to load JavaScript from. Local files will need to be in the MediaWiki namespace. Dev Wiki imports will also need to be in the MediaWiki namespace to work. When stating files to import, the MediaWiki namespace does not need to be included. Example:

Load order
When using ImportJS, the pages within will be loaded last. The full load order is:


 * 1) Common.js
 * 2) Wikia.js
 * 3) Imported scripts through Common.js
 * 4) Imported scripts through Wikia.js
 * 5) ImportJS

importArticles
In lieu of the above method, importArticles will only be discussed here in regards to CSS imports. For JS imports, please see this page.

importArticles can still be used to import CSS styles. However, they will be subject to JS review since it has to be done through JavaScript.

Example
Importing a local CSS file through importArticles:

@import method
Using the, styles can be imported from any CSS file hosted on a Wikia or on other websites (ending with .css on the url and contains changes for the wikia skin elements on the file). The syntax is as follows:

Per the above example, to import Local.css into Wikia.css, place this at the top of your Wikia.css file:

An alternative way, which will make it easier to spot files loaded in the "Network" tab of Firefox's "Web Developer" is to use:

You can read more on this method here.

Further help and feedback
de:Hilfe:Einbinden von zusätzlichem CSS und JS es:Ayuda:Incluyendo JavaScript y CSS adicional fi:Ohje:Ylimääräisen JavaScriptin ja CSS:n lisääminen fr:Aide:Inclure du CSS et JS supplémentaire it:Aiuto:Includere CSS e JS aggiuntivi ja:ヘルプ:追加のJavaScriptとCSSをインクルードする ko:도움말:자바 스크립트 및 CSS 불러오기 nl:Help:Bijkomende JavaScript en CSS laden pl:Pomoc:Importowanie CSS i JS pt:Ajuda:Como incluir JavaScript e CSS adicionais ru:Справка:Включение дополнительных JS и CSS uk:Довідка:Ввімкнення додаткових JS і CSS vi:Trợ giúp:Bao gồm JavaScript và CSS bổ sung zh:Help:導入更多JavaScript與CSS