Customise the Interface
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.
Choosing a MediaWiki Skin
MediaWiki includes four Skins - MinervaNeue, MonoBook, Timeless and Vector. Many Skins are available.
The mh370wiki.net website uses the Vector Skin because an Extension:CollapsibleVector enables collapsible (drop-down) menus in the Sidebar.
Previously, the mh370wiki.net used the Skin:Foreground and then the Skin:Pivot. Both skins are responsive and built on the Zurb Foundation CSS Framework.
The decision to use Vector was influenced by two factors - Vector is included with MediaWiki so will (hopefully) be maintained indefinately, and the drop-down menu feature which became more valuable as the site content expanded and the number of menu items increased. Also, a dependence on the Foundation CSS Framework was reduced because custom CSS had been developed and it was clear that the appearance of a standard skin could be changed using custom CSS, thus creating a website Theme based on an existing skin.
However, the process of developing a Theme is time-consuming and faces the risk that later versions of MediaWiki (and the Skin, and the Extensions) will involve changes that affect the customised appearance, so upgrading MediaWiki will be more involved. That is particularly true for the Extension:CollapsibleVector. Every upgrade has involved some changes to custom CSS just to maintain the previous appearance and functionality. But the work required is probably less than developing and maintaining a custom skin.
This website also uses the Skin:Vector and the Extension:CollapsibleVector. A colour scheme has been developed for this website which enables screen and menu elements to be identified by color. The overall appearance is not intended to win prizes in a graphic design competition, instead it is functional. This website is instructive, based on learnings from the development of the mh370wiki.net website.
Useful Tools
- Two different web browsers. When you clear history or a cache only one browser will be affected.
- One of the browsers should have web developer tools, like Firefox Developer Edition.
- Two screens, so you can make a change in a web browser on one screen and observe the effect in a web browser on a second screen.
- An 'eye dropper' tool like Color Cop to sample colours on-screen or within an image to identify the color code.
- Patience and a few cups of coffee.
Two Interface Examples
A Standard MediaWiki Installation
The mh370wiki.net Website
The mh370wiki.net website uses two different colours for page backgrounds. Most of the site uses a parchment colour but the Main Page, and the pages with Passenger details, are almost black, like the instrument panel on a Boeing 777. A method to change the background for different contexts is described in the article Multiple Page Backgrounds.
Links
Resources from w3Schools
Resources from w3Schools
- HTML Color Names
- https://www.w3schools.com/tags/ref_colornames.asp
- HTML Color Picker
- https://www.w3schools.com/colors/colors_picker.asp
- HTML Color Mixer
- https://www.w3schools.com/colors/colors_mixer.asp
- Colors Tutorial
- https://www.w3schools.com/colors/default.asp
- CSS Variables - The (var) Function
- https://www.w3schools.com/css/css3_variables.asp
Note: This list is transcluded and used on other pages. The source is Snippets:Resources from w3Schools.