Skin:Evelution

MediaWiki skins manual - category
Evelution
Release status: unstable
Author(s) HM100
Latest version 156.0.1 (2024-07-07)
Compatibility policy Master maintains backwards compatibility.
MediaWiki 1.39+ (main branch)
1.37-1.41 (REL1_37 branch)
PHP 7.3+
License GNU General Public License 3.0 or later
Download
Example Example on MediaWiki Skins Wiki, Wikimedia Skins Lab
Parameters
  • $wgEvelutionLeftPersonalLinks
  • $wgEvelutionDisableColorManagement
  • $wgEvelutionDisableRightRail
  • $wgEvelutionStickyRail
  • $wgEvelutionForceFullWidth
  • $wgEvelutionDisableRightRailFromSpecificPages
  • $wgEvelutionMonoLogo
  • $wgEvelutionThemeA
  • $wgEvelutionThemeB
  • $wgEvelutionThemeC
  • $wgEvelutionThemeD
  • $wgEvelutionThemeE
  • $wgEvelutionThemeF
  • $wgEvelutionThemeG
  • $wgEvelutionThemeH
  • $wgEvelutionChangeMessageBoxesToBanners
  • $wgEvelutionCustomDCMMode1
  • $wgEvelutionCustomDCMMode2
  • $wgEvelutionCustomDCMMode3
  • $wgEvelutionCustomDCMMode4
  • $wgEvelutionThemeADark
  • $wgEvelutionThemeBDark
  • $wgEvelutionThemeCDark
  • $wgEvelutionThemeDDark
  • $wgEvelutionThemeEDark
  • $wgEvelutionThemeFDark
  • $wgEvelutionThemeGDark
  • $wgEvelutionThemeHDark
  • $wgEvelutionEnableTaskbarAppLabelsOnLargeScreens
  • $wgEvelutionUseAPCAContrastRules
Public wikis using 8 (Ranked 112nd)
Public wikis using as default skin 0
Translate the Evelution skin if it is available at translatewiki.net

Evelution is a skin designed to provide a MediaWiki appearance that it is as close to Fandom's FandomDesktop skin and Windows 11. If you like to send us a bug report, do it so via the GitHub issues or via our SkinEvelution support server.

Installation

edit
  • Download and place the file(s) in a directory called Evelution in your skins/ folder.
  • Add the following code at the bottom of your LocalSettings.php file:
    wfLoadSkin( 'Evelution' );
    
  •   Done - Navigate to Special:Version on your wiki to verify that the skin is successfully installed.

Configuration

edit

As of version 4.3.0, Evelution allows you to configure it with some of the known configuration options.

LocalSettings.php

edit

Those configurations must be put into LocalSettings.php

Current

edit

Configuration options that are still able to be changed:

