Skin:Timeless

This page is a translated version of the page Skin:Timeless and the translation is 47% complete.
Other languages:
Bahasa Indonesia • ‎Deutsch • ‎English • ‎Esperanto • ‎Türkçe • ‎español • ‎français • ‎italiano • ‎polski • ‎português • ‎русский • ‎עברית • ‎فارسی • ‎中文 • ‎日本語 • ‎한국어
この外装は MediaWiki 1.31 以降に同梱されています。 そのため再度ダウンロードする必要はありません。 しかし、提供されているその他の手順に従う必要はあります。
MediaWiki 外装マニュアル - カテゴリ
Crystal Clear device blockdevice.png
Timeless
リリースの状態: ベータ
Timeless MediaWiki Skin.png
作者 Isarra
MediaWiki 1.31+
ライセンス GNU 一般公衆利用許諾書 2.0 以降
ダウンロード

パラメーター
* $wgTimelessBackdropImage
translatewiki.net で翻訳を利用できる場合は、Timeless 外装の翻訳にご協力ください
使用状況とバージョン マトリクスを確認してください。
問題点 : 未解決のタスク · バグを報告
English Wikipedia homepage in the Timeless skin viewed on a mobile phone

Winterを基にした外装 (スキン) で、実用的なものをすべて取り込むことを意図しています。これは2015年の英語版ウィキペディアの井戸端で提案され外装となりました。シーッ。言わないでください。本気ではなかったんです。

Timeless highly supports responsive web design and is optimized for a multitude of screen widths ranging from narrow mobile phone screens up to wide monitors.

Unlike the minimalistic skin Minerva , which is the default skin for mobile phones, Timeless incorporates the functionality of a desktop-focussed theme such as Skin:ベクター , the default desktop skin, onto all screen sizes.

In addition, Timeless offers a distinct convenient shortcut to the user contribution list in the top bar, next to the “編集” and “履歴表示” buttons.

全体的な目的は、コンテンツと編集ツールの両方を強調、すべてを表示するための複数の表示モード、コンテンツ (winter) のみに焦点を当てる、ダークモード/夜間モードへの切り替えを備える、フル機能の外装を作ることです。

With Skin:Timeless-DarkCSS , users are able to manually enable a dark background for reducing eye strain and power saving on AMOLED displays. 説明はそちらにあります。

Responsive website design details

This section is based on the default configuration.

≥1340 pixels

Above a simulated screen width of 1340 pixels, the site is visible in three columns. Some site navigation sections are on the left side of the content area (e.g. “Navigation”, “Tools) while some are on the right side (“More”, “Print/Export”, “In other languages”, “In other projects”, “categories”) are on the right side.

Starting at a simulated browser viewport width of around 1900 pixels, the width of the center column with the content is fixed to 1261 pixels, while on the earlier skins Vector and MonoBook, it is able to extend indefinitely with screen width.

An indefinite content width can be achieved with this skin using this CSS code snippet.

With this CSS code, users can optionally display the navigation sections from the third (right-side) column in the first (left-side) column, like already done at 1339 to 1100 pixels of browser width.

1339 to 1100 pixels

The site is visible in two columns. The site navigation sections on the right side of the content area move to the left side below the existing sections.

Less than 1100 pixels

The site is visible on one column. The content area fills the entire screen space. Categories appear at to the bottom of the page, where they are on Vector and Monobook.

The site navigation sections are collapsed into a top navigation bar with text labels, and currently shown and hidden using JavaScript, rather than pure CSS, as implemented in the skin: MinervaNeue using :checked.

Less than 851 pixels

Below 851 pixels, the responsive design of Timeless adapts to mobile phone screens.

The text labels on the navigation elements above the content area (e.g. “Article”, “Discussion”, “Edit”, “Edit source”, “History”) are not shown to save horizontal space; only the icons are shown instead of both.

The site navigation sections are collapsed into a top navigation bar with icon labels.

CSS snippets

Indefinite content width

Regarding criticism of limited content widths, using this CSS code snippet, the width of the center (content) column and the blue middle line of the colour bar above it extends indefinitely with screen width.

/* Indefinite content width */
@media screen and (min-width: 851px) {
    .color-middle-container,
    .ts-inner { max-width: none; }
}

One-sided navigation menu

