Halopedia:Skins/Onyx

PARDON OUR DUST! This page is still under construction.

Onyx is a MediaWiki skin designed to emulate and improve upon Oasis, the desktop skin used on wikis hosted by Wikia/FANDOM. It was primarily written by Dab1001 with help from Jack Phoenix, and is maintained by the Halopedia team. It is free and open-source under the GPL v2 license, and its source code can be found here.

First conceived in late 2018 while planning the merger of Halo Nation into Halopedia, Onyx's original aim was to ease the transition to Halopedia, for users going from Wikia's service to an independently-hosted wiki. Christened "Onyx" after the eponymous Forerunner shield world in the Halo universe, development began on the project in January 2019. Progress was slow throughout most of the year, but the skin is expected to be ready in the fourth quarter of 2019.

Since its inception, the scope of the project has expanded beyond just Halopedia, aiming to provide a fully-featured, general-purpose skin for use on any wiki. Although primarily a surrogate for Oasis, Onyx hopes to improve upon its progenitor wherever possible, with the inclusion of minor improvements and refinements, like a wide page width for more article space, and quality-of-life features like a scrolling table of contents.

Onyx also has a mobile companion skin planned, Trevelyan, which is very loosely based upon Wikia's mobile skin, Mercury. Trevelyan, however, is still in its infancy and is far from complete.

Installation

1. Make sure that your wiki is using a compatible version of MediaWiki (basically whatever Halopedia is currently using; see Special:Version)
2. Check out the source code via git into your wiki's skins directory: git clone https://github.com/Halopedia/Onyx.git
3. Add the following to your wiki's LocalSettings.php file to initialize the skin: wfLoadSkin( 'Onyx' );
4. Configure at will (see below for details)
5. Visit your wiki's Special:Version page to verify that the skin has been correctly installed
6. That's it!

Configuration options

Onyx features a number of configuration options to allow wikis to customise it to their needs. For convenience and to avoid polluting the global namespace, all Onyx configuration options can be set using an associative array assigned to the variable $wgOnyxConfig. Nevertheless, if you would prefer to set each option individually as its own global variable, Onyx does support this: just convert the option name into camel case and prefix it with $wgOnyx - for example, banner-logo would become $wgOnyxBannerLogo. The skin will prioritise values set in $wgOnyxConfig over those set in individual global variables, if there is a conflict.

If any are left unset, or set to a value of an incorrect type, the skin will use a sensible default value instead. Despite this, however, it is recommended that you at least set banner-logo and header-logo, as these default to the value of $wgLogo, which typically points to a square image ill-suited to the Onyx skin.

Example

This is an example Onyx configuration setup.

$wgOnyxConfig = [
	'navigation-source' => 'MediaWiki:Onyx/Navigation',
	'toolbox-source' => 'MediaWiki:Onyx/Toolbox',
	'banner-logo' => $wgScriptPath . '/images/4/47/myBannerLogo.png',
	'header-logo' => $wgScriptPath . '/images/6/3A/myHeaderLogo.png'
];

This same configuration could also be achieved in the alternative format, like so:

$wgOnyxNavigationSource = 'MediaWiki:Onyx/Navigation';
$wgOnyxToolboxSource = 'MediaWiki:Onyx/Toolbox';
$wgOnyxBannerLogo = $wgScriptPath . '/images/4/47/myBannerLogo.png';
$wgOnyxHeaderLogo = $wgScriptPath . '/images/6/3A/myHeaderLogo.png';

List

The following is a list of all configuration options currently supported by Onyx.

