Skin:Citizen

MediaWiki skins manual - category

Citizen Release status: stable
Description	A beautiful, usable, responsive MediaWiki skin with in-depth extension support. Originally developed for the Star Citizen Wiki.
Author(s)	alistair3149, Octfx
Latest version	Continuous updates
Compatibility policy	Master maintains backwards compatibility.
MediaWiki	1.39.4+
License	GNU General Public License 3.0 or later
Download	GitHub: project page git repository URL [help ] commit history Readme Changelog
Example	Star Citizen Wiki (English, German, Chinese), Tolkien Gateway, The Apple Wiki, Wikimedia Skin Lab, Wiki Lớp Học Mật Ngữ
Parameters $wgCitizenThemeDefault $wgCitizenEnableSearch $wgCitizenSearchGateway $wgCitizenSearchDescriptionSource $wgCitizenMaxSearchResults $wgCitizenEnableManifest $wgCitizenManifestThemeColor $wgCitizenManifestBackgroundColor $wgCitizenShowPageTools $wgCitizenThemeColor $wgCitizenGlobalToolsPortlet $wgCitizenEnableDrawerSiteStats $wgCitizenUseNumberFormatter $wgCitizenEnableCollapsibleSections $wgCitizenEnableARFonts $wgCitizenEnableCJKFonts $wgCitizenTableNowrapClasses
Hooks used BeforePageDisplay SidebarBeforeOutput SkinBuildSidebar SkinEditSectionLinks SkinPageReadyConfig SkinTemplateNavigation::Universal
Public wikis using	29 (Ranked 39th)
Public wikis using as default skin	12
Translate the Citizen skin if it is available at translatewiki.net

Citizen is a beautiful, usable, responsive MediaWiki skin that makes extensions part of the cohesive experience. It was initially created for the Star Citizen Wiki but is flexible to run on various MediaWiki configurations.

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

• Responsive layout - Responsive and able to adapt to different screen sizes.
• Light/dark mode - Switch between light and dark mode.
• Cohesive extension styles - Supported extensions blend with the rest of the UI.
• Reading preferences - Adjust page width, font size, and line height.
• Collapsible sections - Collapse and expand article sections.
• Persistent ToC - Access ToC anywhere in the article.
• Rich search suggestions - More helpful search suggestions with images and descriptions.
• Progressive Web App - Give a more app-like experience when users add your wiki to their home screen.

Screenshots

• 
  375x667 in light mode
• 
  375x667 in dark mode
• 
  768x1024 in light mode
• 
  768x1024 in dark mode
• 
  1024x768 in light mode
• 
  1024x768 in dark mode
• 
  1200x800 in light mode
• 
  1200x800 in dark mode
• 
  1920x1080 in light mode
• 
  1920x1080 in dark mode
• 
  Rich search suggestions
• 
  Navigation menu
• 
  Gallery styles
• 
  Preferences panel
• 
  Personal menu

Installation

• 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 file:

  wfLoadSkin( 'Citizen' );
  

• Put wfLoadSkin( 'Citizen' ); after all extensions
• Configure as required.
•  Done - Navigate to Special:Version on your wiki to verify that the skin is successfully installed.

MobileFrontend

To use Citizen with MobileFrontend, simply add this to your LocalSettings.php:

$wgDefaultMobileSkin = 'citizen';

Configuration

The skin works out of the box without any configurations. The config flags allow more customization on the specific features in the skin. Check out this page on how to adapt Citizen styles on your wiki.

Appearance

Name	Description	Values	Default
$wgCitizenThemeDefault	The default theme of the skin	'auto' - switch between light and dark according to OS/browser settings 'light' 'dark'	'auto'
$wgCitizenEnableCollapsibleSections	Enables or disable collapsible sections on content pages		true
$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
$wgCitizenGlobalToolsPortlet	ID of the portlet to attach the global tools	string	''
$wgCitizenEnableDrawerSiteStats	Enables the site statistics in drawer menu		true
$wgCitizenUseNumberFormatter	Use NumberFormatter for site statistics, which allows formatting number in a localized way		true
$wgCitizenThemeColor	The color defined in the theme-color meta tag	Hex color code	'#131a21'
$wgCitizenEnableARFonts	Enable included Noto Naskh Arabic for wikis that serve Arabic		false
$wgCitizenEnableCJKFonts	Enable included Noto Sans CJK for wikis that serves CJK languages		false
$wgCitizenTableNowrapClasses	Defines table css classes ignored by citizen table wrapper	array	[ "citizen-table-nowrap", "diff", "mw-changeslist-line", "mw-recentchanges-table", "infobox", "cargoDynamicTable", "dataTable", "srf-datatable", "smw-datatable", "mw-capiunto-infobox" ]

Search suggestions

Name	Description	Values	Default
$wgCitizenSearchGateway	Which gateway to use for fetching search suggestion	mwActionApi; mwRestApi	mwActionApi
$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

Webapp manifest

Name	Description	Values	Default
$wgCitizenEnableManifest	Enable or disable web app manifest		true
$wgCitizenManifestThemeColor	Theme color of the web app manifest	Hex color code	#131a21
$wgCitizenManifestBackgroundColor	Background color of the web app manifest	Hex color code	#131a21

Keyboard shortcuts

• / - Search

The following shortcut keys are a part of MediaWiki core, and it works across all skins.

Depending on the browser used, sometimes ⇧ Shift can be omitted.

• alt+⇧ Shift+f - Search
• alt+⇧ Shift+e - Edit
• alt+⇧ Shift+r - Recent Changes
• alt+⇧ Shift+x - Random Page
• alt+⇧ Shift+h - History
• alt+⇧ Shift+t - Talk Page
• alt+⇧ Shift+z - Main Page