If you're about to start your own MediaWiki project or spice up an existing wiki, some of the following points may be helpful. We will talk about "skins" - freely distributed sets of code and resources - that will determine the appearance of MediaWiki.
If you're about to start your own MediaWiki project or spice up an existing wiki, some of the following points may be helpful.
We will talk about "skins" - freely distributed sets of code and resources - that will determine the appearance of MediaWiki, and about the factors important for choosing the right one. We are developers and will focus primarily on the technical and conceptual aspects of the choice.
Many people think of the Wikipedia interface when they think of MediaWiki: a large number of links that support the specific workflows of readers, commentators, editors, moderators, administrators.
The phenomenon of the world's largest online encyclopedia is so inspiring that many people or companies using Mediawiki want their wiki to resemble Wikipedia.
Vector - Wikipedia's default skin. Registered users can adjust look and feel in their account preferences.
The purpose and subject matter of a wiki, the nature of its content, and the intended user experience may require a more or less extensive adaptation of MediaWiki skin. Or maybe you just want to make your wiki unique?
About 70 different skins are listed on mediawiki.org and most of them were created by enthusiasts and/or professional developers with the goal of:
Since it makes sense to make your wiki look great and distinct, these skins should generally be viewed as templates for your own design. Therefore, ease of setup is important.
For review, we selected mature skins that are regularly maintained, provided with good tutorials, and improved support for the Semantic Mediawiki. Follow our blog to learn more about Semantic MediaWiki, MediaWiki, and Wikibase.
Until recently, skin responsiveness — its ability to adapt itself to different devices and screen sizes — was kind of a nice feature. This is a must these days for most of public wikis.
There are two main approaches to making your MediaWiki site look good on both desktop and mobile devices.
Mobile frontend wikis use two separate skins for large and small screens, as well as an extension called “MobileFrontend” that attempts to automatically detect the current device and select the correct skin. They also have manual switching between mobile and standard view that can be used in case of failure.
Leaving aside the architecture of the solution, we only note that the use of two skins significantly increases the cost of their configuration, support and maintenance.
This approach is widely used in long-established wikis, including Wikipedia.
Vector and MinervaNeue Skins by Runescape.wiki.
Runescape.wiki is a nice example of a mobile frontend wiki. It features the customized Vector skin on desktop and the customized MinervaNeue for mobile view. It offers a number of configuration options, including a dark skin variant. Made with love and talent.
A family of relatively new skins that can do the work of MobileFrontend on their own and can adapt to any screen size without the need for a second skin.
They usually make use of one of the well-known responsive frameworks, designed for rapid development and easy management, and providing access to extensive collections of re-usable variables, behaviors and ready to use elements. It is much easier to find developers or maintainers for wikis with framework based skins.
Here are some popular MediaWiki skins of this type:
Chameleon skin offers several predefined page layouts to choose from and a simple content flow with dropdown based navigation. Packed with free Font Awesome 5 icons. Provides a huge amount of variables that can be changed centrally, modifying the appearance of the skin. You can create your own layouts using a set of custom components. The skin allows you to import bootswatches - ready-made collections of styles from Bootstrap.
Chameleon Skin customized by WikiTeq.
Pivot offers a page layout familiar to Wikipedia users, with a sidebar on the left. Supports Font Awesome 4.7. A modest set of configuration options for tweaking the skin's key features, including adding AddThis social buttons for sharing and subscribing to content.
Pivot MediaWiki Skin.
Tweeki creates simple uncluttered pages with dropdown navigation. Font Awesome can be easily added with a configuration option. Tweeki defines common MediaWiki elements and allows you to customize their visibility or create your own elements. The skin comes with a good set of controls, although their location is a bit scattered (parser functions, system messages, local config files). Out of the box, Tweeki provides a scrolling feature that allows you to keep track of the current position on the page in a sticky table of contents.
Tweeki MediaWiki Skin.
A very flexible MediaWiki skin developed as a game wiki, but due to its clean design, it can be used for any general purpose wiki. Citizen features a number of candies like the switch between light and dark mode, adjustable font size and page width. It is worthy to note that the related controls are made available for all users in the skin interface. The skin supports collapsing and expanding article sections. Its table of contents remains accessible anywhere in the article and can follow the current place on the page.
Citizen MediaWiki Skin.
A Media Wiki skin should look great on any device and be easy to customize to match the content of the wiki. For this purpose, we have made the Chameleon skin the standard for installations by WikiTeq: significant design changes can be made relatively easily, at desired depth, and at a lower cost.
This does not mean that we settled on Chameleon. WikiTeq docker image, for example, comes with 8 pre-installed skins of different flavors to cover the most common wiki types:
When starting new MediaWiki projects, we listen to our clients and advise on the best skin option for their use case. If your wiki needs to be unique, WikiTeq can design you a custom skin from scratch.
Here’s what we've been up to recently.
Explore the innovative integration of Large Language Models (LLM) like GPT into MediaWiki to enhance wiki functionalities. Our comprehensive blog discusses various integration methods, from API to direct hosting and extension development, alongside potential use cases.
From us to your inbox weekly.
We use cookies to provide and improve our services. By using our site, you consent to cookies.
Learn more
