Skin:Refreshed

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.

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

Composer
The Refreshed skin allows for easy installation using Composer.


 * 1) If not already done, install Composer.
 * 2) If not already done, copy   to   in your MediaWiki installation directory
 * 3) If not already done, add the following keys to   to allow Composer installing development versions:
 * 4) If you are upgrading from a version installed without using Composer,
 * 5) * Remove the old skin from the  from LocalSettings.php
 * 6) Run   from the MediaWiki installation directory (or   if applicable)
 * 7)  – Navigate to "Special:Version" on your wiki to verify that the skin is successfully installed.
 * 1) Run   from the MediaWiki installation directory (or   if applicable)
 * 2)  – Navigate to "Special:Version" on your wiki to verify that the skin is successfully installed.

Remarks

 * It is not necessary to install any dependencies anymore. Composer will take care of that.
 * Remove the  subdirectory and all its contents from the   directory in your MediaWiki installation directory
 * Run  from the MediaWiki installation directory (or   if applicable)

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:

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:

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  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  where   is the language code and create the same list in the desired language.

Advertisements
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:

You will have to change the  and   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.

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

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. To enable this dropdown, add the following code into your LocalSettings.php file for each wiki in the farm:

Mobile logo
In Refreshed releases 2.* and earlier, the skin's logo was the same on the mobile skin as it is on the tablet and desktop displays, however as of version 3.0 the wordmark logo only appears when the mobile sidebar is expanded. Refreshed 3.0 introduced a mobile logo as well, which can be added using the following code:

Using Echo with Refreshed
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  page:

And MediaWiki:Refreshed.css page:

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