MediaWiki CSS

This is a guide to the most common MediaWiki CSS selectors which may be useful in skin customization. Please note that the list of selectors below is not exhaustive. Browser developer tools can help users who wish to customize their wiki skin and can help locate any elements not explicitly mentioned in this guide.

Header elements

See: Styling the VectorTabs

Logo and sidebar elements

See: Styling the sidebar

Preferences page elements

See: Styling the preferences page

Wiki editor elements

See: Styling the wiki editor

Content elements

Selector	Description	Recommendations
#pageWrapper	Outer wrapper around page content and footer.	If you want a background for the sidebar that extends all the way to the Curse footer, using this is an option. Note that the background will also be behind the page content and footer, but you can hide it with backgrounds on those.
div#content	Container for the page content.
div#content #firstHeading	The page title.
div#content h1, div#content h2, div#content h3, div#content h4, div#content h5, div#content h6	Headings in the article.	Setting overflow: auto; makes any backgrounds or borders of headings respect floating elements. This reduces the need to use clear to push article sections beneath floating elements. Due to strange behavior in many versions of IE, if you use overflow: auto, you'll need around 5px of padding-bottom to prevent scroll bars from appearing on some headings.
.mw-editsection	The edit links in headings.	Styles for headings affect this as well. There may be cases where you want to apply styles to make this look like normal text rather than heading text.
div#toc, div.toc	Table of contents box.
div#content .toc .toctitle h2	Table of contents heading.	Removing any heading border or background is often a good idea for this, depending on the skin design.
.toctoggle	Table of contents show/hide button.	Styles for headings affect this as well. There may be cases where you want to apply styles to make this look like normal text rather than heading text.
hr	General horizontal line.	Most likely, this will be styled with border-bottom, though there are also other ways.
ul	General unordered lists.	You can override the standard list-item-image bullet here.
table.wikitable	Tables in content with the wikitable class.	Has a background by default that will often need to be overridden.
table.wikitable > * > tr > th, table.wikitable > tr > th	Table header cells in tables with the wikitable class.	Has a background by default that will often need to be overridden.
table.wikitable > * > tr > td	Table data cells in tables with the wikitable class.	Has a background by default that will often need to be overridden.
table.jquery-tablesorter th.headerSort	Sortable table header cells.	The sort arrows are added to this as a background. You can override this with an up and down arrow image added as a background positioned at right center. This is typically necessary on dark skins.
table.jquery-tablesorter th.headerSortDown	Sortable table header cells.	The up sort arrow is added to this as a background. You can override this with an up and down arrow image added as a background positioned at right center. This is typically necessary on dark skins.
table.jquery-tablesorter th.headerSortUp	Sortable table header cells.	The up sort arrow is added to this as a background. You can override this with an up arrow image added as a background positioned at right center. This is typically necessary on dark skins.
table.jquery-tablesorter th.headerSortDown	Sortable table header cells.	The down sort arrow is added to this as a background. You can override this with an down arrow image added as a background positioned at right center. This is typically necessary on dark skins.
ul.gallery	Container for a standard image gallery.
li.gallerybox	Outer container for an image in a standard image gallery. Contains image and caption.
li.gallerybox div.thumb	Inner container for an image in a standard image gallery. Contains just the image.	Take care if adjusting margins or padding, as this can cause the inner box to extend out of the outer box or at least move it from center.
div.gallerytext	Caption for an image in a standard image gallery.
.thumb	Invisible outer container for a thumbnail created using the thumb argument in an image link.	Apply borders, backgrounds, and visual effects to div.thumbinner instead of this. Apply any margin adjustments to .thumb.tleft and .thumb.tright instead.
.thumb.tleft	Invisible outer container for a thumb that's floated to the left.	Margin adjustments should be done here. Be sure to leave some right margin to keep some space between thumbnails and text.
.thumb.tright	Invisible outer container for a thumb that's floated to the right.	Margin adjustments should be done here. Be sure to leave some left margin to keep some space between thumbnails and text.
div.thumbinner	Container for a thumb around both image and caption.	You may want to change the default border and background for this.
html .thumbimage	Container for the thumb image.	You may want to change the default border and background for this.
.thumbcaption	The caption for a thumb image.
pre	Preformatted text.	There is a background and dashed border for this by default in MediaWiki. white-space: pre-wrap; and word-wrap: break-word; are highly recommended to prevent long lines from exceeding the content area width.
#catlinks	The container for the category links.	Unlike most "boxes", this one should have some top margin.

Footer elements

Selector	Description	Recommendations
div#footer	The wiki page footer, including copyright text and links to About, Disclaimers, etc.
#footer #footer-places	The list of disclaimer links in the footer.
#footer #footer-places li a	Anchors within the above list in the footer.	Use this if you want the anchors (links) in the footer to be a different colour than links elsewhere,

General interface elements

