A beautiful, usable, responsive MediaWiki skin with in-depth extension support. Originally developed for the Star Citizen Wiki.
Go to file
2024-04-25 15:45:24 -04:00
.github chore(deps): bump tj-actions/changed-files from 43 to 44 (#817) 2024-04-06 13:19:13 -04:00
.husky ci: 👷 lint code to MediaWiki standards 2024-04-24 02:55:42 +00:00
bin Force phpcbf to exit with 0 2019-12-30 19:04:02 -05:00
i18n feat(core): add pure black mode for dark theme 2024-04-25 15:45:24 -04:00
includes feat(core): add pure black mode for dark theme 2024-04-25 15:45:24 -04:00
licenses feat(font): replace RobotoVF with RobotoFlex 2022-10-27 22:31:37 -04:00
resources feat(core): add pure black mode for dark theme 2024-04-25 15:45:24 -04:00
skinStyles refactor(core): ♻️ replace usage of skin-citizen-theme classes 2024-04-24 20:48:43 -04:00
templates fix(toc): 🐛 incorrect layout when ToC title has multiple elements 2023-10-10 19:30:18 -04:00
tests/phpunit ci(test): 👷 🚨 fix incorrect test function names 2024-04-24 00:27:35 -04:00
.commitlintrc.json ci: lint code to MediaWiki standards 2022-09-30 02:33:57 +00:00
.djlintrc chore(dev): 🔧 set up djlint 2023-07-10 18:31:42 -04:00
.eslintignore refactor: convert skins.citizen.scripts.toc to ES6 2021-04-21 15:07:55 -04:00
.eslintrc.json refactor(search): ♻️ reimplement and clean up search clients 2023-08-02 18:56:08 -04:00
.gitignore Improve CI and code clean up (#143) 2020-06-16 22:49:41 -04:00
.phpcs.xml chore: update linter config 2021-01-06 19:28:39 -05:00
.stylelintignore Improve CI and code clean up (#143) 2020-06-16 22:49:41 -04:00
.stylelintrc.json chore(dev): 🔧 disable selector-class-pattern stylelint rule 2024-04-16 01:23:19 -04:00
.svgo.config.js style: 🎨 fix some eslint issues 2022-11-21 17:45:50 -05:00
.versionrc.json ci: lint code to MediaWiki standards 2022-09-30 02:33:57 +00:00
CHANGELOG.md chore(release): 🚀 2.12.0 2024-04-19 17:09:14 -04:00
CODE_OF_CONDUCT.md Add documentation to the skin 2019-12-21 00:56:15 -05:00
composer.json chore(deps-dev): update php-parallel-lint/php-parallel-lint requirement (#818) 2024-04-06 13:19:18 -04:00
CONTRIBUTING.md docs(contributing): 📚️ add CONTRIBUTING.md 2022-12-06 17:46:59 -05:00
CREDITS.md docs(credits): 📚️ add CREDITS.md 2022-12-04 16:47:16 -05:00
jsdoc.json ci: lint code to MediaWiki standards 2021-04-18 00:41:13 +00:00
LICENSE licensing update 2019-08-16 21:48:16 -04:00
package-lock.json chore(deps-dev): bump @commitlint/cli from 19.2.2 to 19.3.0 (#830) 2024-04-23 20:48:48 -04:00
package.json chore(deps-dev): bump @commitlint/cli from 19.2.2 to 19.3.0 (#830) 2024-04-23 20:48:48 -04:00
README.md feat(PortableInfobox): clean up header styles 2024-04-17 14:44:16 -04:00
skin.json feat(core): add pure black mode for dark theme 2024-04-25 15:45:24 -04:00

Citizen

License: GPL v3 MediaWiki: >=1.39.4

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.

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. 📱

Extension styles

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!

Core

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

Extensions

Name Grade Version Last updated
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
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
DiscussionTools A REL1_39 1aae2cc 2023-06-19
DismissableSiteNotice A N/A N/A
Echo A REL1_35 347c30e 2023-06-29
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 2022-11-28
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
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
SyntaxHighlight A REL1_35 05598b3 2023-05-22
Tabs A REL1_39 63ccef2 2023-07-11
Tabber A N/A N/A
TabberNeue A 1.7.5 dcc4bc1 2023-07-05
TemplateData A REL1_39 e2c12b5 2023-05-01
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
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!

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' );
  1. ✔️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 #131a21
$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
$wgCitizenTableNowrapClasses Defines table css classes ignored by citizen table wrapper List of css classes. Extend with $wgCitizenTableNowrapClasses[] = 'my_class'; ["citizen-table-nowrap", "mw-changeslist-line", "infobox", "cargoDynamicTable", "dataTable"]

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
$wgCitizenManifestThemeColor Theme color of the web app manifest Hex color code #131a21
$wgCitizenManifestBackgroundColor Background color of the web app manifest Hex color code #131a21

Requirements

  • MediaWiki 1.39.0 or later
  • For the legacy versions, check the other release branches.