Skin:Refreshed

From MediaWiki.org
Jump to: navigation, search
The Refreshed skin does not support Internet Explorer 8 and below.
MediaWiki skins manual - category
Crystal Clear device blockdevice.png
Refreshed

Release status: stable

Refreshed.png
Description A clean, modern skin originally designed for use on Brickimedia, and now designed for all wikis
Author(s) BrickimediaBrickimedia (Adam Carter, George Barnick, MtMNC, ShermanTheMythran, Jack Phoenix, Drew1200, SirComputer, Seaside98, Samantha Nguyen, Lewis Cawte)
Latest version

3.1.1

MediaWiki 1.25+
License GPL-2.0+
Download
README.md
Example http://en.brickimedia.org/

Translate the Refreshed skin if it is available at translatewiki.net

Check usage and version matrix;

Issues:

Open tasks · Report a bug

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

Installation[edit source]

The Refreshed skin can be installed either through its Git repository or through ComposerComposer.

Git/Download[edit source]

  • 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 https://github.com/munmay/WikiFont/archive/master.zip and place it in /skins/Refreshed/refreshed/wikifont.
  • Take the files out of the wikifont-master folder and put them in the wikifont folder
  • YesY Done - Navigate to Special:Version on your wiki to verify that the skin is successfully installed.

Composer[edit source]

Composer installation for the Refreshed skin has never been tested!

The Refreshed skin allows for easy installation using Composer.

  1. If not already done, install Composer.
  2. If not already done, copy composer-example.json to composer.json in your MediaWiki installation directory
  3. If not already done, add the following keys to composer.json to allow Composer installing development versions:
    • "minimum-stability": "dev"
    • "prefer-stable": true
  4. If you are upgrading from a version installed without using Composer,
    • Remove the old skin from the skins directory
    • Remove the require_once( "$IP/skins/Refreshed/Refreshed.php" ); from LocalSettings.php
  5. Run composer require mediawiki/refreshed-skin "~1.0" from the MediaWiki installation directory (or php composer.phar require mediawiki/refreshed-skin "~1.0" if applicable)
  1. YesY Done – Navigate to "Special:Version" on your wiki to verify that the skin is successfully installed.
* It is not necessary to install any dependencies anymore. Composer will take care of that.
  • Remove the mediawiki subdirectory and all its contents from the vendor directory in your MediaWiki installation directory
  • Run composer update from the MediaWiki installation directory (or php composer.phar update if applicable)

Configuration[edit source]

Styling colors[edit source]

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 */ ;
}

.header-button:hover, 
.header-dropdown-item:hover, 
.header-button-active, 
.sitedropdown-highlighted, 
.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[edit source]

As of Refreshed version 3.0, page status indicatorsHelp: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[edit source]

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:

* MediaWiki:Refreshed-navigation|Category 1
** MediaWiki:Refreshed-navigation|Entry 1
** MediaWiki:Refreshed-navigation|Entry 2
** MediaWiki:Refreshed-navigation|Entry 3
** MediaWiki:Refreshed-navigation|Entry 4
* MediaWiki:Refreshed-navigation|Category 2
** MediaWiki:Refreshed-navigation|Entry 1
** MediaWiki:Refreshed-navigation|Entry 2
** MediaWiki:Refreshed-navigation|Entry 3
** MediaWiki:Refreshed-navigation|Entry 4
* MediaWiki:Refreshed-navigation|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.

Advertisements[edit source]

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="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- Refreshed ad -->
			<ins class="adsbygoogle"
				style="display:inline-block;width:728px;height:90px"
				data-ad-client="ca-pub-9543775174763951"
				data-ad-slot="7733872730"></ins>
			<script>
				(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>';
	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 GlobalCssJsExtension:GlobalCssJs#Installation.

@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;
        }
}

Logo/Wordmark[edit source]

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.


Tools.svg 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[edit source]

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[edit source]

As of Refreshed's version 3.0 release, Echo support is included by default, and thus the below code "hacks" are not necessary.

With the design of Refreshed versions 2 and earlier, the EchoExtension: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[edit source]

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

Gallery[edit source]

See also[edit source]