Extension:CSS

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
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,

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.

Alternatively, CSS rules can be directly included within the parser-function (inline) as in the following example,

Installation
extdist-css>Special:ExtensionDistributor/CSS|Download the latest snapshot and extract it to your extensions directory. Then include it in your localsettings>Special:MyLanguage/LocalSettings.php|LocalSettings.php file as in the following example.

Optionally, you can set the base URL for external files.

Use as a PageCSS replacement
There is a prior page-css>Special:MyLanguage/Extension:PageCSS|Extension:PageCSS which used &lt;css> and &lt;/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 &lt;css> tags is to use both this Extension:CSS and newpage-css>Special:MyLanguage/Extension:NewPageCSS|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 &lt;css> to #css:

At this point, the prior PageCSS (or NewPageCSS) extensions may be removed from your configuration; &lt;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
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
See talk-css>Extension talk:CSS|talk page.

Possible Uses
Most of the following CSS Snippets were originally created, made, or tested using this extension:

Snippets/Circle or Oval Gallery Who wants just boring square photos when you can made them round or oval?

Snippets/CSS Typing Text Quick Message that "types" itself out on page load.

Snippets/Equal Columns In Mediawiki it's not easy to create columns. This CSS Snippet not only makes it easy, it automatically divides your content into equal length columns.

Snippets/Fading Away Image or Gallery Photo vanishes "back into" the page and then reappears.

Snippets/Image Expand on Hover Images expand when someone "hovers" over them.

Snippets/Image Slideshow created by CSS A slideshow entirely created by CSS

Snippets/Modals in Mediawiki A CSS Modal.

Snippets/Movie Credits Scrolling content that moves up like Movie Credits do.

Snippets/Pinterest Like Gallery Pinterest has proven the popularity of this gallery layout. This Snippet lets you create this galley style inside Mediawiki.

Snippets/Rotating Text Rotating Message

Snippets/Sliding Image, Text or Gallery Sliding content. Great for Landing Pages.