Styling the wiki editor

From Gamepedia Help Wiki
Jump to: navigation, search

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[edit | edit source]

Editor area[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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 fie 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[edit | edit source]

Editor style example.png