Hello there! We are conducting a survey to better understand the user experience in making a first edit. If you have ever made an edit on Gamepedia, please fill out the survey. Thank you!

MediaWiki CSS

From Gamepedia Help Wiki
Jump to: navigation, search

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[edit | edit source]

Logo and sidebar elements[edit | edit source]

Preferences page elements[edit | edit source]

Wiki editor elements[edit | edit source]

Content elements[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]