Extension:CSS
CSS Release status: stable |
|
---|---|
Implementation | Parser function |
Description | Provides a parser-function for adding CSS files, article or inline rules to articles |
Author(s) | |
Latest version | 3.5.0 |
MediaWiki | >= 1.35.0 |
License | GNU General Public License 2.0 or later |
Download | |
Example | organicdesign.nz |
|
|
Quarterly downloads | 131 (Ranked 44th) |
Translate the CSS extension if it is available at translatewiki.net | |
Issues | Open tasks · Report a bug |
The CSS extension allows CSS stylesheets to be included in specific articles. The CSS can be another article, a file or can be rules defined directly within the parser-function.
Usage
[edit]For example, if you have a CSS article called "MyStyles.css", which are the styles intended for use with the article "MyFancyUserPage", you would add the following parser-function syntax to the latter,
{{#css:MyStyles.css}}
If on the other hand "MyStyles.css" was a file in the /wiki/skins directory, then it would be included as shown below. Note that the file must be an absolute path with a leading slash to distinguish it from an article title.
{{#css:/skins/MyStyles.css}}
Alternatively, CSS rules can be directly included within the parser-function (inline) as in the following example,
{{#css:
body {
background: yellow;
font-size: 20pt;
color: red;
}
}}
Installation
[edit]- Download and move the extracted
CSS
folder to yourextensions/
directory.
Developers and code contributors should install the extension from Git instead, using:cd extensions/
git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/CSS - Add the following code at the bottom of your LocalSettings.php file:
wfLoadExtension( 'CSS' );
- Configure as required.
- Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.
Configuration
[edit]Optionally, you can set the base URL for external files.
$wgCSSPath = false; # Default, relative to $wgScriptPath
$wgCSSPath = ''; # Relative to the root of your server
$wgCSSPath = 'https://example.org/stylesheets'; # Relative to a different site
Use as a PageCSS replacement
[edit]There is a prior Extension:PageCSS (now archived) which used <css>
and </css>
tags instead of the #css: parser function.
This extension can do most of what those extensions provide, but the syntax is incompatible.
One way to avoid breaking existing pages which still use the old <css>
tags is to use both this Extension:CSS and Extension:NewPageCSS on the same wiki.
An alternate solution (if you want to use only this extension, but have existing content which expects Extension:PageCSS) is to save this stub function as a PHP file and include it from your LocalSettings.php to remap <css> to #css:
<?php
// Stub to remap <css></css> tags to {{#css:}} parser function extension
// For use when installing https://www.mediawiki.org/wiki/Extension:CSS to replace Extension:NewPageCSS on existing wikis
$wgHooks['ParserFirstCallInit'][] = 'wfCSSParserStubInit';
// Hook our callback function into the parser
function wfCSSParserStubInit( Parser $parser ) {
// When the parser sees the <css> tag, it executes the stub wfCSSTagRender function (below) to invoke the {{#css:}} parser
$parser->setHook( 'css', 'wfCSSTagRender' );
return true;
}
// Execute <css> tag
function wfCSSTagRender( $input, array $args, Parser $parser, PPFrame $frame ) {
// Stub function, just redirect the user-provided input text blindly to the {{#css:}} parser function to re-parse it as wikitext
$output = $parser->recursiveTagParse('{{#css:' . $input . '}}', $frame);
return $output;
}
At this point, the prior PageCSS (or NewPageCSS) extensions may be removed from your configuration; <css> now goes to #css: and (if you have this CSS extension already up and running) will behave the way any of the other CSS extensions always have.
Problems with changing the color or background of a specific page
[edit]Using the parser function to use the CSS from another page does not work to change the color or background of the page, however, using the parser function on a single page by itself does allow the background to be changed. To overcome this problem, it is possible to load the CSS through transclusion, which does not cause the problem of failing to load the change to the page background.
Bugs
[edit]See talk page.
See also
[edit]- Extension:NewPageCSS
- Extension:TemplateStyles - a similar extension which sanitized the CSS and stores it on separate pages.
This extension is included in the following wiki farms/hosts and/or packages: This is not an authoritative list. Some wiki farms/hosts and/or packages may contain this extension even if they are not listed here. Always check with your wiki farms/hosts or bundle to confirm. |
- Stable extensions
- Parser function extensions
- GPL licensed extensions
- Extensions in Wikimedia version control
- ParserFirstCallInit extensions
- RawPageViewBeforeOutput extensions
- All extensions
- Extensions included in Miraheze
- Extensions included in MyWikis
- Extensions included in WikiForge
- User interface extensions
- Script embedding extensions
- CSS