Option name	Type	Default value	Description	Version
navigation-source	string	"MediaWiki:Onyx-navigation"	The full page name (including namespace) from which the navigation menus should be drawn. If the specified page does not exist, the skin will default to the content of MediaWiki:Sidebar instead.	1.0.0≤
toolbox-source	string	"MediaWiki:Onyx-toolbox"	The full page name (including namespace) from which the custom toolbox links should be drawn. If the specified page does not exist, the skin will default to the usual toolbox links instead.	1.0.0≤
enable-custom-user-toolboxes	boolean	true	Determines whether users can customise their own toolboxes, by creating a sub-page of their user page in the same format as the toolbox customisation page.	1.0.0≤
custom-user-toolbox-suffix	string	"Onyx-toolbox"	The name of the sub-page of the user page from which the custom toolbox information should be drawn, if custom user toolboxes are enabled.	1.0.0≤
banner-logo	string	$wgLogo	The URL of the image that should be used for the logo on the banner. Set it in the same manner as you would $wgLogo. It is recommended that the image be exactly 45px in height, and at most 400px in width. The image will be automatically scaled down if it is too tall.	1.0.0≤
use-banner-logo-image	boolean	true	This decides whether an image logo should be displayed in the banner, or if it should instead be replaced by the wiki's title in plain text. True corresponds to displaying the logo image, and false to displaying the title as text.	1.0.0≤
header-logo	string	$wgLogo	The URL of the image that should be used for the logo on the page header. Set it in the same manner as you would $wgLogo. It is recommended that the image be exactly 135px in height, and at most 400px in width. The image will be automatically scaled down if it is too tall.	1.0.0≤
show-sidebar-by-default	boolean	true	Determines whether the sidebar should be collapsed or expanded upon initial page load, if there are no saved cookies indicating the user's preference.	1.0.0≤
show-sidebar-by-default-on-edit	boolean	false	Determines whether the sidebar should be collapsed or expanded by default when editing, if there are no saved cookies indicating the user's preference.	1.0.0≤
show-sidebar-by-default-on-main-page	boolean	false	Determines whether the sidebar should be collapsed or expanded by default on the wiki's main page, if there are no saved cookies indicating the user's preference.	1.0.0≤
enable-recent-changes-module	boolean	true	Enables or disables the recent changes module on the sidebar, with true corresponding to enabled. Disabling recent changes may have a minor performance increase, as it removes the need for another database read on page load. However, the results are cached, so the hit to performance should be minimal.	1.0.0≤
recent-changes-cache-expiry-time	integer	30	The time, in seconds, before the cached information used by the recent changes sidebar module should be considered expired, and hence refreshed.	1.0.0≤
recent-changes-amount	integer	7	The number of recent changes that should be displayed on the recent changes sidebar module.	1.0.0≤
enable-page-contents-module	boolean	true	Determines whether or not the page contents sidebar module should be displayed. This has no impact on server-side performance, as the contents list is populated using client-side JavaScript.	1.0.0≤
page-contents-min-headings	integer	3	The minimum number of headings the page needs to include in order for the page contents sidebar module to be displayed.	1.0.0≤
custom-sidebar-static-source	string	"Template:Onyx/Sidebar/Static"	The full page name (including namespace) of the page from which the static custom sidebar module content should be drawn. The static custom module sits at the very top of the sidebar and will not follow the user as they scroll along the page.	1.0.0≤
custom-sidebar-sticky-source	string	"Template:Onyx/Sidebar/Sticky"	The full page name (including namespace) of the page from which the sticky custom sidebar module content should be drawn. The sticky custom module sits at the bottom of the sidebar and will follow the user as they scroll along the page.	1.0.0≤
use-html5	boolean	true	Determines if the skin will output an HTML5 webpage, or one that is compliant with older versions of HTML.	1.0.0≤

Navigation and Toolbox

For the navigation and toolbox lists, Onyx implements a superset of the standard MediaWiki:Sidebar syntax. Firstly, it supports nested lists, which will manifest as dropdown menus. These can be up to two levels deep. For example, the following content would create a dropdown list labelled "Lorem", with three options: "Ipsum", "Dolor" and "Consectetur", where "Dolor" is itself a dropdown list with options "Sit" and "Amet".

* Lorem
** Ipsum
** Dolor
*** Sit
*** Amet
** Consectetur

In addition, the navigation list supports assigning 14x14 icons to the options. These either use the id of any of Onyx's built-in icons, in which case the icons will be displayed as inline SVGs (in HTML5 mode) and can hence be styled using CSS, or can be the page name of a file on the wiki, in which case the corresponding image will be scaled to the appropriate size. The syntax to assign these icons to the navigation options is as follows:

* PAGE_TITLE <onyx_icon_id> | LINK_TEXT
* PAGE_TITLE {File:FILENAME} | LINK_TEXT

Because '<', '>', '{' and '}' are not valid characters in page titles, this syntax will never conflict with page names. However, it is not compatible with other skins, and so it is strongly advised that you do not use this syntax on any navigation list pages shared by other skins.