Selector	Description	Recommendations
input[type="text"], input[type="password"], input[type="file"], select, textarea	Various text and list boxes found throughout MediaWiki.
button, input[type="submit"], input[type="button"], input[type="reset"]	The various buttons found throughout MediaWiki.
.usermessage	The "You have new messages" box that appears after your user talk page is edited.
div.mw-warning	Some rare warning/error messages.
div.mw-warning-with-logexcerpt	A box that appears on deleted and protected pages when being edited that shows one or more log entries.
div#content fieldset	Boxes with controls that appear on many pages. One obvious example is the one on of Special:RecentChanges that contains link to adjust what entries are shown.	Unfortunately, box-shadows appear at the edge of the actual box above the legend, not where the top border appears.
div#content fieldset legend	The title for a fieldset box.
.error	Red text displayed on some kind of error.	On darker skins, you may want to make this a lighter red or pink shade.
.errorbox	Text in a red box displayed on some kind of error.	Text is black on a light red background by default. May be out of place in a dark skin.
.warning	Orange text displayed to give some kind of warning.	On darker skins, you may want to make this a lighter orange or yellow shade.
.warningbox	Text in a orange box displayed on some kind of error.	Text is black on a light yellow background by default. May be out of place in a dark skin.
.success	Green text displayed after some action is successful.	On darker skins, you may want to make this a lighter green shade.
.successbox	Text in a green box displayed after a successful action, for example, after saving preferences.	Text is black on a light green background by default. May be out of place in a dark skin.

Page history elements

Selector	Description	Recommendations
#pagehistory li	A line in the page history list.	Selected items (below) typically have a border. It's a good idea to add padding to account for the missing border on unselected items. An alternative is a transparent border of the same size.
#pagehistory li.selected	One of the selected lines in the page history list.	This has a border and background by default. On dark skins, these will typically need to be changed to different colors.
table.diff	Container for the diff results and the headers.
td.diff-otitle	The header for the old revision.
td.diff-ntitle	The header for the new revision.
diff-lineno	The line numbers above each change.
td.diff-addedline	A line that was added to the page.
td.diff-addedline .diffchange	Changed text inside a additive change line.
td.diff-deletedline	A line that was removed from the page.
td.diff-deletedline .diffchange	Changed text inside a removal change line.
td.diff-context	Unchanged lines included to provide context.

Search page elements

Selector	Description	Recommendations
.mw-search-formheader	Box on search page containing the "Content pages", "Multimedia", etc. links.
.mw-search-formheader div.search-types ul li.current a	The selected search-type.	You'll likely want to change this to match the color scheme. This will certainly need to be changed on dark skins.
fieldset#mw-searchoptions	This is the box containing the advanced search options. Click on "Advanced" to see it.	This has a background and border set by default. The colors should generally be changed in a dark skin. If you adjusted margins on .mw-seatch-formheader, the top margin for this should be the negative of .mw-seatch-formheader's bottom margin. Note that !important is necessary for the top margin to take effect.
fieldset#mw-searchoptions h4	The heading inside the advanced search options box.	If you added any borders to h4 elements, it often looks better to remove them here.
fieldset#mw-searchoptions div.divider	The horizontal line inside the advanced search options box.	It's usually best to set this to same styles as hr.

File/image page elements

Selector	Description	Recommendations
ul#filetoc	Top bar of links on file pages.	Has a default background and border that may need to be overridden, especially for darker skins.
table.mw_metadata	The metadata table found at the bottom of file pages.	Generally, you can use the same styles you use for table.wikitable here.
table.mw_metadata th	The header (left) cells in the metadata table found at the bottom of file pages.	Generally, you can use the same styles you use for table.wikitable th here.
table.mw_metadata td	The value (right) cells in the metadata table found at the bottom of file pages.	Generally, you can use the same styles you use for table.wikitable td here.

Various special page elements

Selector	Description	Recommendations
.TablePager	A table type seen on special pages like Special:AllMessages.	Typically, the same styles used for table.wikitable will work fine.
.TablePager th	Header cells for a table type seen on special pages like Special:AllMessages.	Typically, the same styles used for table.wikitable th will work fine.
.TablePager td	Regular cells for a table type seen on special pages like Special:AllMessages.	Typically, the same styles used for table.wikitable td will work fine.
.TablePager tr:hover td	Regular cells for a table type seen on special pages like Special:AllMessages when the cursor hovers over the row.	By default, the background color changes slightly when hovering over a row in .TablePager tables. If you changed the background color for the regular cells or the table, you should also change this to a color that's mildly different.

AbuseFilter elements

The AbuseFilter extension is installed by default. It doesn't add much custom CSS, but the tables on the examine/details page for an edit in the abuse log may need some work, especially on dark skins.

Selector	Description	Recommendations
table.mw-abuselog-details	Table seen on examine/detail pages that show abuse filter variables.	The styles used for table.wikitable are usually fine here.
table.mw-abuselog-details tr th	Header cells for the table seen on examine/detail pages.	The styles used for table.wikitable th are usually fine here.
table.mw-abuselog-details tr td	Regular cells for the table seen on examine/detail pages.	The styles used for table.wikitable td are usually fine here.

Page-specific styling

Each MediaWiki page has a unique class name assigned to the <body> element that is based on the current page title. In most cases this will be page- (or rootpage- if any subpages need to be targeted along with the page) followed immediately by a variation of the page title where spaces and other special characters are replaced with underscores (_). The exact class name may be obtained by using the browser's view-source feature on the page for which style changes are needed.

Here is an example of one of the most common use cases for this feature, hiding the first header on a page (which contains the page name itself):

.page-MediaWiki_CSS h1:first-child
 {
  display: none;
 }

See also

• Mobile CSS