Open main menu


Other languages:
English • ‎español • ‎中文 • ‎日本語
The Refreshed skin does not support Internet Explorer 8 and below.
MediaWiki skins manual - category
Crystal Clear device blockdevice.png
Release status: stable
Description A clean, modern skin originally designed for use on Brickimedia, and now designed for all wikis
Author(s) Brickimedia (Adam Carter, George Barnick, MtMNC, ShermanTheMythran, Jack Phoenix, Drew1200, SirComputer, Seaside98, Samantha Nguyen, Lewis Cawte), MacFan4000
Latest version 3.4.2 (2018-07-14)
MediaWiki 1.28+
License GNU General Public License 2.0 or later
Translate the Refreshed skin if it is available at
Check usage and version matrix;
Issues : Open tasks · Report a bug

Refreshed is a clean, modern skin designed for use on the Brickimedia wiki family. Developed by the users of Brickimedia, this skin can work standalone or can integrate with extensions such as SocialProfile . This skin uses responsive CSS to adapt to mobile devices, and is fully compatible with all modern smartphones and tablets.

Note that Refreshed version 3.1.9 and above require MediaWiki 1.28 or greater. Refreshed 3.0.0-3.1.8 work on MediaWiki 1.25 or greater.


  • Download and place the file(s) in a directory called Refreshed in your skins/ folder.
  • Add the following code at the bottom of your LocalSettings.php:
wfLoadSkin( 'Refreshed' );
  • Download the wikifont bundle from and place it in /skins/Refreshed/refreshed/wikifont.
  • Take the files out of the wikifont-master folder and put them in the wikifont folder
  •   Done - Navigate to Special:Version on your wiki to verify that the skin is successfully installed.


Styling colors

There is also documentation on helping you style the components! If you have trouble finding the direct selectors and want an easy foundation, then use the following base below:

body {
	background-color: /* bg-color of site */ ;
	color: /* content/text color of site */ ;

#header-wrapper {
	background: /* bg-color/gradient of header web component */ ;

.dropdown-highlighted {
	background-color: /* bg-color of header items and dropdown menus */ ;
	color: /* content/text color of header items and dropdown menus */ ;

/* styling for medium and large sized tablets */
@media (max-width: 1000px) and (min-width: 601px) {
	#header-wrapper .search-form {
		background-color: /* bg-color of search on tablet */ ;

/* styling for phones and smaller tablets */
@media (max-width: 600px) {
	#sidebar-wrapper {
		background-color: /* bg-color of sidebar on phones */ ;
	#user-info .header-menu {
		background-color: /* bg-color of user dropdown menu */ ;

Page status indicators

As of Refreshed version 3.0, page status indicators are supported in the skin. By default all page status indicators are hidden on Refreshed's mobile display, but can be individually displayed on mobile with the following code:

#mw-indicator-name { /* replace "name" with the indicator's "name" value */
	display: inline-block;

Header categories

A feature introduced in Refreshed 3.0 is header categories. Header categories can be added and customized through the front-end as well. To modify the header categories, head to MediaWiki:Refreshed-navigation and create a list similar to this:

* Category 1
** MediaWiki:Refreshed-navigation|Entry 1
** MediaWiki:Refreshed-navigation|Entry 2
** MediaWiki:Refreshed-navigation|Entry 3
** MediaWiki:Refreshed-navigation|Entry 4
* Category 2
** MediaWiki:Refreshed-navigation|Entry 1
** MediaWiki:Refreshed-navigation|Entry 2
** MediaWiki:Refreshed-navigation|Entry 3
** MediaWiki:Refreshed-navigation|Entry 4
* Category 3
** MediaWiki:Refreshed-navigation|Entry 1
** MediaWiki:Refreshed-navigation|Entry 2
** MediaWiki:Refreshed-navigation|Entry 3
** MediaWiki:Refreshed-navigation|Entry 4

There is no limit to the number of categories or entries you can include, however at some point depending on screen resolution, it will overflow across the header.

To display the header categories in a different language, go to MediaWiki:Refreshed-navigation/de where de is the language code and create the same list in the desired language.


Refreshed is an ad-supported skin, as can be seen on any Brickimedia project. By default, the Refreshed skin contains no advertisements, but can be configured to use Google Ads with the code below placed in your LocalSettings.php file:

function showRefreshedAdvert( &$footerExtra ) {
	$footerExtra = '
		<div id="advert">
			<p>' . wfMessage( 'refreshed-advert' )->escaped() . '</p>
			<script async src="//"></script>
			<!-- Refreshed ad -->
			<ins class="adsbygoogle"
				(adsbygoogle = window.adsbygoogle || []).push({});
	return true;
$wgHooks['RefreshedFooter'][] = 'showRefreshedAdvert';

You will have to change the data-ad-client and data-ad-slot to reflect the code given to you by Google.

To make your ads responsive across devices, add the following CSS to MediaWiki:Refreshed.css, or MediaWiki:Global-refreshed.css if you're on a wikifarm setup. This requires installing GlobalCssJs .

@media (max-width: 500px) {
	.adsbygoogle {
		width: 320px;
		height: 50px;

@media (max-width:799px) {
	.adsbygoogle {
		width: 480px;
		height: 60px;

@media (min-width: 800px) {
	.adsbygoogle {
		width: 728px;
		height: 90px;


The Refreshed skin doesn't use $wgLogo like most skins as it displays a logo in the form of a wordmark, which is not favorable in most other skins ($wgLogo being a global variable that would effect all skins). To adjust the wordmark seen in Refreshed, you can define it two ways:

  • MediaWiki:Refreshed-this-wiki-wordmark: Normal logo, the content is the image logo URL.
  • MediaWiki:Refreshed-this-wiki-mobile-logo: The logo displayed on the mobile, the content is the image logo URL.

  Tip for wiki admins: For optimal display on Refreshed's mobile skin, you should consider either using downscaled images or SVG images so that the logo does not display as blurry on "retina" (high PPI) mobile device screens

Wiki farm support

Refreshed was initially designed to work for wiki farms. By default, Refreshed's header only shows the current site in the header, but the skin can be configured to show a dropdown where the site logo is to contain other sites on the farm. It can be defined with the MediaWiki:Refreshed-wiki-dropdown: The syntax is as follows:

* Wiki name|logo image URL|wiki URL

The third parameter, the wiki URL defaults to the wiki's main page but can be customized with MediaWiki:Refreshed-this-wiki-url.

Using Echo with Refreshed

Current Echo

The latest Echo version (which includes the update where notifications have been divided into alerts and notices) is provided in Refreshed v3.2.1.

Pre-July 2016 Echo

Pre-July 2016 Echo support (Echo before it was divided into Notices and Alerts) was built in Refreshed 3.0.0 and thus the below code "hacks" are not necessary.

With the design of Refreshed versions 2 and earlier, the Echo notifications extension defaults to appearing in the user tools dropdown. To put the Echo button in a more ideal place following similar interfaces on other websites, a JavaScript "hack" has been made to change the position of Echo and some CSS to make it compatible with the skin. This code can be added to your wiki's MediaWiki:Refreshed.js page:

$( '#pt-notifications' ).appendTo( '#userinfo' );

And MediaWiki:Refreshed.css page:

#pt-notifications {
	position: absolute;
	right: -2em;
	z-index: 3;
	top: 0.85em;

.mw-echo-overlay {
	width: 400px;
	font-family: sans-serif;

#rightbar {
	z-index: 2;

#header {
	z-index: 2;

#contentwrapper {
	z-index: 1;

User avatars

Good news, if you use the SocialProfile extension, user avatars will be integrated into the Refreshed skin automatically, no modification required.


See also