Apply a Custom Colour Scheme
A Guide to Using MediaWiki in a Hosted Environment
An instructional website by the developer of mh370wiki.net - a MediaWiki site about Malaysia Airlines Flight MH370.
Customising the Interface of a MediaWiki-based Website
The appearance of a MediaWiki-based website is controlled by CSS Classes used by MediaWiki and by the installed Skin.
Altering the appearance, or customising the Interface, involves editing MediaWiki:Common.css and the skin CSS which is also in the MediaWiki: namespace.
Processes involved in customising the interface are covered in separate articles:-
- Choosing a MediaWiki Skin
- Choosing a Colour Scheme
- Identifying the various CSS Classes used by both MediaWiki and the active Skin
- Applying a Custom Colour Scheme to appropriate Classes in MediaWiki:common.css and the skin CSS, for example MediaWiki:Vector.css, as used here.
How to Apply a Custom Colour Scheme
The steps covered so far include:-
- Identify the CSS Classes for screen elements; standard MediaWiki Classes and skin Classes
- Design a colour scheme; choose the colour palette, create colour variables
Custom CSS is applied to MediaWiki:Common.css and to the skin CSS, for example MediaWiki:Vector.css used here.
The table below shows the colours used on this website. This can be verified by matching a colour to part of the interface.
| Color Variable | Color Hex Code | Class and Color |
|---|---|---|
| --SteelBlue-80 | #B6CEE2 | #mw-head |
| --SteelBlue-70 | #91B6D4 | .mw-body |
| --SteelBlue-60 | #6C9DC6 | .mw-footer |
| --SteelBlue-50 | #4785B8 | #mw-panel.vector-legacy-sidebar.collapsible-nav |
| --SteelBlue-40 | #396A93 | body |
| --PageBackground | #F2F2F2 | .mw-body-content |
| --LightSteelBlue | #B0C4DE | .catlinks |
| --LightSteelBlue-90 | #DBE4F0 | .mw-normal-catlinks |
| --Tan-80 | #E2CFB6 | .vector-menu-content |
| --Tan-70 | #D4B791 | .vector-menu-heading-label |
| --Tan-60 | #C69F6C | .vector-menu-heading |
| --Tan-50 | #B88747 | .vector-menu-portal |
| --Tan-40 | #936C39 | #p-tb |
Colours in Common.css
The following CSS has been added to Common.css for this website:-
/* Items sorted with lightest color shade first, approximating a Z order */
#mw-head { background-color: var(--SteelBlue-80); } /* full width at top of screen, behind logo */
/* mw-body-content is in front of mw-body */
.mw-body-content { background-color: var(--PageBackground); border-radius: 1em; padding-top:2em; padding-bottom:2em; padding-left:2.5em; padding-right:2.5em; }
.mw-body { background-color: var(--SteelBlue-70); } /* is background for everything below header and right of left panel and down to footer */
.mw-footer { background-color: var(--SteelBlue-60); } /* does not extend to bottom of the screen */
#mw-panel.vector-legacy-sidebar.collapsible-nav { background-color: var(--SteelBlue-50); } /* background for menu but extends to top of screen and behind logo and in front of header */
body { background-color: var(--SteelBlue-40); } /* everything below mw-head, full width of screen, to bottom of screen */
.catlinks { background-color: var(--LightSteelBlue); } /* border on category row */
.mw-normal-catlinks { background-color: var(--LightSteelBlue-90); padding-left:20px; }
Colours in Vector.css
The following CSS has been added to Vector.css for this website:-
/* Items arranged with lightest color shades first, also approximating a Z order */
#mw-panel.collapsible-nav .vector-menu-content { background-color: var(--Tan-80); } /* background color on drop down sub menu */
.vector-menu-heading-label { background-color: var(--Tan-70); } /* this is the background for the text only, not full width */
/* menu headings - define for expanded and collapsed - container for the label text, full width of sidebar */
#mw-panel.collapsible-nav .portal.collapsed .vector-menu-heading { background-color: var(--Tan-60); }
#mw-panel.collapsible-nav .portal.expanded .vector-menu-heading { background-color: var(--Tan-60); }
.vector-menu-portal { background-color: var(--Tan-50); } /* background for the menu */
#p-tb { background-color: var(--Tan-40); } /* Tools Menu */
Related Articles
Articles which relate to Customising the Interface
Articles which relate to Customising the Interface are included in Category:Customise the Interface.
The CategoryTree Extension enables a listing of relevant sub-categories and pages:-