Open main menu
This page is a translated version of the page Skin:Refreshed and the translation is 5% complete.

Other languages:
English • ‎español • ‎中文 • ‎日本語
清新皮肤不支持IE8及以下版本。
MediaWiki佈景主題手冊 - 分類
Crystal Clear device blockdevice.png
Refreshed
發行狀態: 穩定版
Refreshed.png
描述 A clean, modern skin originally designed for use on Brickimedia, and now designed for all wikis
作者 Brickimedia (Adam Carter, George Barnick, MtMNC, ShermanTheMythran, Jack Phoenix, Drew1200, SirComputer, Seaside98, Samantha Nguyen, Lewis Cawte), MacFan4000
最新版本 3.4.2 (2018-07-14)
MediaWiki 1.28+
許可協議 GNU General Public License 2.0 or later
下載
README.md
例子 http://en.brickimedia.org/
翻譯Refreshed佈景主題(如果在translatewiki.net可用)
檢查使用和版本矩陣。
問題 : 开放的工作 · 回報錯誤

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.

Install

  • 下载文件,并将其放置在您skins/文件夹中的Refreshed目录内。
  • 将下列代码放置在您的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
  •   完成 - 在您的wiki上打开至Special:Version,以确认扩展已成功安装。

Configure

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

.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

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.

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:

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

Logo/Wordmark

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.

  维基管理员技巧: 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.

Gallery

See also