No edit summary |
No edit summary |
||
Line 874: | Line 874: | ||
| |
| |
||
|} |
|} |
||
+ | |||
+ | [[Skin Customization|Return to skin customization]]. |
||
[[Category:Help]] |
[[Category:Help]] |
Revision as of 20:18, 25 August 2013
Header elements
Identifier | Description | Recommendations |
---|---|---|
div#mw-page-base
|
Empty header element that influences top position of sidebar and content. |
|
div#mw-head-base
|
Empty header element that influences top position of sidebar and content. |
|
div#mw-head
|
Actual container for the page navigation bar. |
|
#left-navigation
|
Links for the content and talk page. |
|
#right-navigation
|
Container for page actions links and search controls. |
|
div.vectorTabs
|
Containers for: the content and talk page links; and the view, edit, and history links. |
|
div.vectorTabs li
|
An outer container for a single page tab link. |
|
div.vectorTabs li.selected
|
An outer container for a selected single page tab link. |
|
div.vectorTabs li span
|
An inner container for a single page tab link. |
|
div.vectorTabs li span a
|
A page tab link. |
|
div.vectorTabs li.new span a
|
A page tab link for a page that doesn't exist. | |
div.vectorMenu
|
Container for a hover menu in the top bar and its arrow. Also has the background image for the arrow. |
|
div#p-cactions
|
Container for the hover menu with the page actions (such as delete) and its arrow. Also has the background image for the arrow. |
|
div#p-sharing
|
Container for the share hover menu and its arrow. Also has the background image for the arrow. |
|
div.vectorMenu h4
|
Label for a hover menu. |
|
div.vectorMenu h5
|
Left border for the hover menu arrow provided by background image. |
|
div.vectorMenu h5 a
|
Provides a background for the hover image. |
|
div#p-cactions div.menu
|
Container for the hover menu (only the part that appears when hovering over the arrow). |
|
div#p-sharing div#socialIconImages
|
Container for the sharing icons inside the share hover menu. |
|
div#p-sharing div#socialIconImages a
|
The individual sharing icons inside the share hover menu. | |
div#p-sharing
|
Container for the share hover menu and its arrow. Also has the background image for the arrow. |
|
div#p-cactions div.menu ul li a
|
A link in the hover menu. |
|
#p-search
|
Outer container for the search box and buttons. | |
#p-search form
|
Inner container for the search box and buttons. |
|
#searchInput
|
The search box |
|
#p-search input[type="submit"], #p-search input[type="button"], #p-search input[type="reset"]
|
The search buttons |
|
.os-suggest
|
The search suggestions popup box. | |
.os-suggest-result
|
A single search suggestion item. |
|
.os-suggest-result-hl
|
The highlighted single search suggestion item. |
Logo and sidebar elements
Identifier | Description | Recommendations |
---|---|---|
div#mw-panel
|
The sidebar, including the logo. |
|
#p-logo
|
Container for the logo link. Located at top of div#mw-panel .
|
|
#p-logo a
|
The logo link, containing the logo as a background. |
|
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. | |
div#mw-panel div#p-socialProfiles
|
The "portal" for the social icons in the sidebar. | |
div#mw-panel div#p-socialProfiles h5
|
The heading for the social portal, normally empty. |
|
div#mw-panel div#p-socialProfiles div.body
|
The "body" for the social portal in the sidebar. |
|
div.socialSidebar
|
A container around the social icons. |
|
div.socialLink
|
The individual social links. |
Content elements
Identifier | 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. |
|
div#content #firstHeading
|
The page title. |
|
span.editsection
|
The edit links in headings. |
|
.toc, #toc
|
Table of contents box. |
|
div#content #toctitle h2
|
Table of contents heading. |
|
.toctoggle, #toc .toctoggle
|
Table of contents heading. |
|
hr
|
General horizontal line. |
|
ul
|
General unordered lists. |
|
table.wikitable
|
Tables in content with the wikitable class.
|
|
table.wikitable th
|
Table header cells in tables with the wikitable class.
|
|
table.wikitable 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. |
|
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. |
|
Identifier | Description | Recommendations |
---|---|---|
div#footer
|
The wiki page footer, displaying links to Privacy Policy, Disclaimers, etc. | |
div#footer ul li
|
List elements inside the footer. |
|
General interface elements
Identifier | 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
|
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. |
|
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. |
|
Search page elements
Identifier | 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. |
|
Page history elements
Identifier | Description | Recommendations |
---|---|---|
#pagehistory li
|
A line in the page history list. |
|
#pagehistory li.selected
|
One of the selected lines in the page history list. |
|
Diff page elements
Identifier | Description | 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. |
|
td.diff-deletedline
|
A line that was removed from the page. |
|
td.diff-context
|
Unchanged lines included to provide context. |
|
.diffchange
|
Changed text inside a line. |
|
File/image page elements
Identifier | 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/code>
|
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. |
|
Preferences page elements
Identifier | Description | Recommendations |
---|---|---|
div#preferences
|
Container for the preferences options. |
|
div#preferences fieldset
|
Container for a "tab page" of preferences options. |
|
div#preferences fieldset legend
|
Title for a "tab page" of preferences options. |
|
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. |
|
#preftoc
|
The "tab page" links for the pages of options. |
|
#preftoc li
|
Element containing a single tab link. |
|
#preftoc li a
|
The actual tab link. |
|
#preftoc li.selected
|
Element containing the currently selected tab link. |
|
#preftoc li.selected a
|
The currently selected tab link. |
|
Various special page elements
Identifier | 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.
Identifier | 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. |
|
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 | 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 |
|
.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. |
|
.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 | Recommendations |
---|---|---|
#other_options div
|
A container for a row of options in the other options section in Special:Ask. |
|
#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.
|
|
table.smwtable th
|
Header cells in the table returned in format=table queries.
|
|
table.smwtable td
|
Regular cells in the table returned in format=table queries.
|
|
.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. |
|
div.smwfact table
|
The table inside the factbox. |
|
div.smwfact table tr
|
A table row inside the factbox. |
|
div.smwfact table tr td
|
A table cell inside the factbox. |
|
.smwrdflink
|
The RDF link in Semantic MediaWiki factboxes. |
|
Mobile view elements
Identifier | Description | Recommendations |
---|---|---|
div#header
|
The header area containing the search bar. | |
div#content_wrapper
|
Container for the area between the header and the footer. |
|
.thumb
|
The box around thumbnail images and their captions. | |
table
|
Any tables in the mobile view. |
|
div#footer
|
The footer containing the links to view the page on the regular wiki, the copyright notice, etc. | |
.mwm-notice
|
The box in the footer containing links for the regular wiki and for disabling images. |