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:

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

.skin-citizen-{THEME NAME} - use to target specific themes. (e.g. .skin-citizen-dark for dark theme)
.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-table-nowrap - disable table wrapper on the current table or its direct children

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 );

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`

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

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`