Citizen

Citizen is a responsive skin for MediaWiki built by the Star Citizen Wiki team. Although it is specifically built for the Star Citizen Wiki, the skin should be able to run on any Mediawiki installation that is 1.31 or higher. Due to resource constraints, we might not be able to provide full support for setups that are vastly different than us, but please feel free to submit patches or bug report!

Live demo can be seen at the Star Citizen Wiki.

Notable features

Fully responsive skin: Responsive and able to adapt to different screen sizes. 📱💻🖥️
Rich search suggestions: More helpful search suggestions with images and descriptions. 🔍👀
Lazyload images: Improve load time of your wiki and avoid unnessecary image downloads. 🚀
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. 🔒🔑

Installation

Download 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' );

✔️Done - Navigate to Special:Version on your wiki to verify that the skin is successfully installed.

Configurations

Search suggestions

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

Name	Description	Values	Default
`$wgCitizenEnableLazyload`	Enable or disable image lazyloading	`true` - enable; `false` - disable	`true`
`$wgCitizenThumbnailSize`	Thumbnail size in pixels to use for lazy-loading placeholder	Integer > 0	`10`

Content Security Policy (CSP)

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)

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

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

Webapp manifest

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`

Miscellaneous

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`
`$wgCitizenThumbnailSize`	Thumbnail size in pixels to use for lazy-loading placeholder	Integer > 0	`10`
`$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`

Requirements

MediaWiki 1.31 or later

7.2 KiB Raw Blame History