Styling the wiki editor

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.	Default properties to customize: background, border
div.wikiEditor-ui-controls	An empty element above the editor.	Apply background:transparent;border:0; to this element to remove the thin border it causes above the editor.
div.wikiEditor-ui .wikiEditor-ui-view	The actual editing interface, including the top toolbars and text area.	Default properties to customize: border
div.wikiEditor-ui .wikiEditor-ui-top	The container for all the toolbars at the top of the editor, including the MsUpload bar.	Default properties to customize: border
#wikiEditor-ui-toolbar	The container for the basic wiki editor toolbars.	Default properties to customize: background, border Backgrounds on this element will show behind both the top toolbar and the subtoolbars opened by the advanced/special characters/help menus.
form#editform .ve-init-mw-editSwitch .oo-ui-popupToolGroup	The switch to visual editor button.	Default properties to customize: background
form#editform .ve-init-mw-editSwitch .oo-ui-popupToolGroup .oo-ui-popupToolGroup-handle:hover{	On-hover styles for the switch to visual editor button.	Default properties to customize: background
div.wikiEditor-ui-toolbar .group	Each subset of tools in the toolbars (e.g. Bold and Italic buttons together are one subset).	Default properties to customize: border-right
div.wikiEditor-ui-toolbar .group-search	The search tool in the advanced toolbar.	This is the single .group (see above) in the toolbar that uses border-left. If you customize the borders of the other groups, you will need to customize this one separately.
div.wikiEditor-ui-toolbar .sections .section	The container for the subtoolbars opened by the advanced/special characters/help menus.	Default properties to customize: background, border
div.wikiEditor-ui-toolbar .group .label	The "Format" and "Insert" labels in the advanced subtoolbar.	Default properties to customize: color
.wikiEditor-ui-toolbar .group .tool-select	The "Heading" dropdown menu in the advanced subtoolbar.	Default properties to customize: background, border
div.wikiEditor-ui-toolbar .group .tool-select .label	The text that says "Heading" inside the Heading dropdown menu.	Default properties to customize: color
.wikiEditor-ui-toolbar .group .tool-select .menu .options	The actual dropdown menu in the Heading menu.	Default properties to customize: background, border
.wikiEditor-ui-toolbar .group .tool-select .options .option	Each entry in the Heading dropdown menu.	Default properties to customize: color
.wikiEditor-ui-toolbar .group .tool-select .options .option:hover	On-hover styles for each entry in the Heading dropdown menu.	Default properties to customize: background
div.wikiEditor-ui-toolbar .booklet .index div	Each tab in the sidebar of the special characters and help subtoolbars.	Default properties to customize: color
div.wikiEditor-ui-toolbar .booklet .index .current	The currently selected tab in the special characters and help subtoolbars.	Default properties to customize: background, color
div.wikiEditor-ui-toolbar .booklet .pages	The main content of the special characters and help subtoolbars.	Default properties to customize: background
div.wikiEditor-ui-toolbar .page-characters div span	Each special character button in the special characters subtoolbar.	Default properties to customize: color, border
div.wikiEditor-ui-toolbar .page-table th	The headers of the info table in the help subtoolbar.	Default properties to customize: color Adding a background color may also be helpful for clarity.
div.wikiEditor-ui-toolbar .page-table td	Each cell of the info table in the help subtoolbar.	Default properties to customize: color, border-top
.wikiEditor-ui-bottom	The container for the editor text box.
.mw-editform #wpTextbox1	The editor text box itself.	The background and color of this element can be changed to recolor the text box.
div.editOptions	The area below the text box, containing the summary box and the save/preview/changes buttons.	Default properties to customize: background, color, border
#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.	Default properties to customize: background, border If you wish to remove the border around the toolbar, use border:1px solid transparent instead to prevent the area from collapsing on some browsers.
#msupload-dropzone	The MsUpload drop area, surrounded by a light gray dashed border by default.	Default properties to customize: color, border
#msupload-list	Container for the list of pending files.
#msupload-div #msupload-list .file	Each file in the list of pending files.	Default properties to customize: background, border-top, border-bottom
#msupload-list .green	Successfully uploaded file.	Default properties to customize: background
#msupload-list .file .file-cancel	The cancel "x" button on each file.	The button can be darkened or brightened for readability by using the filter property.
#msupload-list .file .file-size	The filesize on each file in the list.	Default properties to customize: color
#msupload-list .file .file-warning	Container for upload warnings on each file (duplicate file, upload failed, etc).	Default properties to customize: color
#msupload-bottom a	The links to "upload all files", "clear list", etc. below the file list.	Default properties to customize: color

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