Manual:ResourceLoaderSkinModule

From mediawiki.org
Jump to navigation Jump to search

ResourceLoaderSkinModule is a special kind of module that provides boilerplate styles to help you build a working skin. It can be used by registering a module in your skin's skin.json file like so:

"skins.myskin.styles": {
        "class": "ResourceLoaderSkinModule",
        "features": {
                "normalize": true,
                "elements": true,
                "content": true,
                "legacy": false,
                "interface": true,
                "logo": true
        },
        "styles": [ "resources/skin.css" ]
},

Features[edit]

MediaWiki version:
1.36
Feature Default value Purpose Required HTML
logo false Adds CSS to style an element with class `mw-wiki-logo` using the value of wgLogos['1x']. For new skins we recommend using img tag directly including the logo. <div id="p-logo" role="banner">

       <a class="mw-wiki-logo" href="/wiki/MediaWiki" title="Visit the main page"></a>

   </div>

normalize true Normalizes browser default styles to sensible defaults. n/a
elements false The base level that only contains the most basic of common skin styles.

Only styles for single elements are included, no styling for complex structures like the TOC is present. This level is for skins that want to implement the entire style of even content area structures like the TOC themselves. May be redundant if using `normalize` depending on your skin.

n/a
legacy false Historic feature, do not use where possible. Has been split up into multiple features listed in this table. contains `content-thumbnails`, `interface-category`, `content.tables` and i18n features (i18n-ordered-lists, i18n-all-lists-margins, i18n-headings and a subset of the `interface` styles) n/a
Content styles
content false Deprecated. Alias for "content-thumbnails". n/a
content-thumbnails true Styles for thumbnails and floated elements. Needed by skins that wish to support thumbnail arrangement in the page. n/a
content-media false Styles for the new media structure on wikis where $wgUseNewMediaStructure is enabled. See https://www.mediawiki.org/wiki/Parsing/Media_structure. May be merged into content-thumbnails so should be considered unstable n/a
content-links false The skin will apply optional styling rules to links to provide icons for different file types. n/a
content-parser-output true Styles associated with the parser. Do not disable unless you know what you are doing :) n/a
content-tables true Styles associated with tables created by wikitext. Replace if you are unhappy with the aesthetic look. n/a
Interface styles
interface true Provides basic styles for MediaWiki concepts such as indicators, menus (Allows gadget developers to hide them) to get started with a skin quicker. Includes the orange user message bar, edit links, and site notices. Advanced skin developers may wish to turn this off to provide their own styling rules.
interface-category true Provides a styled gray box of categories. Can be disabled if skin does not support categories or wishes to style them differently.
interface-message-box true Provides support for styling warning, error and success message boxes across all pages. Skins worried about performance may wish to limit where this feature is loaded by using an additional module.
toc true Provides a styled gray box of categories. Can be disabled if skin disables or provides its own table of contents.
i18n support
i18n-ordered-lists
i18n-all-lists-margins
i18n-headings

For skins deprecating the legacy feature[edit]

Enabling the `normalize` feature is recommended[edit]

Without this, you may notice some elements look a little off.

visualClear[edit]

Skins making use of `visualClear` should instead use the clear fix mixin (.mixin-clearfix()). To aid migrating add the following style to your skin:

.visualClear {
    clear: both;
}

Skins should define a red link color for links to non-existent pages.[edit]

Skins using the legacy feature currently get red link color of ba0000. Skins that use the content feature will get a color of d33.

For skins that do not import either, these links will appear as normal links.

Suggested:

a.new {
	color: #ba0000;
}

Skins using `error`, `warning` or `success` classes should provide their own styles[edit]

  • Consider using `mw-messagebox`, `mw-warningbox` and `mw-successbox` instead.


Check your skin when printing[edit]

please check your print stylesheet, in particular for UI regressions relating to the footer.

  • Only skins using the interface feature will hide elements with the `printfooter` class automatically.
  • Skins using the #footer element with `interface` feature would previously get the footer displayed in a gray box. This is now the responsibility of the skin
@media (print) {
    #footer {
        background: #fff;
        color: #000;
        margin-top: 1em;
        border-top: 1pt solid #aaa;
        padding-top: 5px;
        direction: ltr;
    }
}

Ajax spinners[edit]

There will no longer be defaults for mw-ajax-loader and mw-small-spinner. Copy the styles if they are needed.

.mw-ajax-loader {
	background-image: url( images/ajax-loader.gif );
	background-position: center center;
	background-repeat: no-repeat;
	padding: 16px;
	position: relative;
	top: -16px;
}

.mw-small-spinner {
	padding: 10px !important; /* stylelint-disable-line declaration-no-important */
	margin-right: 0.6em;
	background-image: url( images/spinner.gif );
	background-position: center center;
	background-repeat: no-repeat;
}