MediaWiki CSS

Header elements

Identifier	Description	Software defaults	Recommendations
div#mw-page-base	Empty header element that influences top position of sidebar and content.		This is one available option for a background for the header. Useful if the desired background size will be different than that of #mw-head. Adjusting height, vertical margins, or vertical padding will adjust top position of sidebar and content.
div#mw-head-base	Empty header element that influences top position of sidebar and content.		Set display: none; and add extra height to #mw-page-base to avoid inconsistent vertical positioning of sidebar and content between browsers. Important if you need pixel-perfect positioning.
div#mw-head	Actual container for the page navigation bar.		This is not in normal flow and won't affect content or sidebar position. It's easiest to set this to the same height as #mw-page-base, but margins or positioning can be used if border, backgrounds, or other effects are desired around the entire page actions bar. If using non-standard content width, you'll probably need to set a width on this to match. In some cases, this may require a combination of positioning, matgins, padding, and/or width to achieve the correct effect.
#left-navigation	Links for the content and talk page.		Position is relative to #mw-head. Use top and left to adjust position. left will usually be set to the width of the sidebar or greater, unless you choose to adjust #mw-head's position or margins instead (useful for certain effects). Absolute units like pixels are recommended here to avoiding overlapping the logo/sidebar when users have nonstandard font settings. Relative units are used by default.
#right-navigation	Container for page actions links and search controls.		Adjust position using margins.
div.vectorTabs	Containers for: the content and talk page links; and the view, edit, and history links.		Be careful when making adjustments to margins, paddings, or font sizes in these elements, as they may end up overlapping when the browser window is narrow. The Vector extension adds Javascript that can move links into the hover menu when there isn't enough width, but it does not consider margins or padding. Has a background by default. You'll likely need to remove or override it.
div.vectorTabs li	An outer container for a single page tab link.		Has a background by default. You'll likely need to remove or override it.
div.vectorTabs li.selected	An outer container for a selected single page tab link.		Has a background by default. You'll likely need to remove or override it.
div.vectorTabs li span	An inner container for a single page tab link.		Has a background by default. You'll likely need to remove or override it.
div.vectorTabs li span a	A page tab link.		Has height set in relative units. This may need to be changed to absolute units depending on height of the header.
div.vectorTabs li.new span a	A page tab link for a page that doesn't exist.
div.vectorMenu	Container for the hover menu and its arrow. Also has the background image for the arrow.		If the height for the tab links has been adjusted, height here should generally be adjusted to match.
div.vectorMenu h5	Left border for the hover menu arrow provided by background image.		The background will likely need to be removed.
div.vectorMenu h5 a	Provides a background for the hover image.		The background will likely need to be removed.
div#p-cactions div.menu	Container for the hover menu (only the part that appears when hovering over the arrow).		If desired, adjust its position with left, top, right, or bottom. Set a high z-index to prevent the menu from closing while the mouse cursor is still over it. A really high value like 3000 gives you plenty of room to adjust z-index elsewhere if you so desire.
div#p-cactions div.menu ul	The list of links in the hover menu.		The default background and border are defined here and thus best overridden here if desired.
div#p-cactions div.menu ul li a	A link in the hover menu.		Spacing between the links can be adjusted with vertical padding or margins.
#p-search	Outer container for the search box and buttons.
#p-search form	Inner container for the search box and buttons.		If trying to adjust the vertical position of the search box and buttons, start by adjusting line-height. This can help improve positioning across browsers due to line-height's vertical centering effect. It is sometimes helpful to make div.vectorTabs taller, move #left-navigation and #right-navigation up by the same amount, add that amount of top margin to the actual tabs, and allow #p-search to be the same height as div.vectorTabs without any vertical margins or padding. This is helpful if you'd prefer larger font sizes to expand the search box up rather than down.
#searchInput	The search box		Useful if you want the search box to have a different appearance than other textboxes. Otherwise, it's best to leave it alone.
#p-search input[type="submit"], #p-search input[type="button"], #p-search input[type="reset"]	The search buttons		Useful if you want the search buttons to have a different appearance than other buttons. Otherwise, it's best to leave this alone.
.os-suggest	The search suggestions popup box.
.os-suggest-result	A single search suggestion item.		Has a background color set by default. If you're styling search suggestions, you'll probably need to override it.
.os-suggest-result-hl	The highlighted single search suggestion item.

