Kittymmeow (talk | contribs) No edit summary |
BaRaN6161TURK (talk | contribs) (+TR) |
||
| (11 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
{{css nav}} |
{{css nav}} |
||
| + | {{tocright}} |
||
| − | Please note that the list of identifiers below is not exhaustive. The list is only meant as a guide to the more commonly [[Skin customization|styled]] wiki page elements. |
||
| + | 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 [https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools 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== |
==Header elements== |
||
| + | {{see|Styling the VectorTabs}} |
||
| − | {| class="wikitable" |
||
| − | |- |
||
| − | !Identifier |
||
| − | !Description |
||
| − | !Recommendations |
||
| − | |- |
||
| − | |<code>div#mw-page-base</code> |
||
| − | |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 <code>#mw-head</code>. |
||
| − | *Adjusting height, vertical margins, or vertical padding will adjust top position of sidebar and content. |
||
| − | |- |
||
| − | |<code>div#mw-head-base</code> |
||
| − | |Empty header element that influences top position of sidebar and content. |
||
| − | | |
||
| − | *'''Set <code>display: none;</code> and add extra height to <code>#mw-page-base</code> to avoid inconsistent vertical positioning of sidebar and content between browsers. Important if you need pixel-perfect positioning.''' |
||
| − | |- |
||
| − | |<code>div#mw-head</code> |
||
| − | |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 <code>#mw-page-base</code>, 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, margins, padding, and/or width to achieve the correct effect. |
||
| − | |- |
||
| − | |<code>#left-navigation</code> |
||
| − | |Links for the content and talk page. |
||
| − | | |
||
| − | *Position is relative to #mw-head. |
||
| − | *Use <code>top</code> and <code>left</code> to adjust position. |
||
| − | *<code>left</code> will usually be set to the width of the sidebar or greater, unless you choose to adjust <code>#mw-head</code>'s position or margins instead (useful for certain effects). |
||
| − | *'''Absolute units like pixels are recommended here to avoid overlapping the logo/sidebar when users have nonstandard font settings. ''Relative'' units are used by default.''' |
||
| − | |- |
||
| − | |<code>#right-navigation</code> |
||
| − | |Container for page actions links and search controls. |
||
| − | | |
||
| − | *Adjust position using margins. |
||
| − | |- |
||
| − | |<code>div.vectorTabs</code> |
||
| − | |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. |
||
| − | |- |
||
| − | |<code>div.vectorTabs li</code> |
||
| − | |An outer container for a single page tab link. |
||
| − | | |
||
| − | *Has a background by default. You'll likely need to remove or override it. |
||
| − | |- |
||
| − | |<code>div.vectorTabs li.selected</code> |
||
| − | |An outer container for a selected single page tab link. |
||
| − | | |
||
| − | *Has a background by default. You'll likely need to remove or override it. |
||
| − | |- |
||
| − | |<code>div.vectorTabs li span</code> |
||
| − | |An inner container for a single page tab link. |
||
| − | | |
||
| − | *Has a background by default. You'll likely need to remove or override it. |
||
| − | |- |
||
| − | |<code>div.vectorTabs li span a</code> |
||
| − | |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. |
||
| − | |- |
||
| − | |<code>div.vectorTabs li.new span a</code> |
||
| − | |A page tab link for a page that doesn't exist. |
||
| − | | |
||
| − | |- |
||
| − | |<code>div.vectorMenu</code> |
||
| − | |Container for a hover menu in the top bar 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. |
||
| − | |- |
||
| − | |<code>div#p-cactions</code> |
||
| − | |Container for the hover menu with the page actions (such as delete) and its arrow. Also has the background image for the arrow. |
||
| − | | |
||
| − | *If the menu arrow is changed, it's a good idea to set this to the width of the menu arrow image or greater. |
||
| − | |- |
||
| − | |<code>div#p-sharing</code> |
||
| − | |Container for the share hover menu and its arrow. Also has the background image for the arrow. |
||
| − | | |
||
| − | *Setting <code>width</code> to <code>auto</code> may be necessary to get the arrow and menu label to be on the same line. |
||
| − | |- |
||
| − | |<code>div.vectorMenu h4</code> |
||
| − | |Label for a hover menu. |
||
| − | | |
||
| − | *These are normally empty and not displayed, but the Share menu added by the Social extension does display such a label. |
||
| − | *The height of this influences the vertical position of the hover menu if it's displayed and greater than the height of <code>div.vectorMenu h5</code>. If <code>width</code> of <code>div#p-sharing</code> or <code>div.vectorMenu</code> is small enough, the position of the hover menu may be moved by the sum of the two heights. |
||
| − | *The left or right margin may need adjustment so it doesn't overlap the menu arrow. This may require <code>!important</code> to take effect. |
||
| − | |- |
||
| − | |<code>div.vectorMenu h5</code> |
||
| − | |Left border for the hover menu arrow provided by background image. |
||
| − | | |
||
| − | *The background will likely need to be removed. |
||
| − | *The height of this influences the vertical position of the hover menu if it's greater than the height of <code>div.vectorMenu h4</code> or if <code>div.vectorMenu h4</code> isn't displayed. |
||
| − | |- |
||
| − | |<code>div.vectorMenu h5 a</code> |
||
| − | |Provides a background for the hover image. |
||
| − | | |
||
| − | *The background will likely need to be removed. |
||
| − | |- |
||
| − | |<code>div#p-cactions div.menu</code> |
||
| − | |Container for the hover menu (only the part that appears when hovering over the arrow). |
||
| − | | |
||
| − | *If desired, adjust its position with <code>left</code>, <code>top</code>, <code>right</code>, or <code>bottom</code>. |
||
| − | *'''Set a high <code>z-index</code> 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 <code>z-index</code> elsewhere if you so desire.''' |
||
| − | |- |
||
| − | |<code>div#p-sharing div#socialIconImages</code> |
||
| − | |Container for the sharing icons inside the share hover menu. |
||
| − | | |
||
| − | *Adjusting the width may be needed to get the icons centered. It is 250px by default. |
||
| − | |- |
||
| − | |<code>div#p-sharing div#socialIconImages a</code> |
||
| − | |The individual sharing icons inside the share hover menu. |
||
| − | | |
||
| − | |- |
||
| − | |<code>div#p-sharing</code> |
||
| − | |Container for the share hover menu and its arrow. Also has the background image for the arrow. |
||
| − | | |
||
| − | *Setting <code>width</code> to <code>auto</code> may be necessary to get the arrow and menu label to be on the same line. |
||
| − | |- |
||
| − | |<code>div#p-cactions div.menu ul li a</code> |
||
| − | |A link in the hover menu. |
||
| − | | |
||
| − | *Spacing between the links can be adjusted with vertical padding or margins. |
||
| − | |- |
||
| − | |<code>#p-search</code> |
||
| − | |Outer container for the search box and buttons. |
||
| − | | |
||
| − | |- |
||
| − | |<code>#p-search form</code> |
||
| − | |Inner container for the search box and buttons. |
||
| − | | |
||
| − | *If trying to adjust the vertical position of the search box and buttons, start by adjusting <code>line-height</code>. This can help improve positioning across browsers due to <code>line-height</code>'s vertical centering effect. |
||
| − | *It is sometimes helpful to make <code>div.vectorTabs</code> taller, move <code>#left-navigation</code> and <code>#right-navigation</code> up by the same amount, add that amount of top margin to the actual tabs, and allow <code>#p-search</code> to be the same height as <code>div.vectorTabs</code> 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. |
||
| − | |- |
||
| − | |<code>#searchInput</code> |
||
| − | |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. |
||
| − | |- |
||
| − | |<code>#p-search input[type="submit"], #p-search input[type="button"], #p-search input[type="reset"]</code> |
||
| − | |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. |
||
| − | |- |
||
| − | |<code>.os-suggest</code> |
||
| − | |The search suggestions popup box. |
||
| − | | |
||
| − | |- |
||
| − | |<code>.os-suggest-result</code> |
||
| − | |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. |
||
| − | |- |
||
| − | |<code>.os-suggest-result-hl</code> |
||
| − | |The highlighted single search suggestion item. |
||
| − | | |
||
| − | |} |
||
| − | |||
==Logo and sidebar elements== |
==Logo and sidebar elements== |
||
| + | {{See|Styling the sidebar}} |
||
| − | {| class="wikitable" |
||
| + | ==Preferences page elements== |
||
| − | |- |
||
| + | {{see|Styling the preferences page}} |
||
| − | !Identifier |
||
| + | ==Wiki editor elements== |
||
| − | !Description |
||
| + | {{see|Styling the wiki editor}} |
||
| − | !Recommendations |
||
| + | {{clear}} |
||
| − | |- |
||
| − | |<code>div#mw-panel</code> |
||
| − | |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 avoid overlapping the logo/sidebar when users have nonstandard font settings. ''Relative'' units are used by default.''' |
||
| − | *<code>overflow: visible</code> will ensure logo remains visible if it is positioned partly or fully outside the sidebar. |
||
| − | |- |
||
| − | |<code>#p-logo</code> |
||
| − | |Container for the logo link. Located at top of <code>div#mw-panel</code>. |
||
| − | | |
||
| − | *Set to same width and height as logo. Reposition using <code>top</code> and <code>left</code>. |
||
| − | |- |
||
| − | |<code>#p-logo a</code> |
||
| − | |The logo link, containing the logo as a background. |
||
| − | | |
||
| − | *Set to same width and height as logo. |
||
| − | |- |
||
| − | |<code>div#mw-panel div.portal</code> |
||
| − | |Container for a single header and its associated links. |
||
| − | | |
||
| − | |- |
||
| − | |<code>div#mw-panel div.portal h5</code> |
||
| − | |Header for a list of links in the sidebar. |
||
| − | | |
||
| − | |- |
||
| − | |<code>div#mw-panel div.portal div.body</code> |
||
| − | |Container for a single list of links in the sidebar. |
||
| − | | |
||
| − | |- |
||
| − | |<code>div#mw-panel div.portal div.body ul li a</code> |
||
| − | |Links in the sidebar. |
||
| − | | |
||
| − | |- |
||
| − | |<code>div#mw-panel div#p-socialProfiles</code> |
||
| − | |The "portal" for the social icons in the sidebar. |
||
| − | | |
||
| − | |- |
||
| − | |<code>div#mw-panel div#p-socialProfiles h5</code> |
||
| − | |The heading for the social portal, normally empty. |
||
| − | | |
||
| − | *Setting <code>display: none</code> is recommended. |
||
| − | |- |
||
| − | |<code>div#mw-panel div#p-socialProfiles div.body</code> |
||
| − | |The "body" for the social portal in the sidebar. |
||
| − | | |
||
| − | *Any adjustment to the left margin may require <code>!important</code>. The left margin is 10px by default and may need adjustment. |
||
| − | *If you want to center the icons |
||
| − | |- |
||
| − | |<code>div.socialSidebar</code> |
||
| − | |A container around the social icons. |
||
| − | | |
||
| − | *Setting the side margins to <code>auto</code> will center the icons if desired, assuming the margins of <code>div#mw-panel div#p-socialProfiles div.body</code> are even. |
||
| − | |- |
||
| − | |<code>div.socialLink</code> |
||
| − | |The individual social links. |
||
| − | | |
||
| − | |} |
||
| − | |||
==Content elements== |
==Content elements== |
||
| − | {| class="wikitable" |
+ | {| class="wikitable mw-collapsible mw-collapsed" style="width:100%;" |
|- |
|- |
||
| + | !Selector |
||
| − | !Identifier |
||
!Description |
!Description |
||
!Recommendations |
!Recommendations |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>#pageWrapper</syntaxhighlight> |
|Outer wrapper around page content and footer. |
|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 avoid 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. |
*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. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>div#content</syntaxhighlight> |
|Container for the page content. |
|Container for the page content. |
||
| |
| |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>div#content #firstHeading</syntaxhighlight> |
|The page title. |
|The page title. |
||
| |
| |
||
| − | *This will also pick up styles for <code>h1</code>, but you may want less top margin for this than headings in the actual text. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>div#content h1, div#content h2, div#content h3, div#content h4, div#content h5, div#content h6</syntaxhighlight> |
|Headings in the article. |
|Headings in the article. |
||
| |
| |
||
| Line 254: | Line 37: | ||
*Due to strange behavior in many versions of IE, if you use <code>overflow: auto</code>, you'll need around 5px of <code>padding-bottom</code> to prevent scroll bars from appearing on some headings. |
*Due to strange behavior in many versions of IE, if you use <code>overflow: auto</code>, you'll need around 5px of <code>padding-bottom</code> to prevent scroll bars from appearing on some headings. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>.mw-editsection</syntaxhighlight> |
|The edit links in headings. |
|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. |
*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. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>div#toc, div.toc</syntaxhighlight> |
|Table of contents box. |
|Table of contents box. |
||
| |
| |
||
| − | *This is, for some reason, a single-cell <code>table</code>, unlike most boxes which are simply <code>div</code>s, but the default border and background are applied here. Note that some CSS values, like <code>width: auto;</code>, work differently on <code>table</code>s than they do on <code>div</code>s. |
||
| − | *The contents of this box are inside a <code>tr</code> and <code>td</code>. 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. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>div#content .toc .toctitle h2</syntaxhighlight> |
|Table of contents heading. |
|Table of contents heading. |
||
| |
| |
||
*Removing any heading border or background is often a good idea for this, depending on the skin design. |
*Removing any heading border or background is often a good idea for this, depending on the skin design. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>.toctoggle</syntaxhighlight> |
| − | |Table of contents |
+ | |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. |
*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. |
||
|- |
|- |
||
| + | |<syntaxhighlight lang=css>hr</syntaxhighlight> |
||
| − | |<code>hr</code> |
||
|General horizontal line. |
|General horizontal line. |
||
| |
| |
||
*Most likely, this will be styled with <code>border-bottom</code>, though there are also other ways. |
*Most likely, this will be styled with <code>border-bottom</code>, though there are also other ways. |
||
|- |
|- |
||
| + | |<syntaxhighlight lang=css>ul</syntaxhighlight> |
||
| − | |<code>ul</code> |
||
|General unordered lists. |
|General unordered lists. |
||
| |
| |
||
*You can override the standard <code>list-item-image</code> bullet here. |
*You can override the standard <code>list-item-image</code> bullet here. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>table.wikitable</syntaxhighlight> |
|Tables in content with the <code>wikitable</code> class. |
|Tables in content with the <code>wikitable</code> class. |
||
| |
| |
||
*Has a background by default that will often need to be overridden. |
*Has a background by default that will often need to be overridden. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>table.wikitable > * > tr > th, table.wikitable > tr > th</syntaxhighlight> |
|Table header cells in tables with the <code>wikitable</code> class. |
|Table header cells in tables with the <code>wikitable</code> class. |
||
| |
| |
||
*Has a background by default that will often need to be overridden. |
*Has a background by default that will often need to be overridden. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>table.wikitable > * > tr > td</syntaxhighlight> |
|Table data cells in tables with the <code>wikitable</code> class. |
|Table data cells in tables with the <code>wikitable</code> class. |
||
| |
| |
||
*Has a background by default that will often need to be overridden. |
*Has a background by default that will often need to be overridden. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>table.jquery-tablesorter th.headerSort</syntaxhighlight> |
|Sortable table header cells. |
|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 <code>right center</code>. This is typically necessary on dark skins. |
*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 <code>right center</code>. This is typically necessary on dark skins. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>table.jquery-tablesorter th.headerSortDown</syntaxhighlight> |
|Sortable table header cells. |
|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 <code>right center</code>. This is typically necessary on dark skins. |
*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 <code>right center</code>. This is typically necessary on dark skins. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>table.jquery-tablesorter th.headerSortUp</syntaxhighlight> |
|Sortable table header cells. |
|Sortable table header cells. |
||
| |
| |
||
| − | *The ''' |
+ | *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 <code>right center</code>. This is typically necessary on dark skins. |
|- |
|- |
||
| + | |<syntaxhighlight lang=css>table.jquery-tablesorter th.headerSortDown</syntaxhighlight> |
||
| − | |<code>ul.gallery</code> |
||
| + | |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 <code>right center</code>. This is typically necessary on dark skins. |
||
| + | |- |
||
| + | |<syntaxhighlight lang=css>ul.gallery</syntaxhighlight> |
||
|Container for a standard image gallery. |
|Container for a standard image gallery. |
||
| |
| |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>li.gallerybox</syntaxhighlight> |
|Outer container for an image in a standard image gallery. Contains image and caption. |
|Outer container for an image in a standard image gallery. Contains image and caption. |
||
| |
| |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>li.gallerybox div.thumb</syntaxhighlight> |
|Inner container for an image in a standard image gallery. Contains just the image. |
|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. |
*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. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>div.gallerytext</syntaxhighlight> |
|Caption for an image in a standard image gallery. |
|Caption for an image in a standard image gallery. |
||
| |
| |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>.thumb</syntaxhighlight> |
|Invisible outer container for a thumbnail created using the <code>thumb</code> argument in an image link. |
|Invisible outer container for a thumbnail created using the <code>thumb</code> argument in an image link. |
||
| |
| |
||
| Line 338: | Line 124: | ||
*Apply any margin adjustments to <code>.thumb.tleft</code> and <code>.thumb.tright</code> instead. |
*Apply any margin adjustments to <code>.thumb.tleft</code> and <code>.thumb.tright</code> instead. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>.thumb.tleft</syntaxhighlight> |
|Invisible outer container for a <code>thumb</code> that's floated to the left. |
|Invisible outer container for a <code>thumb</code> 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. |
*Margin adjustments should be done here. Be sure to leave some right margin to keep some space between thumbnails and text. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>.thumb.tright</syntaxhighlight> |
|Invisible outer container for a <code>thumb</code> that's floated to the right. |
|Invisible outer container for a <code>thumb</code> 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. |
*Margin adjustments should be done here. Be sure to leave some left margin to keep some space between thumbnails and text. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>div.thumbinner</syntaxhighlight> |
|Container for a <code>thumb</code> around both image and caption. |
|Container for a <code>thumb</code> around both image and caption. |
||
| |
| |
||
*You may want to change the default border and background for this. |
*You may want to change the default border and background for this. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>html .thumbimage</syntaxhighlight> |
|Container for the <code>thumb</code> image. |
|Container for the <code>thumb</code> image. |
||
| |
| |
||
*You may want to change the default border and background for this. |
*You may want to change the default border and background for this. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>.thumbcaption</syntaxhighlight> |
|The caption for a <code>thumb</code> image. |
|The caption for a <code>thumb</code> image. |
||
| |
| |
||
|- |
|- |
||
| + | |<syntaxhighlight lang=css>pre</syntaxhighlight> |
||
| − | |<code>pre</code> |
||
|Preformatted text. |
|Preformatted text. |
||
| |
| |
||
| Line 368: | Line 154: | ||
*<code>white-space: pre-wrap;</code> and <code>word-wrap: break-word;</code> are highly recommended to prevent long lines from exceeding the content area width. |
*<code>white-space: pre-wrap;</code> and <code>word-wrap: break-word;</code> are highly recommended to prevent long lines from exceeding the content area width. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>#catlinks</syntaxhighlight> |
|The container for the category links. |
|The container for the category links. |
||
| |
| |
||
| Line 375: | Line 161: | ||
==Footer elements== |
==Footer elements== |
||
| − | {| class="wikitable" |
+ | {| class="wikitable mw-collapsible mw-collapsed" style="width:100%;" |
|- |
|- |
||
| + | !Selector |
||
| − | !Identifier |
||
!Description |
!Description |
||
!Recommendations |
!Recommendations |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>div#footer</syntaxhighlight> |
| − | |The wiki page footer, |
+ | |The wiki page footer, including copyright text and links to About, Disclaimers, etc. |
| |
| |
||
|- |
|- |
||
| + | |<syntaxhighlight lang=css>#footer #footer-places</syntaxhighlight> |
||
| − | |<code>div#footer ul li</code> |
||
| − | | |
+ | |The list of disclaimer links in the footer. |
| |
| |
||
| − | *You'll need to set the footer text color again here. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>#footer #footer-places li a</syntaxhighlight> |
| − | |Anchors within the |
+ | |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, |
*Use this if you want the anchors (links) in the footer to be a different colour than links elsewhere, |
||
| Line 397: | Line 182: | ||
==General interface elements== |
==General interface elements== |
||
| − | {| class="wikitable" |
+ | {| class="wikitable mw-collapsible mw-collapsed" style="width:100%;" |
|- |
|- |
||
| + | !Selector |
||
| − | !Identifier |
||
!Description |
!Description |
||
!Recommendations |
!Recommendations |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>input[type="text"], input[type="password"], input[type="file"], select, textarea</syntaxhighlight> |
|Various text and list boxes found throughout MediaWiki. |
|Various text and list boxes found throughout MediaWiki. |
||
| |
| |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>button, input[type="submit"], input[type="button"], input[type="reset"]</syntaxhighlight> |
|The various buttons found throughout MediaWiki. |
|The various buttons found throughout MediaWiki. |
||
| |
| |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>.usermessage</syntaxhighlight> |
|The "You have new messages" box that appears after your user talk page is edited. |
|The "You have new messages" box that appears after your user talk page is edited. |
||
| |
| |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>div.mw-warning</syntaxhighlight> |
| + | |Some rare warning/error messages. |
||
| − | |Not entirely sure where this shows up... |
||
| |
| |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>div.mw-warning-with-logexcerpt</syntaxhighlight> |
|A box that appears on deleted and protected pages when being edited that shows one or more log entries. |
|A box that appears on deleted and protected pages when being edited that shows one or more log entries. |
||
| |
| |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>div#content fieldset</syntaxhighlight> |
|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. |
|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, <code>box-shadow</code>s appear at the edge of the actual box above the <code>legend</code>, not where the top border appears. |
*Unfortunately, <code>box-shadow</code>s appear at the edge of the actual box above the <code>legend</code>, not where the top border appears. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>div#content fieldset legend</syntaxhighlight> |
|The title for a fieldset box. |
|The title for a fieldset box. |
||
| |
| |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>.error</syntaxhighlight> |
|Red text displayed on some kind of error. |
|Red text displayed on some kind of error. |
||
| |
| |
||
*On darker skins, you may want to make this a lighter red or pink shade. |
*On darker skins, you may want to make this a lighter red or pink shade. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>.errorbox</syntaxhighlight> |
|Text in a red box displayed on some kind of error. |
|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. |
*Text is black on a light red background by default. May be out of place in a dark skin. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>.warning</syntaxhighlight> |
|Orange text displayed to give some kind of 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. |
*On darker skins, you may want to make this a lighter orange or yellow shade. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>.warningbox</syntaxhighlight> |
|Text in a orange box displayed on some kind of error. |
|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. |
*Text is black on a light yellow background by default. May be out of place in a dark skin. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>.success</syntaxhighlight> |
|Green text displayed after some action is successful. |
|Green text displayed after some action is successful. |
||
| |
| |
||
*On darker skins, you may want to make this a lighter green shade. |
*On darker skins, you may want to make this a lighter green shade. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>.successbox</syntaxhighlight> |
|Text in a green box displayed after a successful action, for example, after saving preferences. |
|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. |
*Text is black on a light green background by default. May be out of place in a dark skin. |
||
| − | |} |
||
| − | |||
| − | ==Search page elements== |
||
| − | {| class="wikitable" |
||
| − | |- |
||
| − | !Identifier |
||
| − | !Description |
||
| − | !Recommendations |
||
| − | |- |
||
| − | |<code>.mw-search-formheader</code> |
||
| − | |Box on search page containing the "Content pages", "Multimedia", etc. links. |
||
| − | | |
||
| − | |- |
||
| − | |<code>.mw-search-formheader div.search-types ul li.current a</code> |
||
| − | |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. |
||
| − | |- |
||
| − | |<code>fieldset#mw-searchoptions</code> |
||
| − | |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 <code>.mw-seatch-formheader</code>, the top margin for this should be the negative of <code>.mw-seatch-formheader</code>'s bottom margin. Note that <code>!important</code> is necessary for the top margin to take effect. |
||
| − | |- |
||
| − | |<code>fieldset#mw-searchoptions h4</code> |
||
| − | |The heading inside the advanced search options box. |
||
| − | | |
||
| − | *If you added any borders to <code>h4</code> elements, it often looks better to remove them here. |
||
| − | |- |
||
| − | |<code>fieldset#mw-searchoptions div.divider</code> |
||
| − | |The horizontal line inside the advanced search options box. |
||
| − | | |
||
| − | *It's usually best to set this to same styles as <code>hr</code>. |
||
|} |
|} |
||
==Page history elements== |
==Page history elements== |
||
| − | {| class="wikitable" |
+ | {| class="wikitable mw-collapsible mw-collapsed" style="width:100%;" |
|- |
|- |
||
| + | !Selector |
||
| − | !Identifier |
||
!Description |
!Description |
||
!Recommendations |
!Recommendations |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>#pagehistory li</syntaxhighlight> |
|A line in the page history list. |
|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. |
*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. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>#pagehistory li.selected</syntaxhighlight> |
|One of the selected lines in the page history list. |
|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. |
*This has a border and background by default. On dark skins, these will typically need to be changed to different colors. |
||
| − | |} |
||
| − | |||
| − | ==Diff page elements== |
||
| − | {| class="wikitable" |
||
| − | |- |
||
| − | !Identifier |
||
| − | !Description |
||
| − | !Recommendations |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>table.diff</syntaxhighlight> |
|Container for the diff results and the headers. |
|Container for the diff results and the headers. |
||
| |
| |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>td.diff-otitle</syntaxhighlight> |
|The header for the old revision. |
|The header for the old revision. |
||
| |
| |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>td.diff-ntitle</syntaxhighlight> |
|The header for the new revision. |
|The header for the new revision. |
||
| |
| |
||
|- |
|- |
||
| + | |<syntaxhighlight lang=css>diff-lineno</syntaxhighlight> |
||
| − | |<code>td.diff-addedline</code> |
||
| + | |The line numbers above each change. |
||
| + | | |
||
| + | |- |
||
| + | |<syntaxhighlight lang=css>td.diff-addedline</syntaxhighlight> |
||
|A line that was added to the page. |
|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. |
||
|- |
|- |
||
| + | |<syntaxhighlight lang=css>td.diff-addedline .diffchange</syntaxhighlight> |
||
| − | |<code>td.diff-deletedline</code> |
||
| + | |Changed text inside a additive change line. |
||
| + | | |
||
| + | |- |
||
| + | |<syntaxhighlight lang=css>td.diff-deletedline</syntaxhighlight> |
||
|A line that was removed from the page. |
|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. |
||
|- |
|- |
||
| + | |<syntaxhighlight lang=css>td.diff-deletedline .diffchange</syntaxhighlight> |
||
| − | |<code>td.diff-context</code> |
||
| + | |Changed text inside a removal change line. |
||
| − | |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. |
||
|- |
|- |
||
| + | |<syntaxhighlight lang=css>td.diff-context</syntaxhighlight> |
||
| − | |<code>.diffchange</code> |
||
| + | |Unchanged lines included to provide context. |
||
| − | |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. |
||
|} |
|} |
||
| − | == |
+ | ==Search page elements== |
| − | {| class="wikitable" |
+ | {| class="wikitable mw-collapsible mw-collapsed" style="width:100%;" |
|- |
|- |
||
| + | !Selector |
||
| − | !Identifier |
||
!Description |
!Description |
||
!Recommendations |
!Recommendations |
||
|- |
|- |
||
| + | |<syntaxhighlight lang=css>.mw-search-formheader</syntaxhighlight> |
||
| − | |<code>ul#filetoc</code> |
||
| + | |Box on search page containing the "Content pages", "Multimedia", etc. links. |
||
| − | |Top bar of links on file pages. |
||
| |
| |
||
| − | *Has a default background and border that may need to be overridden, especially for darker skins. |
||
|- |
|- |
||
| + | |<syntaxhighlight lang=css>.mw-search-formheader div.search-types ul li.current a</syntaxhighlight> |
||
| − | |<code>table.mw_metadata</code> |
||
| + | |The selected search-type. |
||
| − | |The metadata table found at the bottom of file pages. |
||
| |
| |
||
| + | *You'll likely want to change this to match the color scheme. This will certainly need to be changed on dark skins. |
||
| − | *Generally, you can use the same styles you use for <code>table.wikitable</code> here. |
||
|- |
|- |
||
| + | |<syntaxhighlight lang=css>fieldset#mw-searchoptions</syntaxhighlight> |
||
| − | |<code>table.mw_metadata th</code> |
||
| + | |This is the box containing the advanced search options. Click on "Advanced" to see it. |
||
| − | |The header (left) cells in the metadata table found at the bottom of file pages. |
||
| |
| |
||
| + | *This has a background and border set by default. The colors should generally be changed in a dark skin. |
||
| − | *Generally, you can use the same styles you use for <code>table.wikitable th</code> here. |
||
| + | *If you adjusted margins on <code>.mw-seatch-formheader</code>, the top margin for this should be the negative of <code>.mw-seatch-formheader</code>'s bottom margin. Note that <code>!important</code> is necessary for the top margin to take effect. |
||
|- |
|- |
||
| + | |<syntaxhighlight lang=css>fieldset#mw-searchoptions h4</syntaxhighlight> |
||
| − | |<code>table.mw_metadata td</code> |
||
| + | |The heading inside the advanced search options box. |
||
| − | |The value (right) cells in the metadata table found at the bottom of file pages. |
||
| |
| |
||
| − | * |
+ | *If you added any borders to <code>h4</code> elements, it often looks better to remove them here. |
| + | |- |
||
| + | |<syntaxhighlight lang=css>fieldset#mw-searchoptions div.divider</syntaxhighlight> |
||
| + | |The horizontal line inside the advanced search options box. |
||
| + | | |
||
| + | *It's usually best to set this to same styles as <code>hr</code>. |
||
|} |
|} |
||
| − | == |
+ | ==File/image page elements== |
| − | {| class="wikitable" |
+ | {| class="wikitable mw-collapsible mw-collapsed" style="width:100%;" |
|- |
|- |
||
| + | !Selector |
||
| − | !Identifier |
||
!Description |
!Description |
||
!Recommendations |
!Recommendations |
||
|- |
|- |
||
| + | |<syntaxhighlight lang=css>ul#filetoc</syntaxhighlight> |
||
| − | |<code>div#preferences</code> |
||
| + | |Top bar of links on file pages. |
||
| − | |Container for the preferences options. |
||
| |
| |
||
| + | *Has a default background and border that may need to be overridden, especially for darker skins. |
||
| − | *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. |
||
|- |
|- |
||
| + | |<syntaxhighlight lang=css>table.mw_metadata</syntaxhighlight> |
||
| − | |<code>div#preferences fieldset</code> |
||
| + | |The metadata table found at the bottom of file pages. |
||
| − | |Container for a "tab page" of preferences options. |
||
| |
| |
||
| + | *Generally, you can use the same styles you use for <code>table.wikitable</code> here. |
||
| − | *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 <code>div#content fieldset.</code> |
||
| − | *<code>border</code>, <code>margin</code>, and <code>padding</code> require <code>!important</code> to show up with Javascript enabled. |
||
| − | *Having 0 horizontal margin is recommended. |
||
|- |
|- |
||
| + | |<syntaxhighlight lang=css>table.mw_metadata th</syntaxhighlight> |
||
| − | |<code>div#preferences fieldset legend</code> |
||
| + | |The header (left) cells in the metadata table found at the bottom of file pages. |
||
| − | |Title for a "tab page" of preferences options. |
||
| |
| |
||
| + | *Generally, you can use the same styles you use for <code>table.wikitable th</code> here. |
||
| − | *When Javascript is enabled, this does not show up. |
||
|- |
|- |
||
| + | |<syntaxhighlight lang=css>table.mw_metadata td</syntaxhighlight> |
||
| − | |<code>div#preferences fieldset fieldset</code> |
||
| + | |The value (right) cells in the metadata table found at the bottom of file pages. |
||
| − | |Container for the inner groups of options inside a tab page. |
||
| |
| |
||
| + | *Generally, you can use the same styles you use for <code>table.wikitable td</code> here. |
||
| − | |- |
||
| − | |<code>#preferences td.htmlform-tip</code> |
||
| − | |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. |
||
| − | |- |
||
| − | |<code>#preftoc</code> |
||
| − | |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. |
||
| − | |- |
||
| − | |<code>#preftoc li</code> |
||
| − | |Element containing a single tab link. |
||
| − | | |
||
| − | *This has a background by default that may need to be overridden, especially on dark skins. |
||
| − | |- |
||
| − | |<code>#preftoc li a</code> |
||
| − | |The actual tab link. |
||
| − | | |
||
| − | *This has the link color set to the standard blue by default. |
||
| − | *<code>#preftoc li a</code> and <code>#preftoc li a:visited</code> are generally best set to the same color. |
||
| − | |- |
||
| − | |<code>#preftoc li.selected</code> |
||
| − | |Element containing the currently selected tab link. |
||
| − | | |
||
| − | *This has a background by default that may need to be overridden, especially on dark skins. |
||
| − | |- |
||
| − | |<code>#preftoc li.selected a</code> |
||
| − | |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== |
==Various special page elements== |
||
| − | {| class="wikitable" |
+ | {| class="wikitable mw-collapsible mw-collapsed" style="width:100%;" |
|- |
|- |
||
| + | !Selector |
||
| − | !Identifier |
||
!Description |
!Description |
||
!Recommendations |
!Recommendations |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>.TablePager</syntaxhighlight> |
|A table type seen on special pages like [[Special:AllMessages]]. |
|A table type seen on special pages like [[Special:AllMessages]]. |
||
| |
| |
||
*Typically, the same styles used for <code>table.wikitable</code> will work fine. |
*Typically, the same styles used for <code>table.wikitable</code> will work fine. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>.TablePager th</syntaxhighlight> |
|Header cells for a table type seen on special pages like [[Special:AllMessages]]. |
|Header cells for a table type seen on special pages like [[Special:AllMessages]]. |
||
| |
| |
||
*Typically, the same styles used for <code>table.wikitable th</code> will work fine. |
*Typically, the same styles used for <code>table.wikitable th</code> will work fine. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>.TablePager td</syntaxhighlight> |
|Regular cells for a table type seen on special pages like [[Special:AllMessages]]. |
|Regular cells for a table type seen on special pages like [[Special:AllMessages]]. |
||
| |
| |
||
*Typically, the same styles used for <code>table.wikitable td</code> will work fine. |
*Typically, the same styles used for <code>table.wikitable td</code> will work fine. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>.TablePager tr:hover td</syntaxhighlight> |
|Regular cells for a table type seen on special pages like [[Special:AllMessages]] when the cursor hovers over the row. |
|Regular cells for a table type seen on special pages like [[Special:AllMessages]] when the cursor hovers over the row. |
||
| |
| |
||
| Line 674: | Line 392: | ||
==AbuseFilter elements== |
==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. |
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. |
||
| − | {| class="wikitable" |
+ | {| class="wikitable mw-collapsible mw-collapsed" style="width:100%;" |
|- |
|- |
||
| + | !Selector |
||
| − | !Identifier |
||
!Description |
!Description |
||
!Recommendations |
!Recommendations |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>table.mw-abuselog-details</syntaxhighlight> |
|Table seen on examine/detail pages that show abuse filter variables. |
|Table seen on examine/detail pages that show abuse filter variables. |
||
| |
| |
||
*The styles used for <code>table.wikitable</code> are usually fine here. |
*The styles used for <code>table.wikitable</code> are usually fine here. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>table.mw-abuselog-details tr th</syntaxhighlight> |
|Header cells for the table seen on examine/detail pages. |
|Header cells for the table seen on examine/detail pages. |
||
| |
| |
||
*The styles used for <code>table.wikitable th</code> are usually fine here. |
*The styles used for <code>table.wikitable th</code> are usually fine here. |
||
|- |
|- |
||
| − | |< |
+ | |<syntaxhighlight lang=css>table.mw-abuselog-details tr td</syntaxhighlight> |
|Regular cells for the table seen on examine/detail pages. |
|Regular cells for the table seen on examine/detail pages. |
||
| |
| |
||
*The styles used for <code>table.wikitable td</code> are usually fine here. |
*The styles used for <code>table.wikitable td</code> 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. |
||
| − | {| class="wikitable" |
||
| − | |- |
||
| − | !Identifier |
||
| − | !Description |
||
| − | !Recommendations |
||
| − | |- |
||
| − | |<code>.wikiEditor-ui</code> |
||
| − | |Container for the edit toolbars and textarea. |
||
| − | | |
||
| − | |- |
||
| − | |<code>.wikiEditor-ui-controls</code> |
||
| − | |Container for the top bar containing the tabs. |
||
| − | | |
||
| − | |- |
||
| − | |<code>.wikiEditor-ui-tabs</code> |
||
| − | |Container for the tabs. |
||
| − | | |
||
| − | |- |
||
| − | |<code>.wikiEditor-ui-tabs .current</code> |
||
| − | |The selected tab. |
||
| − | | |
||
| − | |- |
||
| − | |<code>.wikiEditor-ui-left</code> |
||
| − | |Contains the tab page contents. |
||
| − | | |
||
| − | |- |
||
| − | |<code>.wikiEditor-ui-top</code> |
||
| − | |Outer container for the toolbars. |
||
| − | | |
||
| − | |- |
||
| − | |<code>.wikiEditor-ui-toolbar</code> |
||
| − | |Inner container for the toolbars. |
||
| − | | |
||
| − | |- |
||
| − | |<code>.wikiEditor-ui-toolbar .sections .section</code> |
||
| − | |A sub-toolbar. |
||
| − | | |
||
| − | |- |
||
| − | |<code>.wikiEditor-ui-text</code> |
||
| − | |Container for the editing textarea. |
||
| − | | |
||
| − | |- |
||
| − | |<code>.wikiEditor-preview-contents</code> |
||
| − | |Container for the preview area. |
||
| − | | |
||
| − | |- |
||
| − | |<code>.ui-widget, .ui-widget-content</code> |
||
| − | |A wikieditor dialog box |
||
| − | | |
||
| − | *Font styles are applied to <code>.ui-widget</code> by default. |
||
| − | *Borders and background styles are applied to <code>.ui-widget-content</code> by default. |
||
| − | *Both classes generally seem to be applied to the same <code>div</code>, but it may be best to keep font styles on <code>.ui-widget</code> and background, border, and color styles on <code>.ui-widget-content</code> to be safe. |
||
| − | *Only use fully or near fully-opaque backgrounds. |
||
| − | |- |
||
| − | |<code>.ui-widget-header</code> |
||
| − | |Header for a wikieditor dialog box. |
||
| − | | |
||
| − | |- |
||
| − | |<code>.wikiEditor-toolbar-dialog .ui-dialog-content input[type="text"]</code> |
||
| − | |Textboxes in a wikieditor dialog box. |
||
| − | | |
||
| − | |- |
||
| − | |<code>.wikieditor-toolbar-dialog-hint</code> |
||
| − | |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. |
||
| − | |- |
||
| − | |<code>.ui-button.ui-state-default</code> |
||
| − | |A button in a dialog box. |
||
| − | | |
||
| − | |- |
||
| − | |<code>.ui-button.ui-state-focus</code> |
||
| − | |A button in a dialog box that has keyboard focus. |
||
| − | | |
||
| − | |- |
||
| − | |<code>.ui-button.ui-state-hover</code> |
||
| − | |A button in a dialog box that the mouse cursor is hovering over. |
||
| − | | |
||
| − | |- |
||
| − | |<code>.ui-button.ui-state-active</code> |
||
| − | |A button in a dialog box that's being activated. |
||
| − | | |
||
| − | |} |
||
| − | |||
| − | ==Mobile view elements== |
||
| − | {| class="wikitable" |
||
| − | |- |
||
| − | !Identifier |
||
| − | !Description |
||
| − | !Recommendations |
||
| − | |- |
||
| − | |<code>div#header</code> |
||
| − | |The header area containing the search bar. |
||
| − | | |
||
| − | |- |
||
| − | |<code>div#content_wrapper</code> |
||
| − | |Container for the area between the header and the footer. |
||
| − | | |
||
| − | *<code>clear: both;</code> is recommended on this element. |
||
| − | |- |
||
| − | |<code>.thumb</code> |
||
| − | |The box around thumbnail images and their captions. |
||
| − | | |
||
| − | |- |
||
| − | |<code>table</code> |
||
| − | |Any tables in the mobile view. |
||
| − | | |
||
| − | *<code>border-collapse: collapse !important;</code> and <code>border-spacing: 0 !important;</code> are recommended. |
||
| − | |- |
||
| − | |<code>div#footer</code> |
||
| − | |The footer containing the links to view the page on the regular wiki, the copyright notice, etc. |
||
| − | | |
||
| − | |- |
||
| − | |<code>.mwm-notice</code> |
||
| − | |The box in the footer containing links for the regular wiki and for disabling images. |
||
| − | | |
||
| − | |} |
||
| − | |||
==Page-specific styling== |
==Page-specific styling== |
||
Each MediaWiki page has a unique class name assigned to the <code><nowiki><body></nowiki></code> element that is based on the current page title. In most cases this will be <code>page-</code> (or <code>rootpage-</code> 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 (<code>_</code>). The exact class name may be obtained by using the browser's view-source feature on the page for which style changes are needed. |
Each MediaWiki page has a unique class name assigned to the <code><nowiki><body></nowiki></code> element that is based on the current page title. In most cases this will be <code>page-</code> (or <code>rootpage-</code> 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 (<code>_</code>). The exact class name may be obtained by using the browser's view-source feature on the page for which style changes are needed. |
||
| Line 821: | Line 418: | ||
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): |
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): |
||
| + | <syntaxhighlight lang=css> |
||
| − | <pre> |
||
.page-MediaWiki_CSS h1:first-child |
.page-MediaWiki_CSS h1:first-child |
||
{ |
{ |
||
display: none; |
display: none; |
||
} |
} |
||
| + | </syntaxhighlight> |
||
| − | </pre> |
||
| + | == See also == |
||
| − | [[Skin customization|Return to Skin customization]]. |
||
| + | * [[Mobile CSS]] |
||
[[Category:Advanced help]] |
[[Category:Advanced help]] |
||
| + | |||
| + | [[tr:MediaWiki CSS]] |
||
Latest revision as of 17:17, 8 April 2020
| |||||||||||||||||||
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. |
|
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. |
|
.mw-editsection
|
The edit links in headings. |
|
div#toc, div.toc
|
Table of contents box. | |
div#content .toc .toctitle h2
|
Table of contents heading. |
|
.toctoggle
|
Table of contents show/hide button. |
|
hr
|
General horizontal line. |
|
ul
|
General unordered lists. |
|
table.wikitable
|
Tables in content with the wikitable class.
|
|
table.wikitable > * > tr > th, table.wikitable > tr > th
|
Table header cells in tables with the wikitable class.
|
|
table.wikitable > * > tr > td
|
Table data cells in tables with the wikitable class.
|
|
table.jquery-tablesorter th.headerSort
|
Sortable table header cells. |
|
table.jquery-tablesorter th.headerSortDown
|
Sortable table header cells. |
|
table.jquery-tablesorter th.headerSortUp
|
Sortable table header cells. |
|
table.jquery-tablesorter th.headerSortDown
|
Sortable table header cells. |
|
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. |
|
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.
|
|
.thumb.tleft
|
Invisible outer container for a thumb that's floated to the left.
|
|
.thumb.tright
|
Invisible outer container for a thumb that's floated to the right.
|
|
div.thumbinner
|
Container for a thumb around both image and caption.
|
|
html .thumbimage
|
Container for the thumb image.
|
|
.thumbcaption
|
The caption for a thumb image.
|
|
pre
|
Preformatted text. |
|
#catlinks
|
The container for the category links. |
|
| 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. |
|
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. |
|
div#content fieldset legend
|
The title for a fieldset box. | |
.error
|
Red text displayed on some kind of error. |
|
.errorbox
|
Text in a red box displayed on some kind of error. |
|
.warning
|
Orange text displayed to give some kind of warning. |
|
.warningbox
|
Text in a orange box displayed on some kind of error. |
|
.success
|
Green text displayed after some action is successful. |
|
.successbox
|
Text in a green box displayed after a successful action, for example, after saving preferences. |
|
Page history elements
| Selector | Description | Recommendations |
|---|---|---|
#pagehistory li
|
A line in the page history list. |
|
#pagehistory li.selected
|
One of the selected lines in the page history list. |
|
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. |
|
fieldset#mw-searchoptions
|
This is the box containing the advanced search options. Click on "Advanced" to see it. |
|
fieldset#mw-searchoptions h4
|
The heading inside the advanced search options box. |
|
fieldset#mw-searchoptions div.divider
|
The horizontal line inside the advanced search options box. |
|
File/image page elements
| Selector | Description | Recommendations |
|---|---|---|
ul#filetoc
|
Top bar of links on file pages. |
|
table.mw_metadata
|
The metadata table found at the bottom of file pages. |
|
table.mw_metadata th
|
The header (left) cells in the metadata table found at the bottom of file pages. |
|
table.mw_metadata td
|
The value (right) cells in the metadata table found at the bottom of file pages. |
|
Various special page elements
| Selector | Description | Recommendations |
|---|---|---|
.TablePager
|
A table type seen on special pages like Special:AllMessages. |
|
.TablePager th
|
Header cells for a table type seen on special pages like Special:AllMessages. |
|
.TablePager td
|
Regular cells for a table type seen on special pages like Special:AllMessages. |
|
.TablePager tr:hover td
|
Regular cells for a table type seen on special pages like Special:AllMessages when the cursor hovers over the row. |
|
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. |
|
table.mw-abuselog-details tr th
|
Header cells for the table seen on examine/detail pages. |
|
table.mw-abuselog-details tr td
|
Regular cells for the table seen on examine/detail pages. |
|
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;
}