Skin:Citizen

From mediawiki.org
Jump to navigation Jump to search
MediaWiki skins manual - category
Crystal Clear device blockdevice.png
Citizen
Release status: stable
Screenshot-skin-citizen.png
Description A responsive skin developed for the Star Citizen Wiki
Author(s) alistair3149, Octfx
MediaWiki 1.35+
License GNU General Public License 3.0 or later
Download
README on GitHub
Example Star Citizen Wiki, Pit.wiki
Parameters
  • $wgCitizenEnableSearch
  • $wgCitizenSearchDescriptionSource
  • $wgCitizenMaxSearchResults
  • $wgCitizenEnableLazyload
  • $wgCitizenThumbnailSize
  • $wgCitizenEnableCSPA
  • $wgCitizenEnableCSPReportMode
  • $wgCitizenCSPDirective
  • $wgCitizenEnableHSTS
  • $wgCitizenHSTSMaxAge
  • $wgCitizenHSTSIncludeSubdomains
  • $wgCitizenHSTSPreload
  • $wgCitizenEnableDenyXFrameOptions
  • $wgCitizenEnableXXSSProtection
  • $wgCitizenEnableStrictReferrerPolicy
  • $wgCitizenEnableFeaturePolicy
  • $wgCitizenFeaturePolicyDirective
  • $wgCitizenEnableManifest
  • $wgCitizenManifestThemeColor
  • $wgCitizenManifestBackgroundColor
  • $wgCitizenShowPageTools
  • $wgCitizenEnablePreconnect
  • $wgCitizenPreconnectURL
  • $wgCitizenThemeColor
Translate the Citizen skin if it is available at translatewiki.net
Check usage and version matrix;

Citizen is a minimalistic responsive skin for MediaWiki built by the Star Citizen Wiki team. Although it is specifically built for the Star Citizen Wiki, the skin is configured to be flexible and able to run on any MediaWiki installation that is 1.35 or higher.

If you find an issue or there is some improvements that you would like to work on, please feel free to submit patches or report issues over at Github. Alternatively you can also use the discussion page for any help regarding the skin.

Notable features[edit]

  • Fully responsive skin: Responsive and able to adapt to different screen sizes.
  • Persistent ToC: Access ToC anywhere in the article. Tracking require JS.
  • Rich search suggestions: More helpful search suggestions with images and descriptions. Require JS.
  • Lazyload images: Improve load time of your wiki and avoid unnecessary image downloads. Require JS.
  • Native light/dark mode support: Respect OS and app configuration for light and dark mode.
  • Webapp manifest: Give a more app-like experience when user add your wiki to their home screen.
  • HTTP security response headers: Enhance the security of your wiki from HTTP response headers.

Screenshots[edit]

Installation[edit]

  • Download and place the file(s) in a directory called Citizen in your skins/ folder.
  • Add the following code at the bottom of your LocalSettings.php:
wfLoadSkin( 'Citizen' );
  • Configure as required.
  • Yes Done - Navigate to Special:Version on your wiki to verify that the skin is successfully installed.

Configuration[edit]

The skin works out of the box without any configurations. The config flags allow more customization on the specific features in the skin.

Note that:

  • By default all security-related features are turned off to ensure maximum compatibility.
  • If you have a lot of users that does not use javascript, it is recommended to turn off image lazyload as it requires javascript to display images properly.

Search suggestions[edit]

Name Description Values Default
$wgCitizenEnableSearch Enable or disable rich search suggestions true - enable; false - disable true
$wgCitizenSearchDescriptionSource Source of description text on search suggestions wikidata - Use description provided by WikibaseLib or ShortDescription; textextracts - Use description provided by TextExtracts; pagedescription - Use description provided by Description2 or any other extension that sets the description page property textextracts
$wgCitizenMaxSearchResults Max number of search suggestions Integer > 0 6

Image lazyload[edit]

Name Description Values Default
$wgCitizenEnableLazyload Enable or disable image lazyloading true - enable; false - disable false

Webapp manifest[edit]

Name Description Values Default
$wgCitizenEnableManifest Enable or disable web app manifest true - enable; false - disable true
$wgCitizenManifestThemeColor Theme color of the web app manifest Hex color code #11151d
$wgCitizenManifestBackgroundColor Background color of the web app manifest Hex color code #fff

Security-related[edit]

Content Security Policy (CSP)[edit]

Name Description Values Default
$wgCitizenEnableCSP Enable or disable Content Security Policy, as an alternative to $wgCSPHeader in MediaWiki 1.32+ true - enable; false - disable false
$wgCitizenEnableCSPReportMode Enable or disable CSP report only mode, overrides $wgCitizenEnableCSP true - enable; false - disable false
$wgCitizenCSPDirective The string of yourr CSP directive See the Content Security Policy page

HTTP Strict Transport Security (HSTS)[edit]

Name Description Values Default
$wgCitizenEnableHSTS Enable or disable HTTP Strict Transport Security true - enable; false - disable false
$wgCitizenHSTSMaxAge Time in second that the browser should remember that a site is only to be accessed using HTTPS Integer > 0 300
$wgCitizenHSTSIncludeSubdomains Apply HSTS to all of the site's subdomains true - enable; false - disable false
$wgCitizenHSTSPreload Enable or disable HSTS preload true - enable; false - disable false

Other security headers[edit]

Name Description Values Default
$wgCitizenEnableDenyXFrameOptions Enable or disable the deny X-Frame-Options header true - enable; false - disable false
$wgCitizenEnableXXSSProtection Enable or disable the X-XSS-Protection header true - enable; false - disable false
$wgCitizenEnableStrictReferrerPolicy Enable or disable strict-origin-when-cross-origin referrer policy header, should be used in conjunction with $wgReferrerPolicy as that only outputs the meta tags true - enable; false - disable false
$wgCitizenEnableFeaturePolicy Enable or disable Feature Policy true - enable; false - disable false
$wgCitizenFeaturePolicyDirective The string of your Feature Policy directive See the Feature Policy page

Miscellaneous[edit]

Name Description Values Default
$wgCitizenShowPageTools The condition of page tools visibility true - always visible; login - visible to logged-in users; permission - visible to users with the right permissions true
$wgCitizenEnablePreconnect Enable or disable preconnect to required origin true - enable; false - disable false
$wgCitizenPreconnectURL The URL for preconnect to required origin URL
$wgCitizenThemeColor The color defined in the theme-color meta tag Hex color code #11151d