Logo and sidebar elements

Identifier	Description	Software defaults	Recommendations
div#mw-panel	The sidebar, including the logo.		Set to same width as logo or make larger. Reposition using margins if needed.Absolute units like pixels are recommended here to avoiding overlapping the logo/sidebar when users have nonstandard font settings. Relative units are used by default. overflow: visible will ensure logo remains visible if it is positioned partly or fully outside the sidebar.
#p-logo	Container for the logo link. Located at top of div#mw-panel.		Set to same width and height as logo. Reposition using top and left.
#p-logo a	The logo link, containing the logo as a background.		Set to same width and height as logo.
div#mw-panel div.portal	Container for a single header and its associated links.
div#mw-panel div.portal h5	Header for a list of links in the sidebar.
div#mw-panel div.portal div.body	Container for a single list of links in the sidebar.
div#mw-panel div.portal div.body ul li a	Links in the sidebar.

Content elements

Identifier	Description	Software defaults	Recommendations
#pageWrapper	Outer wrapper around page content and footer.		The left padding for this element is what makes space for the sidebar. Absolute units like pixels are recommended here to avoiding overlapping the logo/sidebar when users have nonstandard font settings. Relative units are used by default. 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.		This will also pick up styles for h1, but you may want less top margin for this than headings in the actual text.
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.
div#content #firstHeading	The page title.		This will also pick up styles for h1, but you may want less top margin for this than headings in the actual text.
span.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.
.toc, #toc	Table of contents box.		This is, for some reason, a single-cell table, unlike most boxes which are simply divs, but the default border and background are applied here. Note that some CSS values, like width: auto;, work differently on tables than they do on divs. The contents of this box are inside a tr and td. They have no styles by default, but it's possible someone may have added them. It's probably best to move any such styles to this instead.
div#content #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, #toc .toctoggle	Table of contents heading.		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 th	Table header cells in tables with the wikitable class.		Has a background by default that will often need to be overridden.
table.wikitable 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 down 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.
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.

General interface elements

Identifier	Description	Software defaults	Recommendations
div#footer	The wiki page footer, displaying links to Privacy Policy, Disclaimers, etc.
div#footer ul li	List elements inside the footer.		You'll need to set the footer text color again here.

General interface elements

Identifier	Description	Software defaults	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	Not entirely sure where this shows up...
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.

Search page elements

Identifier	Description	Software defaults	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.

Page history elements

Identifier	Description	Software defaults	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.

Diff page elements

Identifier	Description	Software defaults	Recommendations
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.
td.diff-addedline	A line that was added to the page.		This has a green background by default. In dark skins, switching to a dark green background color and a light text color is highly recommended.
td.diff-deletedline	A line that was removed from the page.		This has a yellow background by default. In dark skins, switching to a dark yellow background color and a light text color is highly recommended.
td.diff-context	Unchanged lines included to provide context.		This has a light gray background by default. In dark skins, switching to a dark gray background color and a light text color is highly recommended.
.diffchange	Changed text inside a line.		This is a medium red by default. In dark skins, switching to a light red/pink shade is highly recommended.

File/image page elements

Identifier	Description	Software defaults	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/code>	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.

Preferences page elements

Identifier	Description	Software defaults	Recommendations
div#preferences	Container for the preferences options.		It's necessary to consider how the page looks like Javascript enabled and disabled. It's recommended that this element get no visual styles, no margin, and no padding for this reason.
div#preferences fieldset	Container for a "tab page" of preferences options.		With Javascript enabled, only one "page" of options appears at a time, and this fieldset contains it. With Javascript disabled, all "pages" are shown at once vertically arranged. These will also pick up styles from div#content fieldset. border, margin, and padding requite !important to show up with Javascript enabled. Having 0 horizontal margin is recommended.
div#preferences fieldset legend	Title for a "tab page" of preferences options.		When Javascript is enabled, this does not show up.
div#preferences fieldset fieldset	Container for the inner groups of options inside a tab page.
#preferences td.htmlform-tip	Small help text in the preferences options.		By default, this is a medium gray on a white background. It should be adjusted to an appropriate medium color for the skin.
#preftoc	The "tab page" links for the pages of options.		This only appears when Javascript is enabled. This has a background by default that may need to be overridden, especially on dark skins.
#preftoc li	Element containing a single tab link.		This has a background by default that may need to be overridden, especially on dark skins.
#preftoc li a	The actual tab link.		This has the link color set to the standard blue by default. #preftoc li a and #preftoc li a:visited are generally best set to the same color.
#preftoc li.selected	Element containing the currently selected tab link.		This has a background by default that may need to be overridden, especially on dark skins.
#preftoc li.selected a	The currently selected tab link.		On many skins, the color may need adjustment, especially dark skins. Setting this to your context text color is a good idea.