Option Type Default value Since Until Documentation
$wgEvelutionLeftPersonalLinks Boolean false 4.3.0 still in use If true, the alignment of the .upper-links contnainer in the personal links will be set to left instead of center.
$wgEvelutionDisableColorManagement Boolean false 4.3.0 still in use If true, disables access to Visual colors and the theme chooser. Likewise, it uses a hardcoded theme with colors taken from the System colors, akin to Forced Colors Mode behavior.
$wgEvelutionDisableRightRail Boolean false 5.0.0 still in use If true, disables the right rail that appears on appears on all pages (Except Special Pages and MediaWiki Pages) while on ?action=view.
$wgEvelutionStickyRail Boolean true 8.1.0 still in use If false, it removes the sticky behavior of Right Rail on larger screens with 700 pixels or more. $wgEvelutionDisableRightRail must be set to false in order for this to work.
$wgEvelutionForceFullWidth Boolean false 26.1.0 still in use If true, it makes content area being always at its maximum width, and cannot be toggled back to its original width.
$wgEvelutionDisableRightRailFromSpecificPages Array [] 27.1.0 still in use If it includes a list of pages (Array is not empty), it disables the right rail that appears on those pages while on ?action=view. $wgEvelutionDisableRightRail must be set to false in order for this to work.
$wgEvelutionMonoLogo Boolean (Or String since 152.3.0) false 45.1.0 still in use If set to true, it makes the wiki's logo behave like the wiki's wordmark (Making it masked so it adapts any color). If set to "auto", it behaves like when set to true albeit only when using High Contrast mode This is highly recommended for plain black or white logos. Beginning with 152.4.0, you can set $wgLogos['icon-mono'] to change the monochromatic logo.
$wgEvelutionThemeA
$wgEvelutionThemeB
$wgEvelutionThemeC
$wgEvelutionThemeD
$wgEvelutionThemeE
$wgEvelutionThemeF
$wgEvelutionThemeG
$wgEvelutionThemeH
Associative Array (For each configuration setting) Varies 65.0.0 still in use Controls each Light theme's settings. $wgEvelutionThemeA controls the 1st theme slot, $wgEvelutionThemeB controls the 2nd theme slot, $wgEvelutionThemeC controls the 3rd theme slot, $wgEvelutionThemeD controls the 4th theme slot, $wgEvelutionThemeE controls the 5th theme slot, $wgEvelutionThemeF controls the 6th theme slot, $wgEvelutionThemeG controls the 7th theme slot and $wgEvelutionThemeH controls the 8th theme slot. An example theme template that configures theme A by default (Along with its dark counterpart) can be found here. Prior to 121.0.0, it would not conform to any specific color scheme
$wgEvelutionChangeMessageBoxesToBanners Boolean false 66.0.0 still in use If true, most errorboxes, warningboxes, successboxes and messageboxes will be converted into banner notifications
$wgEvelutionCustomDCMMode1
$wgEvelutionCustomDCMMode2
$wgEvelutionCustomDCMMode3
$wgEvelutionCustomDCMMode4
Associative Array (For each configuration setting) Varies 111.0.0 still in use Controls each custom DCM Mode's settings. $wgEvelutionCustomDCMMode1 controls the 1st custom DCM Mode, $wgEvelutionCustomDCMMode2 controls the 2nd custom DCM Mode, $wgEvelutionCustomDCMMode3 controls the 3rd custom DCM Mode and $wgEvelutionCustomDCMMode4 controls the 4th custom DCM Mode. An example theme template that configures custom DCM Mode A by default can be found here.
$wgEvelutionThemeADark
$wgEvelutionThemeBDark
$wgEvelutionThemeCDark
$wgEvelutionThemeDDark
$wgEvelutionThemeEDark
$wgEvelutionThemeFDark
$wgEvelutionThemeGDark
$wgEvelutionThemeHDark
Associative Array (For each configuration setting) Varies 121.0.0 still in use Controls each Dark theme's settings. $wgEvelutionThemeADark controls the 1st Dark theme slot, $wgEvelutionThemeBDark controls the 2nd Dark theme slot, $wgEvelutionThemeCDark controls the 3rd Dark theme slot, $wgEvelutionThemeDDark controls the 4th Dark theme slot, $wgEvelutionThemeEDark controls the 5th Dark theme slot, $wgEvelutionThemeFDark controls the 6th Dark theme slot, $wgEvelutionThemeGDark controls the 7th Dark theme slot and $wgEvelutionThemeHDark controls the 8th Dark theme slot. An example theme template that configures theme A by default (Along with its light counterpart) can be found here.
$wgEvelutionEnableTaskbarAppLabelsOnLargeScreens Boolean false 136.2.0 still in use If true, in 1390+ screens, taskbar apps will have their label shown next to the icon rather than when hovering on it in a tooltip above the app icon
$wgEvelutionUseAPCAContrastRules Boolean false 160.0.0 still in use If true, color contrast of theme's colors will be done using the newer APCA Guidelines as opposed to the older WCAG ones

Past

edit

Configuration options that were once able to be changed, but were later removed from a later version:

