Extension:TemplateStylesExtender

From Linux Web Expert

MediaWiki extensions manual
File:OOjs UI icon advanced-invert.svg
TemplateStylesExtender
Release status: stable
Implementation Parser extension
Description Extends Extension:TemplateStyles with new selectors
Author(s) Octfxtalk
Latest version 1.2.0 (2023-07-19)
MediaWiki 1.39+
PHP >=8.0
Composer octfx/template-styles-extender
License GNU General Public License 2.0 or later
Download

GitHub:

<translate> Note:</translate>
<translate> No [[<tvar name=1>Special:MyLanguage/Localisation#Translation resources</tvar>|localisation]] updates are
provided by <tvar name=twn>translatewiki.net </tvar>.</translate>

Parameters

  • $wgTemplateStylesExtenderEnablePrefersColorScheme
  • $wgTemplateStylesExtenderEnableCssVars
  • $wgTemplateStylesExtenderEnableUnscopingSupport
Hooks used
Quarterly downloads Lua error in Module:Extension at line 172: bad argument #1 to 'inNamespace' (unrecognized namespace name 'skin').
Public wikis using Lua error in Module:Extension at line 172: bad argument #1 to 'inNamespace' (unrecognized namespace name 'skin').

The TemplateStylesExtender extension extends Extension:TemplateStyles with new selectors and matchers.

Features

Add support for:

  • CSS variables:
    Example color: var( --color-base )
  • image-rendering
  • ruby-position
  • ruby-align
  • scroll-margin-* and scroll-padding-*
  • @media (prefers-color-scheme: dark/light) media queries
  • mask-image
  • clamp
  • revert / revert-layer
  • aspect-ratio

Installation

  • <translate> <tvar name=1>Download</tvar> and place the file(s) in a directory called <tvar name=name>TemplateStylesExtender</tvar> in your <tvar name=ext>extensions/</tvar> folder.</translate>
  • <translate> Add the following code at the bottom of your <tvar name=1>LocalSettings.php </tvar> file:</translate> 
    wfLoadExtension( 'TemplateStyles' );
wfLoadExtension( 'TemplateStylesExtender' );
  • Configure as required.
  • File:OOjs UI icon check-constructive.svg <translate> Done</translate> – <translate> Navigate to <tvar name=special>Special:Version</tvar> on your wiki to verify that the extension is successfully installed.</translate>

Configuration

Key Description Example Default
$wgTemplateStylesExtenderEnablePrefersColorScheme Flag to enable @media (prefers-color-scheme: dark/light) media queries false true
$wgTemplateStylesExtenderEnableCssVars Flag to enable CSS vars false true
$wgTemplateStylesExtenderEnableUnscopingSupport Flag to enable unscoping of CSS by users with editinterface permissions true false

Note CSS Vars

Currently using :root selectors won't work due to template styles prepending .mw-parser-output.

One possible fix is to wrap the entire content into a 'div' element and adding the declarations to this, e.g. 

div#content-wrap {
   --padding: 10px
}

.content {
   padding: var( --padding )
}

Wikitext 

<div id="content-wrap">
   <div class="content">
      The WikiText...
   </div>
</div>


Unscoping of CSS

Example: <templatestyles src="Foo/style.css" wrapclass="mediawiki" /> results in the CSS being scoped to .mediawiki instead of .mw-parser-output.

Including such a call in a page essentially limits editing to users with the editinterface right. You can alternatively include a call to a template that includes the styles.

See also

Retrieved from "https://www.linuxwebexpert.com/wiki/index.php?title=Extension:TemplateStylesExtender&oldid=37757"