Various special page elements

Identifier	Description	Software defaults	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.

Identifier	Description	Software defaults	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.

Wikieditor elements

The Wikieditor extension is installed by default. It's enabled for a user when the beta features under "Editing" are checked in preferences, which they are by default.

Identifier	Description	Software defaults	Recommendations
.wikiEditor-ui	Container for the edit toolbars and textarea.
.wikiEditor-ui-controls	Container for the top bar containing the tabs.
.wikiEditor-ui-tabs	Container for the tabs.
.wikiEditor-ui-tabs .current	The selected tab.
.wikiEditor-ui-left	Contains the tab page contents.
.wikiEditor-ui-top	Outer container for the toolbars.
.wikiEditor-ui-toolbar	Inner container for the toolbars.
.wikiEditor-ui-toolbar .sections .section	A sub-toolbar.
.wikiEditor-ui-text	Container for the editing textarea.
.wikiEditor-preview-contents	Container for the preview area.
.ui-widget, .ui-widget-content	A wikieditor dialog box		Font styles are applied to .ui-widget by default. Borders and background styles are applied to .ui-widget-content by default. Both classes generally seem to be applied to the same div, but it may be best to keep font styles on .ui-widget and background, border, and color styles on .ui-widget-content to be safe. Only use fully or near fully-opaque backgrounds.
.ui-widget-header	Header for a wikieditor dialog box.
.wikiEditor-toolbar-dialog .ui-dialog-content input[type="text"]	Textboxes in a wikieditor dialog box.
.wikieditor-toolbar-dialog-hint	Faint text inside a textbox that explains what information goes in there.		This text should be a little faint against the background, but still easily readable.
.ui-button.ui-state-default	A button in a dialog box.
.ui-button.ui-state-focus	A button in a dialog box that has keyboard focus.
.ui-button.ui-state-hover	A button in a dialog box that the mouse cursor is hovering over.
.ui-button.ui-state-active	A button in a dialog box that's being activated.

Semantic MediaWiki elements

Styling these is only important when the wiki has Semantic MediaWiki installed. You can check this at the wiki's Special:Version page.

Identifier	Description	Software defaults	Recommendations
#other_options div	A container for a row of options in the other options section in Special:Ask.		Is given a alternating light-gray/white background by default. This can render text unreadable on many skins. Setting background: transparent !important; is an easy fix.
#other_options div div	A container for a group of options in the other options section in Special:Ask.
table.smwtable	The table returned in format=table queries.		The same styles used for table.wikitable will usually work fine here.
table.smwtable th	Header cells in the table returned in format=table queries.		The same styles used for table.wikitable th will usually work fine here.
table.smwtable td	Regular cells in the table returned in format=table queries.		The same styles used for table.wikitable td will usually work fine here.
.smwfact	The outer container for a factbox. By default, these appear only when previewing pages that have data for some properties, located at the bottom.		Has a very light gray background by default. On darker skins, this typically needs to be changed.
div.smwfact table	The table inside the factbox.		Has a very light gray background by default. On darker skins, this typically needs to be changed. This has invisible borders by default, so it isn't as obvious this is a table, but it looks fine without the borders. The exception is the top border, which is a light gray dotted line. You may want to change this to fit in with your skin.
div.smwfact table tr	A table row inside the factbox.		Has a very light gray background by default. On darker skins, this typically needs to be changed.
div.smwfact table tr td	A table cell inside the factbox.		Has a very light gray background by default. On darker skins, this typically needs to be changed. Yes, the same background is assigned to the table, its rows, and its cells. If you want to change it, all of them need to be changed.
.smwrdflink	The RDF link in Semantic MediaWiki factboxes.		This is usually a medium/light gray. It is meant to be somewhat faint, but should still be readable against your background.