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
For the old design, click here for the last release.
- 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. 📱
- Download place the file(s) in a directory called
Citizenin yourskins/folder. - Add the following code at the bottom of your LocalSettings.php and after all other extensions:
wfLoadSkin( 'Citizen' );- ✔️Done - Navigate to Special:Version on your wiki to verify that the skin is successfully installed.
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.
| 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" ] |
| 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 |
| 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' => [],
];- MediaWiki 1.39.4 or later
- For the legacy versions, check the other release branches.
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
$wgCitizenSearchDescriptionSourcetowikidata) - TemplateStylesExtender (if you use TemplateStyles) - Allow the use of CSS variables in TemplateStyles, including the ones provided by Citizen
Citizen overrides some extension styles through skinStyles that applies custom styling to extensions and core libraries.
- Grade A - Overhaul - Major adjustments to UI, plus Grade B.
- Grade B - Dynamic - Colors are converted into CSS variables, little to none style adjustments.
- Grade E - Legacy - Dark mode colors are hardcored as LESS variables. These should be updated to at least Grade B support.
Please feel free to submit PRs if you want to add support for more extensions!
| Name | Grade | Version | Last updated |
|---|---|---|---|
| MediaWiki UI | A | 1.39.0 | 2023-07-04 |
| Codex | A | 0.1.1 | 2022-12-01 |
| OOUI | A | 0.44.3 | 2023-06-24 |
| Name | Grade | Version | Last updated |
|---|---|---|---|
| AccountInfo | A | REL1_39 3145de8 |
2024-07-13 |
| AdvancedSearch | B | REL1_39 3a0eed7 |
2022-12-12 |
| AJAXPoll | A | REL1_39 8429d8d |
2022-10-25 |
| ApprovedRevs | B | N/A | N/A |
| Babel | B | MLEB 2021.07 | 2021-07-29 |
| Capiunto | A | REL1_39 3a6d523 |
2023-07-14 |
| Cargo | B | REL1_39 b4c6314 |
2023-01-03 |
| CategoryTree | B | N/A | N/A |
| CentralNotice | B | REL1_35 4aa2a8f |
2022-06-16 |
| Cite | A | N/A | N/A |
| CiteThisPage | A | REL1_39 1d21f67 |
2024-07-08 |
| CleanChanges | B | MLEB 2021.07 | 2021-07-29 |
| CodeEditor | A | REL1_39 67c012c |
2023-06-03 |
| CodeMirror | A | REL1_35 a326407 |
2023-05-24 |
| CommentStreams | B | REL1_39 f75ff3b |
2023-06-02 |
| CookieWarning | A | REL1_39 021d9ea |
2023-07-30 |
| DataMaps | A | 0.17.7 9c448d3 |
2024-07-11 |
| DiscussionTools | A | REL1_39 1aae2cc |
2023-06-19 |
| DismissableSiteNotice | A | N/A | N/A |
| Echo | A | REL1_35 347c30e |
2023-06-29 |
| FloatingUI | A | 0.0.1 | 2024-09-04 |
| Flow (StructuredDiscussions) | B | REL1_35 e3379f0 |
2022-04-27 |
| FlaggedRevs | B | REL1_39 130a28f |
2023-08-03 |
| Graph | B | N/A | N/A |
| Interwiki | B | REL1_35 a65a18e |
2022-05-15 |
| Lingo | B | REL1_35 e948775 |
2022-04-29 |
| Math | B | REL1_35 b7a7939 |
2023-06-04 |
| ManageWiki | B | master e626a9f |
2023-06-02 |
| MediaSearch | A | REL1_39 e0aa7bb |
2022-12-09 |
| MsUpload | A | REL1_35 32eb420 |
2021-08-25 |
| MultimediaViewer | A | REL1_39 1b97775 |
2022-11-26 |
| OAuth | B | REL1_35 451ed95 |
2021-08-31 |
| Popups | A | REL1_39 a40ebc1 |
2024-10-05 |
| PortableInfobox | A | 0.6 16a77dc |
2024-04-17 |
| RelatedArticles | A | REL1_39 f513e5c |
2022-11-16 |
| ReplaceText | B | REL1_39 af4840a |
2023-01-03 |
| RevisionSlider | B | REL1_35 4c4e368 |
2022-06-02 |
| Score | B | REL1_39 0a66cef |
2023-06-10 |
| Scribunto | B | REL1_39 ebb91f2 |
2023-05-29 |
| SearchDigest | A | Master ddd4665 |
2024-07-05 |
| Semantic MediaWiki | A | 4.0.2 0fcdfce |
2022-10-21 |
| Semantic Result Formats | E | N/A | N/A |
| SimpleTooltip | B | N/A | 2022-02-19 |
| SmiteSpam | B | REL1_39 c81b04b |
2023-05-30 |
| StructuredNavigation | A | REL1_39 55e2ec0 |
2024-09-06 |
| SyntaxHighlight | A | REL1_35 05598b3 |
2023-05-22 |
| Tabs | A | REL1_39 63ccef2 |
2023-07-11 |
| Tabber | A | N/A | N/A |
| TabberNeue | A | 2.6.0 | 2024-11-16 |
| TemplateData | A | REL1_39 7f8c5a8 |
2024-08-19 |
| TimedMediaHandler | B | N/A | N/A |
| Translate | A | MLEB 2023.01 | 2023-02-17 |
| TwoColConflict | B | REL1_39 5a2a947 | 2023-01-09 |
| UniversalLanguageSelector | B | MLEB 2021.12 | 2022-05-17 |
| UploadWizard | A | REL1_39 9cd7a02 |
2023-01-08 |
| UserProfileV2 | A | Main effb3b1 |
2024-07-25 |
| VEForAll | B | REL1_39 0de7158 |
2023-05-27 |
| VisualEditor | A | REL1_39 65d89c9 |
2023-02-06 |
| Wikibase | B | REL1_35 7bb503b |
2022-05-11 |
| WikiEditor | A | REL1_39 02e1c70 |
2023-06-03 |
| WikiHiero | B | REL1_39 3a2be51 |
2023-06-04 |
| WSSearchFront | B | 3.5.4 c27ebcb5 |
2021-11-23 |
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!