Using Citizen styles

This page is about how you can use Citizen styles on your wiki pages and templates.

Click here for information on how to customize Citizen styles for your wiki.

Applying Citizen styles in templates

There are multiple ways to apply Citizen styles in your wiki's templates through CSS variables:

1. Extension:TemplateStyles, you will also need Extension:TemplateStylesExtender to use CSS variables
2. Extension:CSS
3. MediaWiki:Citizen.css on your wiki

It is recommended to use CSS variables as they adjust according to the current theme.

Helpful classes

Class	Description
.floatright	Responsive float right, commonly used in templates like infobox
.floatleft	Responsive float left
.floatnone	Clear both sides
.citizen-overflow	Wrap content in a container and add overflow handling
.citizen-overflow-sticky-header	Make an element sticky in the overflow container (put it on the <tr> if it is a table)
.citizen-table-nowrap	Disable table wrapping
.wikitable	Apply Citizen's wikitable styles
.wikitable--border	Add vertical border to Citizen wikitable, use with .wikitable
.wikitable--stripe	Add striped rows to Citizen wikitable, use with .wikitable

For more detailed usage on defining specific styles for each theme, see the guide for adapting dark mode on MediaWiki.

Common conversions

Colors

Accent

Name	Description	WMUI equivalent
--color-progressive	Primary color	#36c
--color-destructive	Destructive color	#d33
--color-success	Success color	#00af89
--color-warning	Warning color	#fc3

Border

Use the following rule, you might have to specify which border (e.g. border-top-color for border-top)

border-color: var( --border-color-base );

Surface

Name	Description	WMUI equivalent
--color-surface-0	Site background only	#fff
--color-surface-1	Surface background 1 (This is not the same as background 0)	#fff
--color-surface-2	Surface background 2	#f8f9fa
--color-surface-3	Surface background 3	#eaecf0
--color-surface-4	Surface background 4	#c8ccd1, #a2a9b1

Shadow

Name	Description	WMUI equivalent
--box-shadow-card	Card shadow	@box-shadow-card
--box-shadow-dialog	Dialog shadow	@box-shadow-dialog

Text

Name	Description	WMUI equivalent
--color-emphasized	Emphasized text color for title text	#000
--color-base	Base text color for body text	#202122
--color-subtle	Subtle text color for caption text	#54595d, #72777d

Icons

Patching icon color in dark theme

Icons might need to be "flipped" to be visible in dark theme. Simply add the following rule to the direct element that contains the icon:

filter: var( --filter-invert );

Disable sticky header

Sticky header can be disabled per page or globally by setting display: none on the #citizen-page-header-sticky-sentinel element:

#citizen-page-header-sticky-sentinel {
  display: none;
}

Adding sticky header to overflow element or table

Sticky header can be added to elements wrapped by citizen-overflow (e.g. wikitable) by adding the citizen-overflow-sticky-header class to the element to be stickied.

For div elements:

<div class="citizen-overflow">
  <div class="citizen-overflow-sticky-header">I am sticky 👍</div>
  <div>I am not sticky 👎</div>
</div>

For wikitext table:

{| class="wikitable"
|- class="citizen-overflow-sticky-header"
! Header text !! Header text !! Header text
|-
| Example || Example || Example
|-
| Example || Example || Example
|-
| Example || Example || Example
|}