Help:Including additional CSS and JS

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

ImportJS

MediaWiki:ImportJS provides an interface for including articles that contain scripts - both local and from Dev Wiki - on a community.

The wiki does not need custom JS enabled for ImportJS to work.

The functionality is similar to the existing method, importArticles, which can import several articles from local and external communities, bundling them into one network request and minifying them. Both importArticles and ImportJS reduce file size and web traffic, effectively making a community with a large number of additional files load much more quickly.

File:Bulb.png

JavaScript review: The ImportJS feature of the Content Review extension bypasses the need for the JavaScript review process, allowing the immediate addition or removal of a community's JavaScript imports.

Usage

MediaWiki:ImportJS provides a plain text article in which to specify JavaScript article names. 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:

//local JS file
Cat.js

// Dev Wiki script
dev:AjaxRC.js

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

CSS imports

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. Additionally, loading CSS in this way creates a flicker effect as the CSS is applied after the page is initially displayed. For best results, use the @import method.

Example

Importing a local CSS file through importArticles:

importArticles({
    type: "style",
    article: "MediaWiki:Local.css"
});

@import method

File:Fandom CSS Importing Best Practices.png

This chart should help you to address load order issues with importing.

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

@import "path_to_file_to_import.css"

Per the above example, to import Local.css into Wikia.css, place this at the top of your Wikia.css file (keep in mind that if Common.css is being loaded on your wiki, this import line may not work. See the flow chart to the right.):

@import "/load.php?articles=MediaWiki:Local.css&only=styles&mode=articles";

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

@import url("/MediaWiki:Local.css?ctype=text/css&action=raw");

You can read more on this method here.

See also

• Help:Including additional CSS and JS/technical
• Help:CSS and JS customization
• Help:Advanced CSS and JS
• Help:CSS and JS pages

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