| |||||||||||||||||||
The page provides a guide to styling the wiki source editor, added by Extension:WikiEditor (default on all Gamepedia wikis). Some wikis may wish to to re-style the editor to better match the wiki's skin.
This page also includes a guide to styling the MsUploader, added by Extension:MsUpload (default on all Gamepedia wikis).
Selector guide
Editor area
| Selector | Description | Recommendations |
|---|---|---|
form#editform
|
The outer container for the entire editor, including the save/preview/changes buttons and parser profiling data table. | |
div.wikiEditor-ui
|
The container for the main editing interface. |
|
div.wikiEditor-ui-controls
|
An empty element above the editor. |
|
div.wikiEditor-ui .wikiEditor-ui-view
|
The actual editing interface, including the top toolbars and text area. |
|
div.wikiEditor-ui .wikiEditor-ui-top
|
The container for all the toolbars at the top of the editor, including the MsUpload bar. |
|
#wikiEditor-ui-toolbar
|
The container for the basic wiki editor toolbars. |
|
form#editform .ve-init-mw-editSwitch .oo-ui-popupToolGroup
|
The switch to visual editor button. |
|
form#editform .ve-init-mw-editSwitch .oo-ui-popupToolGroup .oo-ui-popupToolGroup-handle:hover{
|
On-hover styles for the switch to visual editor button. |
|
div.wikiEditor-ui-toolbar .group
|
Each subset of tools in the toolbars (e.g. Bold and Italic buttons together are one subset). |
|
div.wikiEditor-ui-toolbar .group-search
|
The search tool in the advanced toolbar. |
|
div.wikiEditor-ui-toolbar .sections .section
|
The container for the subtoolbars opened by the advanced/special characters/help menus. |
|
div.wikiEditor-ui-toolbar .group .label
|
The "Format" and "Insert" labels in the advanced subtoolbar. |
|
.wikiEditor-ui-toolbar .group .tool-select
|
The "Heading" dropdown menu in the advanced subtoolbar. |
|
div.wikiEditor-ui-toolbar .group .tool-select .label
|
The text that says "Heading" inside the Heading dropdown menu. |
|
.wikiEditor-ui-toolbar .group .tool-select .menu .options
|
The actual dropdown menu in the Heading menu. |
|
.wikiEditor-ui-toolbar .group .tool-select .options .option
|
Each entry in the Heading dropdown menu. |
|
.wikiEditor-ui-toolbar .group .tool-select .options .option:hover
|
On-hover styles for each entry in the Heading dropdown menu. |
|
div.wikiEditor-ui-toolbar .booklet .index div
|
Each tab in the sidebar of the special characters and help subtoolbars. |
|
div.wikiEditor-ui-toolbar .booklet .index .current
|
The currently selected tab in the special characters and help subtoolbars. |
|
div.wikiEditor-ui-toolbar .booklet .pages
|
The main content of the special characters and help subtoolbars. |
|
div.wikiEditor-ui-toolbar .page-characters div span
|
Each special character button in the special characters subtoolbar. |
|
div.wikiEditor-ui-toolbar .page-table th
|
The headers of the info table in the help subtoolbar. |
|
div.wikiEditor-ui-toolbar .page-table td
|
Each cell of the info table in the help subtoolbar. |
|
.wikiEditor-ui-bottom
|
The container for the editor text box. | |
.mw-editform #wpTextbox1
|
The editor text box itself. |
|
div.editOptions
|
The area below the text box, containing the summary box and the save/preview/changes buttons. |
|
#wikiPreview
|
The preview area below the editor, shown by pressing the "Show preview" button. | |
#wikiDiff
|
The change diff area below the editor, shown by pressing the "Show changes" button. |
MsUpload
| Selector | Description | Recommendations |
|---|---|---|
#msupload-div
|
The main container for the MsUpload toolbar. |
|
#msupload-dropzone
|
The MsUpload drop area, surrounded by a light gray dashed border by default. |
|
#msupload-list
|
Container for the list of pending files. | |
#msupload-div #msupload-list .file
|
Each file in the list of pending files. |
|
#msupload-list .green
|
Successfully uploaded file. |
|
#msupload-list .file .file-cancel
|
The cancel "x" button on each file. |
|
#msupload-list .file .file-size
|
The filesize on each file in the list. |
|
#msupload-list .file .file-warning
|
Container for upload warnings on each file (duplicate file, upload failed, etc). |
|
#msupload-bottom a
|
The links to "upload all files", "clear list", etc. below the file list. |
|
Sample CSS
The following is sample code for a simple recolor of the wiki editor. You may wish to change the colors in the CSS to match your wiki theme.
/**** WIKI EDITOR ****/
/* reset some default styles */
div.wikiEditor-ui,
div.wikiEditor-ui-controls,
div.wikiEditor-ui-toolbar .booklet .pages {
background: transparent;
border: 0;
}
/* border around the editor and toolbars */
div.wikiEditor-ui div.wikiEditor-ui-view {
border: 1px solid #4f3169;
margin-bottom: 0.5em;
}
div.wikiEditor-ui .wikiEditor-ui-top {
border-bottom: 1px solid #4f3169;
}
/* style the main toolbar */
div.wikiEditor-ui-toolbar {
background: #1c1c1c;
border-bottom: 1px solid #4f3169;
}
div.wikiEditor-ui-toolbar .group {
border-right: 1px solid #4f3169;
}
/* special border for the search tool */
div.wikiEditor-ui-toolbar .group-search {
border-left: 1px solid #4f3169;
border-right: none;
}
/* switch to ve button */
form#editform .ve-init-mw-editSwitch .oo-ui-popupToolGroup {
background: #4f3169;
}
form#editform .ve-init-mw-editSwitch .oo-ui-popupToolGroup .oo-ui-popupToolGroup-handle:hover {
background: #AF6DE8;
}
/* heading dropdown menu */
.wikiEditor-ui-toolbar .group .tool-select {
background: #282a36;
border: 1px solid #4f3169;
}
/* heading dropdown menu text */
div.wikiEditor-ui-toolbar .group .tool-select .label {
color: #fff;
}
/* heading dropdown menu menu */
.wikiEditor-ui-toolbar .group .tool-select .menu .options {
background: #282a36;
border: 1px solid #4f3169;
}
/* heading dropdown menu entries */
.wikiEditor-ui-toolbar .group .tool-select .options .option {
color: #fff;
}
.wikiEditor-ui-toolbar .group .tool-select .options .option:hover {
background: #4f3169;
}
/* subtoolbars */
div.wikiEditor-ui-toolbar .sections .section {
background: #222;
border-top: 1px solid #4f3169;
}
/* tabs on special characters and help subtoolbars */
div.wikiEditor-ui-toolbar .booklet .index div {
color: #fff;
}
/* current tab */
div.wikiEditor-ui-toolbar .booklet .index .current {
background-color: #4f3169;
color: #fff;
}
/* special characters list */
div.wikiEditor-ui-toolbar .page-characters div span {
border: 1px solid #4f3169;
color: #fff;
}
div.wikiEditor-ui-toolbar .page-characters div span:hover {
background: #4f3169;
color: #fff;
border: 1px solid #4f3169;
}
/* help table */
div.wikiEditor-ui-toolbar .page-table {
padding: 0;
}
/* help table headers */
div.wikiEditor-ui-toolbar .page-table th {
background: #4f3169;
color: #fff;
}
/* help table cells */
div.wikiEditor-ui-toolbar .page-table td {
border-top: 1px solid #4f3169;
color: #fff;
}
/* text box colors */
.mw-editform #wpTextbox1 {
background: #282a36;
color: #f8f8f2;
}
/* match editoptions area to editor */
div.editOptions {
background-color: #1c1c1c;
border: 1px solid #4f3169;
}
/**** MSUPLOAD ****/
/* main msupload area */
#msupload-div {
background: #7f4fa8;
border: 1px solid transparent;
}
/* msupload drop area color and border */
#msupload-dropzone {
border: 1px dotted #fff;
color: #fff;
}
/* msupload file list */
#msupload-div #msupload-list .file {
background: #4f3169;
border: 0;
}
/* msupload file list text */
#msupload-div #msupload-list .file .file-size,
#msupload-div #msupload-list .file .file-title,
#msupload-div #msupload-list .file .file-warning {
color: #fff;
}
Result
