👋

Citizen

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.

Live demo: English, German, Chinese

Notable features

• Responsive layout: Responsive and able to adapt to different screen sizes. 📱💻🖥️
• Light/dark mode: Switch between light and dark mode. ☀️🌙
• Improved extension UI: Adjust supported extensions to be more usable and cohesive. 🤝🔗
• 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 user add your wiki to their home screen. 📱

Installation

1. Download place the file(s) in a directory called Citizen in your skins/ folder.
2. Add the following code at the bottom of your LocalSettings.php and after all other extensions:

wfLoadSkin( 'Citizen' );

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

Configurations

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 wiki 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 - enable; false - disable	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 - enable; false - disable	true
$wgCitizenUseNumberFormatter	Use NumberFormatter for site statistics, which allows formatting number in a localized way	true - enable; false - disable	true
$wgCitizenThemeColor	The color defined in the theme-color meta tag	Hex color code	#0d0e12
$wgCitizenEnableARFonts	Enable included Noto Naskh Arabic for wikis that serve Arabic	true - enable; false - disable	false
$wgCitizenEnableCJKFonts	Enable included Noto Sans CJK for wikis that serves CJK languages	true - enable; false - disable	false
$wgCitizenEnablePreferences	Enable the preferences menu	true - enable; false - disable	true
$wgCitizenOverflowInheritedClasses	Defines css classes inherited by the overflow wrapper	List of css classes. Extend with $wgCitizenOverflowInheritedClasses[] = 'my_class';	["floatleft", "floatright" ]
$wgCitizenOverflowNowrapClasses	Defines css classes ignored by the overflow wrapper	List of css classes. Extend with $wgCitizenOverflowNowrapClasses[] = 'my_class';	["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
$wgCitizenSearchModule	Which ResourceLoader module to use for search suggestion	skins.citizen.search; mediawiki.searchSuggest; string	skins.citizen.search
$wgCitizenSearchGateway	Which gateway to use for fetching search suggestion	mwActionApi; mwRestApi; smwAskApi; string	mwActionApi
$wgCitizenSearchDescriptionSource	Source of description text on search suggestions (only takes effect if $wgCitizenSearchGateway is mwActionApi)	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 - enable; false - disable	true
$wgCitizenManifestOptions	Options of the web app manifest	-	See below

$wgCitizenManifestOptions = [
	'background_color' => '#0d0e12',
	'description' => '',
	'short_name' => '',
	'theme_color' => "#0d0e12",
	'icons' => [],
];

Requirements

• MediaWiki 1.43.0 or later
• For the legacy versions, check the other release branches:

Version	MediaWiki version
2.40.2	> 1.39.4
1.17.9	> 1.35.2

Recommended extensions

These extensions are optional. They are recommended to enable additional feature in Citizen.

• PageImages (bundled with MediaWiki) - Add image to search suggestion results
• TextExtracts (bundled with MediaWiki) - Add description to search suggestion results
• ShortDescription - Add short description to under page title and search suggestion results (needs to set $wgCitizenSearchDescriptionSource to wikidata)
• TemplateStylesExtender (if you use TemplateStyles) - Allow the use of CSS variables in TemplateStyles, including the ones provided by Citizen

Extension styles

Citizen overrides some extension styles through skinStyles that applies custom styling to extensions and core libraries. Please feel free to submit PRs if you want to add support for more extensions!

Extensions

Name	Version
AccountInfo	REL1_39 3145de8
AdvancedSearch	REL1_39 3a0eed7
AJAXPoll	REL1_39 8429d8d
ApprovedRevs	N/A
Babel	MLEB 2021.07
Capiunto	REL1_39 3a6d523
Cargo	REL1_39 b4c6314
CategoryTree	N/A
CentralNotice	REL1_35 4aa2a8f
Cite	N/A
CiteThisPage	REL1_39 1d21f67
CleanChanges	MLEB 2021.07
CodeEditor	REL1_39 67c012c
CodeMirror	REL1_43
CommentStreams	REL1_39 f75ff3b
CookieWarning	REL1_39 021d9ea
DataMaps	0.17.7 9c448d3
DiscussionTools	REL1_39 1aae2cc
DismissableSiteNotice	N/A
Echo	REL1_35 347c30e
FloatingUI	0.0.1
Flow (StructuredDiscussions)	REL1_35 e3379f0
FlaggedRevs	REL1_39 130a28f
Graph	N/A
Interwiki	REL1_35 a65a18e
Lingo	REL1_35 e948775
Math	REL1_35 b7a7939
ManageWiki	master e626a9f
MediaSearch	REL1_39 e0aa7bb
MsUpload	REL1_35 32eb420
MultimediaViewer	REL1_39 1b97775
OAuth	REL1_35 451ed95
Popups	REL1_39 a40ebc1
PortableInfobox	0.6 16a77dc
RelatedArticles	REL1_43
ReplaceText	REL1_39 af4840a
RevisionSlider	REL1_35 4c4e368
Score	REL1_39 0a66cef
Scribunto	REL1_39 ebb91f2
SearchDigest	Master ddd4665
Semantic MediaWiki	4.0.2 0fcdfce
Semantic Result Formats	5.0.0
SimpleTooltip	N/A
SmiteSpam	REL1_39 c81b04b
StructuredNavigation	REL1_39 55e2ec0
SyntaxHighlight	REL1_35 05598b3
Tabs	REL1_39 63ccef2
Tabber	N/A
TabberNeue	2.6.0
TemplateData	REL1_39 7f8c5a8
TimedMediaHandler	N/A
TinyMCE	1.1.2
Translate	MLEB 2023.01
TwoColConflict	REL1_39 5a2a947
UniversalLanguageSelector	MLEB 2021.12
UploadWizard	REL1_39 9cd7a02
UserProfileV2	Main effb3b1
VEForAll	REL1_39 0de7158
VisualEditor	REL1_39 65d89c9
Wikibase	REL1_35 7bb503b
WikiEditor	REL1_39 02e1c70
WikiHiero	REL1_39 3a2be51
WSSearchFront	3.5.4 c27ebcb5

Some of the field are tagged as N/A because the information was not tracked before. If you are interested in adding skinstyles, please check out this page on the wiki!