Styling the preferences page

From Gamepedia Help Wiki
Jump to: navigation, search

The page provides a guide to styling Special:Preferences. Some wikis may wish to to re-style this special page to better match the wiki's skin.

One important note about styling the preferences page is that user stylesheets do not apply on the preferences page, so pending changes must be tested in either the main wiki stylesheets, or more preferably, using browser developer tools.

Selector guide[edit | edit source]

Selector Description Recommendations
.mediawiki #preferences
Container for the preferences options.
  • It's necessary to consider how the page looks like Javascript enabled and disabled. Some styles on this element may appear differently with Javascript off.
.mediawiki #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 .mediawiki #content fieldset.
  • border, margin, and padding require !important to show up with Javascript enabled.
  • Having 0 horizontal margin is recommended.
.mediawiki #preferences legend
Title for each section of preferences options.
.mediawiki #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.
.client-js .mediawiki #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.
.client-js .mediawiki #preftoc li
Element containing a single tab link.
  • This has a background by default that may need to be overridden, especially on dark skins.
.client-js .mediawiki #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.
.client-js .mediawiki #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.
.client-js .mediawiki #preftoc li.selected a
The currently selected tab link.
  • On many skins, the color may need adjustment, especially dark skins.

Sample CSS[edit | edit source]

The following is sample code for a simple recolor of the preferences page. You may wish to change the colors in the CSS to match your wiki theme.

/**** PREFERENCES ****/
/* reset some default styles */
.client-js #preferences > fieldset,
.mediawiki #preferences {
	background: transparent;
}

.client-js #preferences fieldset > fieldset {
	padding: 0;
}

.client-js .mediawiki #preferences > fieldset.prefsection {
	border-top: 0;
}

/* border and background for main preferences area */
.client-js #preferences {
	border: 1px solid #4f3169;
	margin: 0;
	background: #1c1c1c;
}

/* reset background and margin on preference tab container */
.client-js .mediawiki #preftoc {
	background: transparent;
	margin: 0.25em;
}

/* sizing and aesthetic styles on preference tabs */
.client-js .mediawiki #preftoc li {
	border: 1px solid #4f3169;
	background: #1c1c1c;
	border-radius: 2px;
	margin: 0 0.25em;
	height: 1em;
	padding: 0.5em;
	line-height: 1;
}

/* background on selected tab */
.client-js .mediawiki #preftoc li.selected {
	background: #7f4fa8;
}

/* font color on preference tabs */
.client-js .mediawiki #preftoc li a,
.client-js .mediawiki #preftoc li a:active {
	color: #eee;
	padding: 0;
}

/* font color on selected preference tab */
.client-js .mediawiki #preftoc li.selected a {
	background: transparent;
	color: #fff;
}

/* font color on preference hints, may be necessary for readability on gray backgrounds */
#preferences td.htmlform-tip {
	color: #fff;
}

/* font color on preference section headings */
.mediawiki #preferences legend {
	color: #fff;
}

/* margin on preference section headings */
.client-js .mediawiki #preferences legend {
	margin-left: 1em;
}

/* border for preference subsections */
.client-js .mediawiki #preferences > fieldset,
.client-js .mediawiki #preferences fieldset.prefsection fieldset {
	border: 0;
	border-top: 1px solid #4f3169;
	margin-top: 0.25em;
}

/**** preferences no js fallbacks, match colors with rest ****/
/* background for main preference sections for no js */
#preferences > fieldset {
	background: #1c1c1c;
}

/* margin and border for no js */
.mediawiki #preferences fieldset {
	border: 1px solid #4f3169;
}

Result[edit | edit source]

Preferences style example.png