Using this code snippet, the elements of the right-side navigation menu (#mw-related-navigation) will continue to be displayed in the left column (under #mw-site-navigation) like they do on 1100 to 1330 pixels of browser width even beyond 1340 pixels of browser width, for users who prefer a one-sided navigation menu as known from the skins Vector and MonoBook.

The code also works in combintion with the limitless content width code from above.

/* One-sided navigation menu */
@media (min-width: 1340px) {
  #mw-content-block {
    display: block;
  }
  #mw-content,
  #content-bottom-stuff {
    margin-left: 14em;
  }
  #mw-content-wrapper {
    float: right;
    margin-left: -14em;
    width: 100%;
  }
  #mw-related-navigation {
    width: 14em;
    padding: 0 1em 0 0;
  }
  div.color-middle {
    margin-right: 0;
  }
}

/* Align top colour bar with page columns */
.ts-inner {
  padding: 0 0 0 1em;
}

/* Re-aligning bottom logos */
#footer { padding-right: 1em; }

Modernized fonts in top bar

The following CSS code adds a set of modern font types (including fallback fonts) to the currently unformatted fonts of the user name and top-bar navigation menus displayed between 852 and 1100 pixels of browser width.

/* Top bar font modernization */
#mw-header *,
#mw-site-navigation *,
#mw-related-navigation *  { font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif  }

/* Avoid cutting off letters with descenders: g,j,p,q,y */
#personal h2 span {
    height: 1.5em;
    position:relative;
    bottom:0.1em
}

/* Triangle position patch */
#personal h2::after {
   position: relative;
   bottom: 0.5em;
}

Highlight section title upon navigation

This CSS code snippet highlights the last section header upon navigation to facilitate returning to it when scrolling through a long document.

.mw-headline:target {
  background-color: gold;
}

インストール

  • ファイルをダウンロードして、フォルダー skins/ 内の Timeless という名前のディレクトリに配置してください。
  • LocalSettings.php の末尾に以下のコードを追加してください:
wfLoadSkin( 'Timeless' );
  • 必要に応じて設定します。
  •   完了 - 自分のウィキの Special:Version に移動して、外装が正しくインストールされたことを確認してください。

設定

MediaWiki 1.34以降でサポートされています。

$wgTimelessBackdropImage (string, default 'cat.svg')
背景画像に$wgLogoを設定します Recommendation is an svg set to 500-750px wide: svg for HiDPI support; the size can really be whatever, but where that will result in a similar behind-content look as with the default cat.
For a background to potentially also work unmodified with other background-colour themes if and when they are later implemented, a transparent single-colour image is recommended, with 20-50% opacity black/white, where the alpha values of the b/w parts are likewise around 10-50/255, as this should allow it to work on most anything that isn't pure white/black.
Examples (which actually don't follow the above recommendation and thus probably won't work on dark backgrounds): Timeless backdrop (wiktionary).svg and Timeless backdrop (metawiki).svg
$wgTimelessLogo (null|string|array, default null)
Special logo rendering, allowing for custom logos for Timeless specifically (such as a square logo version without the wordmark in order to avoid duplication with the header). Also provides slightly better HiDPI support than using $wgLogoHD, as that only works for 135x135px logos, and scales all high-res logos down to this size.
Can be used to point Timeless at a File uploaded onwiki (remember to protect the file if using this) simply by providing the file name, or you can specify the logo path details manually using an array.
To reuse a $wgLogo and $wgLogoHD already set for a nominally 160x160px logo, but where the HD versions also come out the right size:
$wgTimelessLogo = [
	'1x' => $wgLogo,
	'1.5x' => $wgLogoHD['1.5x'],
	'2x' => $wgLogoHD['2x'],
	'width' => 160,
	'height' => 160
];
wikiにアップロードされたFile:Cows.svgを使用する:
$wgTimelessLogo = 'Cows.svg';
  • Note that uploaded logos work best as svgs or as 2x- or higher-sized rasters, and will be scaled down for each target resolution. Obviously this approach requires file uploads and thumbnailing to be enabled.
  • 135pxから165pxが推奨されます。
$wgTimelessWordmark (null|string|array, default null)
バナーのワードマークにデフォルトのLinux Libertineセリフテキストの代わりにイメージを使用する方法。 $wgTimelessLogoと同じ使用方法
So the english Wikipedia might use Wikipedia wordmark.svg, like so:
$wgTimelessWordmark = 'Wikipedia wordmark.svg';
Or specify an array of each resolution version, plus the dimensions, per above (more likely with them, frankly).
  • If not using an uploaded file onwiki, specifying the dimensions is required.
  • 推奨されるサイズは200px×38px