Option Type Default value Since Until Documentation
$wgEvelutionForceOneHeader Boolean false 4.3.0 73.0.0 If true, the superbar was disabled and the minibar was forced to be always visible, akin to how the skin is displayed while editing articles. In Evelution 74.0.0 Superbar is no longer present so that config would be useless
$wgEvelutionServerMode Boolean false 5.1.0 85.2.1 If true, it changed the layout to be more server/development wikis-friendly (No Desktop Local Navigation, Addition of Left actions link before the content (Which had the local navigation menus), smaller page header title, full width Small Breakpoint size and no right rail on Help and Project Namespaces)
$wgEvelutionCustomFont String "" 5.3.0 45.2.2 If set, setted the font family of the skin to a different font than the ones used primarily aka Didact Gothic. In 46.0.0, you must define the ``--custom-font`` variable to an individual theme instead to get the same behavior but this is scoped to a specific theme only
$wgEvelutionIconStyle String "outlined" 5.5.0 6.1.0 It settled the style of Material Icons. Values allowed: outlined, filled, rounded, sharp, two-tone. Values outside the allowed ones resulted in outlined icons.
$wgEvelutionIconWireframe Boolean true 6.2.0 8.0.0 If false, it removed the default outline set to icons, making them look like filled.
$wgEvelutionClassicDisabledColorManagement Boolean false 79.3.0 80.4.0 If true, it disallowed the use of Backgrond, ActiveCaption, and InactiveCaption system colors during disabled color management and replaced its usage with Canvas, LinkText and GrayText respectively in all cases, not just when using Chrome with forced colors mode.
$wgEvelutionDisableRepoLinks Boolean false 101.2.0 106.0.0 If true, it removed most or replaced links that are normalized to the skin itself with ones that are noralized to the wiki. In 106.0.0, those changes are merged with base, rendering this configuration option useless.

URL Parameters

edit

As of version 7.6.0, Evelution has its own URL parameters that will temporary enforce specific use of a feature (Such as Different theme) for the current page load. Those can be mixed such as ?safemode=1&usecpetheme=B&usecolormode=dark&hidenavbar=true

Current

edit
Option Accepts Since Until Documentation
usecpetheme String 7.6.0 still in use Sets the active theme (0/theme-A/A for the 1st theme, 1/theme-B/B for the 2nd theme, 2/theme-C/C for the 3rd theme, 3/theme-D/D for the 4th theme, 4/theme-E/E for the 5th theme, 5/theme-F/F for the 6th theme, 6/theme-G/G for the 7th theme or 7/theme-H/H for the 8th theme). Invalid strings will use the 1st theme.
usevisualstyle String 7.6.0 still in use Takes a valid visual style name and applies it. (general, basic, simple, classic, custom_1, custom_2, custom_3, custom_4 and standard are currently valid). Invalid ones will use standard visual style.
usevisualcolors String 7.6.0 still in use Takes a valid visual color pack name and applies it. (forced, evelution, evelution__dyna, colors, colors__dark, colors__pokemon, android, qqore, dynamic, dynamic__dark, standard and nocolormanagement are currently valid). Invalid ones will use standard visual colors.
fullwidth Boolean 7.6.0 still in use If true, content width is full otherwise fixed.
hiderail Boolean 7.6.0 still in use If true, right rail starts collapsed otherwise shown. Has no effect on small screens and when no right rail appears. Starting with Evelution 38.0.0, up to 76.1.1, it makes both rails start collapsed.
useaccent Boolean 18.0.0 still in use If true, certain elements (Minibar, title bars, toolbar) will have accented appearance instead of being unaccented.
usecontrastmode String 31.0.0 still in use Takes a valid contrast mode and applies it. (auto, low, med, hi and vhi are valid). Invalid ones will use auto contrast mode.
hiderightrail Boolean 38.0.0 still in use If true, right rail starts collapsed otherwise shown. Has no effect on small screens and when no right rail appears.
usedevicetheme String 78.0.0 still in use If set to either auto (In Dark App Mode), auto-dark (In Light App Mode) or dark, it inverts the colors of the current theme as well as the images and the wiki logo, otherwise it doesn't. (auto, auto-dark, light and dark are valid)
usecolorstyle String 78.0.0 still in use Takes a valid color style and applies it. (standard, colorscale, hottemperature and coldtemperature are valid)
usedcmmode String 81.0.0 still in use Takes a valid DCM mode and applies it. (standard, basic, simple and classic are valid)
usevisualstyle String 84.0.0 still in use Takes a valid visual mode name and applies it. (standard, lite and contrast are currently valid). Invalid ones will use standard visual style.
hideleftnav Boolean 105.0.0 still in use If true, local navigation starts collapsed otherwise shown. Has no effect on small and medium screens as the local navigation is never shown permanently.
usecolorhue String 109.0.0 still in use Takes a number from 0 to 360 and applies the specified hue shift on all colors. Setting it to 180 for instance will set shift the hue of all colors by 180deg, not set the hue of all colors to 180deg.
usecolorsaturation String 112.0.0 still in use Takes a number from 0 to 100 and applies the specified saturation on all colors. Setting it to 50 for instance will set saturation of all colors to 50% of their original ones, not to 50%
usecolorstylebehavior String 119.0.0 still in use Takes a valid color style behavior and applies it. (duo and solo are valid)
usecolorscheme String 121.0.0 still in use If set to either auto (In Dark App Mode), auto-dark (In Light App Mode) or dark, it selects the Dark Color Scheme of the theme pack, otherwise it selects the Light ones. (auto, auto-dark, light and dark are valid)
useseriffont Boolean 124.0.0 still in use If true, UI/Primary font is set to Serif otherwise to Sans Serif.

Past

edit
Option Accepts Since Until Documentation
usefilter String 7.6.0 9.4.0 Took a valid color filter name and applied it. (invert, night, gray, darkgray, yelblk, bluwht and standard were valid). Invalid ones will use no filter.
usecolormode String 7.6.0 77.2.0 Took a valid color mode and applies it. (auto, auto-r, light and dark are valid). Invalid ones would use auto color mode. Replaced by usecolorstyle in Evelution 78.0.0
hidetoolbar Boolean 7.6.0 48.1.0 If true, personal links started collapsed otherwise shown.
hidenavbar Boolean 7.6.0 55.0.0 If true, sticky header started collapsed otherwise shown.
hideleftrail Boolean 38.0.0 76.1.1 If true, left rail started collapsed otherwise shown. Had no effect on non XL screens and when no left rail appeared.
useclassicdcm String 79.4.0 80.4.0 If true, the classic disabled color management would be used instead of the modern ones. Replaced by usedcmmode in Evelution 81.0.0

Notes

edit
  • Evelution has been tested and works with VisualEditor. It works best in MW 1.37 to 1.42 With the 146.1.1 update, the search feature in the bottom bar also works on newer MW versions. With the 156.0.0 update, the main branch lost support for MW 1.37 to 1.38 while gaining support for MW 1.42, with MW 1.37 to 1.38 support being moved to the REL1_37 branch (Though that branch doesn't support MW 1.42+)
  • Evelution fetches article and image counts from Special:Statistics. As of Version 3.9.0, it also fetches edit and user counts from the said page.
  • An "In other languages" dropdown will appear in the bottom of the left sidebar if the page has interlanguage links added.
  • A "Language Variants" dropdown will appear in the bottom of the left sidebar for wikis that have a language with variants set as default (Such as Chinese)
  • There is an html class for the currently active theme until 9.6.0 (theme-A, theme-B, theme-C or theme-D) or the theme attribute with value either set to A, B, C or D from 9.7.0 onwards. Several attributes to the body element, all related to theme properties are also present.
  • Evelution has its support server and GitHub repository links in the left sidebar. As of Version 3.3.0, a link pointing to its Documentation is also added.
  • Evelution displays the Sitenotice (If present) above the article name.
  • All footer-places links found in the MediaWiki footer in many skins such as Vector are shown in the "Explore" dropdown menu residing on the upper links in the left sidebar.
  • As of version 2.6.0, if the Echo extension is installed, a Notifications link pointing to Special:Notifications will appear in the bottom links of the left sidebar, before the themes dropdown.
  • As of version 2.7.0, a floating toolbar has been added and it is attached to the content space container. This toolbar has seven important links and is not customizable without custom JS. As of version 3.0.0, it can be collapsed. As of version 3.2.0, similar behavior has been added to the sticky local navigation
  • Starting with version 3.1.1, Evelution uses local storage to store its settings for the Article Width (Between Fixed and Full), Toolbar Display (Between Full or Collapsed) and Active theme (Between the four themes) into database keys eve-pref-content-full, eve-pref-toolbar-full and eve-pref-active respectively. These apply to a specific wiki on the Evelution Skin on a single browser.
  • As of version 3.4.0, Evelution supports Large Desktops otherwise known as devices with 1500 pixels in width or more by providing larger typography sizes and content width. As of Version 3.6.0, Evelution likewise supports Mobile Phones otherwise known as devices with 704 pixels in with or less. Those get an article layout similar to the mobile side of MonoBook. Version 3.7.0 contains three different sub-breakpoint sizes for the Mobile Breakpoint.
  • As of version 3.8.0, support for different Visual Styles (Modifying the Layout) and Visual Colors (Overriding colors set by the wiki) has been added with several of them being included. More of them will be added through releases. Those settings are preserved through page reloads. As of version 6.6.0, those are translatable into other languages.
  • As of version 4.4.0, icons embedded using the OOUI library are now adapting to the text color of the parent element, allowing them to be in colors other than black, white, red, green, yellow and blue.
  • As of version 4.8.0, a right rail has been added. It has an activity module which has a tranclusion of Special:RecentChanges with minimal formation to be in line with the same module on Fandom's FandomDesktop skin. A information module is also available which contains information about the wiki in brief. This info is empty by default and its content is editable at MediaWiki:Eve-about-module-info message. As of Version 4.10.0, right rail can be collapsed. As of version 5.1.0, right rail sizes is at 275px for medium screens, 300px for large screens and 325px for XL screens
  • As of version 5.3.0, Logo support has been evolved. The wordmark is fetched from $wgLogos['icon'] if exists like past releases, with fallback to either $wgLogos['x1'] or $wgLogo if one of them exist. Otherwise, no wordmark appears. The Site Title, while still being a text mark, if $wgLogos['wordmark'] exists, the wordmark set takes place over the textmark (But appears at a constant size across brekpoints). Wordmark will appear masked so as it can adapt wiki's theme. Width and height set to the wordmark is ignored as it sets the size automatically.
  • As of Version 6.7.0, Evelution respects system's native dark mode. This will trigger a special phenomenon called Inverted Colors. This work was completed with version 7.5.0
  • As of Version 7.10.0, a built-in Theme Designer applet has been Added. It is accessible at CPE ThemeDesigner page and content put inside that page will be overwritten by that applet. This does not load the current theme but rather works as an interactive applet for generating new themes. Users can also test the theme to see how well it fits. This work was completed with version 8.0.0. Starting from version 10.6.0, it is accessed instead at Special:CPEThemeDesigner with CPE ThemeDesigner page being an alias to the corresponding special page (But with visible right rail)
  • As of Version 8.12.0, a series of floating action buttons have been added to Evelution, akin to FandomDesktop skin. This work was completed by 8.14.0
  • As of version 9.1.0, Evelution supports displaying user's avatar in global navigation but only if SocialProfile is installed on the wiki.
  • As of version 11.17.0, if $wgLogos['evelution-nostickylogo'] is set, no logo will appear in the Sticky Navigation. This works up to 125.2.0 as in 126.0.0 it no longer works.
  • Version 13.0.0 onwards has various changes to make skin feel more responsive
  • Version 14.0.0 onwards supports having a discord widget in the right rail
  • Version 15.0.0 onwards has overhauled theming along with better performance
  • Version 18.0.0 added the ability to show accent color on certain containers
  • Later versions have more features, including a built in contrast adjuster,better color adjustemnt for unsutiable colors and better theming
  • As of Version 49.0.0, left sidebar has been merged with the bottom toolbar, forming the Taskbar which contains almost everything from the former left sidebar (Personal Links, Echo Support, Search etc.) and the former toolbar (Almost every link found there). A purge button is also available in the new taskbar, next to the personal tools dropdown.
  • Starting Version 66.0.0, Bubble notifications have been megred with Banner Notifications meaning mw.notify creates a banner notification instead, though Bubble notification styling still exist for cases that cannot be handled.
  • Evelution has been tested to work with MediaWiki 1.36, 1.37, 1.38 and 1.39.
  • Version 100.0.0 has completed support for Material You-class theming and all automated theming is done in that way. Future releases also contain more bug fixes
  • Version 121.0.0 adds support for distinct color schemes (Between Light and Dark), having a maximum of 16 different themes in each theme pack

See also

edit