Kulit:Timeless

Kulit ini tersedia di MediaWiki 1.31 dan selanjutnya. Jadi Anda tidak perlu mengunduhnya lagi. Akan tetapi, Anda masih perlu mengikuti instruksi lain yang diberikan.

Manual kulit MediaWiki - kategori

Timeless Status rilis: stabil
Pencipta	Isarra
Compatibility policy	Snapshots releases along with MediaWiki. Master is not backwards compatible.
MediaWiki	1.31+
Lisensi	Lisensi Publik Umum GNU 2.0 atau lebih baru
Unduh	Unduh kulit Git [?]: Unduh master Git telusuri repositori (Phabricator · GitHub) riwayat commit kontributor repositori (GitHub) peninjauan kode
Contoh	mediawiki.org This article
Parameter $wgTimelessBackdropImage
Quarterly downloads	156 (Ranked 3rd)
Public wikis using	2,938 (Ranked 13th)
Public wikis using as default skin	165
Terjemahkan kulit Timeless jika tersedia di translatewiki.net
Vagrant role	timeless
Masalah :	Tugas terbuka · Laporkan kekutu

Halaman utama Wikipedia bahasa Inggris dalam kulit Timeless dilihat di telepon genggam

Timeless sangat mendukung desain web responsif dan dioptimalkan untuk berbagai lebar layar mulai dari telepon genggam yang sempit hingga monitor yang lebar.

Sebuah ini didasarkan pada Winter dan merupakan upaya untuk memasukkan saran pada diskusi Village pump 2015 ke dalam sebuah.

Pemasangan

• Jika menggunakan Vagrant , pasanglah dengan vagrant roles enable timeless -p

Instalasi manual

• Unduh dan letakkan berkas-berkasnya di dalam sebuah direktori yang bernama Timeless di folder skins/ Anda.
• Tambahkan baris berikut di bawah LocalSettings.php Anda:

  wfLoadSkin( 'Timeless' );
  

• Atur konfigurasi seperlunya.
•  Selesai - Telusuri ke Special:Version di wiki Anda untuk memastikan kulitnya berhasil dipasang.

Features

Tidak seperti kulit minimalis Minerva , yang merupakan kulit default untuk telepon genggam, Timeless menerapkan fungsionalitas dari tema berfokus desktop seperti Kulit:Vector , kulit default desktop, ke semua ukuran layar.

Selain itu, Timeless menawarkan pintasan mudah ke daftar kontribusi pengguna di bar paling atas, di sebelah tombol "Sunting" dan "Lihat riwayat".

Tujuan umumnya adalah membuat sebuah kulit yang secara penuh mengedepankan perkakas konten dan penyuntingan, dengan banyak mode penglihatan untuk memperlihatkan semuanya, berfokus hanya di konten (winter), atau berpindah ke penglihatan gelap/malam. Suatu hari ini akan bekerja.

Unlike MobileFrontend/Minerva, Timeless does not forcibly restyle tables for mobile resolutions, and instead expects and encourages users to make tables and templates responsive themselves, optimized to their particular usage.

Dengan Skin:Timeless-DarkCSS , pengguna bisa secara manual mengaktifkan latar belakang gelap untuk mengurangi tegangan pada mata dan menyimpan tenaga tampilan AMOLED. Instruksinya tersedia di halaman itu.

The future goal is to create a fully featured skin that:

1. emphasizes both content and editing tools,
2. with multiple view modes for showing everything, focusing only on content (winter), or
3. switching to dark/night viewing.

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. "Navigasi", "Perkakas") while some are on the right side ("Lainnya", "Cetak/ekspor", "Dalam proyek lain", "Bahasa lain", "Kategori").

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. "Halaman", "Pembicaraan", "Sunting", "Sunting sumber", "Lihat riwayat") 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

These code snippets can be used to customize the skin's appearance, by pasting them into MediaWiki:Timeless.css as a MediaWiki administrator, into one's own user space CSS as a regular user, or into a user skin browser extension as a visitor.

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 combination 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;
  }
  .mw-wiki-logo {
  	display: inline-block;
  }
}

/* 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 sans serif font types (including fallback fonts) to the currently serif fonts (Linux Libertine, Times New Roman, etc.) 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;
}

Legacy patches

Users and remote interface administrators of older MediaWiki installations with an early and lesser mature version of this skin can retrofit these patches of code to counter shortcomings in appearance in the mean time:

/* Width optimization: Prevents too narrow appearance on mobile phones */
@media (max-width:850px) {
  #mw-content  { padding: 0.5em 0.5em 3em; }
  #firstHeading { width: 100%; }
  #mw-header-container { padding: 3.75em 0.5em 0.35em; }
  #site-navigation h2 { left: 0.5em; }
  #p-logo-text { left: 3em; }
  #user-tools h2 { right: 1em; }
  #site-tools h2 { right: 4em; }
}

/* Table of contents indentation patch (retrofits header level indentations if missing) */
#toc ul ul {
  margin: 0 0 0 2em;
}

Konfigurasi

Yang berikut ini hanya didukung di MediaWiki 1.34+

$wgTimelessBackdropImage (string, default 'cat.svg')

Tetapkan gambar latar belakang yang sesuai sebagaimana untuk pengaturan $wgLogo. Disarankan gambarnya berformat svg dengan lebar 500-750px: svg untuk dukungan HiDPI; ukurannya boleh berapa saja, tetapi itu akan menghasilkan tampak konten belakang yang mirip dengan gambar kucing yang standar.

Agar latar belakang juga bisa bekerja dengan tema warna latar belakang lainnya tanpa diubah apabila nanti temanya diimplementasikan, gambar transparan satu warna lebih disarankan, dengan opasitas hitam/putih 20-50%, di mana nilai alfa untuk bagian b/w di sekitar 10-50/255,

Contoh (yang sebenarnya tidak mengikuti saran di atas dan kemungkinan tidak akan bekerja di latar belakang yang gelap): Timeless backdrop (wiktionary).svg dan Timeless backdrop (metawiki).svg

$wgTimelessLogo (null|string|array, default null)

Penggambaran logo istimewa, memungkinkan logo yang dibuat khusus untuk Timeless (seperti versi persegi logo tanpa merek kata agar tidak mengulangi kop halaman). Juga menyediakan dukungan HiDPI yang sedikit lebih baik daripada menggunakan $wgLogoHD, karena itu hanya bekerja pada logo 135x135px, dan mengecilkan semua logo beresolusi tinggi ke ukuran ini.

Bisa digunakan untuk mengarahkan Timeless ke Berkas yang diunggah di wiki (jangan lupa melindungi berkasnya apabila menggunakan cara ini) dengan cara menyediakan nama berkasnya, atau Anda bisa menetapkan detail jalur ke logo secara manual menggunakan sebuah larik.

Untuk menggunakan kembali $wgLogo dan $wgLogoHD yang sudah diatur untuk logo 160x160px, tetapi versi HD juga menghasilkan ukuran yang benar:

$wgTimelessLogo = [
	'1x' => $wgLogo,
	'1.5x' => $wgLogoHD['1.5x'],
	'2x' => $wgLogoHD['2x'],
	'width' => 160,
	'height' => 160
];

Untuk menggunakan File:Cows.svg yang diunggah di wiki:

$wgTimelessLogo = 'Cows.svg';

• Perhatikan bahwa logo yang diunggah bekerja paling baik apabila merupakan svg atau merupakan raster berukuran 2x- atau lebih, dan akan dikecilkan untuk setiap resolusi tujuan. Tentu saja pendekatan ini mengharuskan pengunggahan berkas dan thumbnail diaktifkan.
• Ukuran nominal yang disarankan adalah sekitar 135px sampai 165px.

$wgTimelessWordmark (null|string|array, default null)

Untuk menggunakan gambar bukannya teks serif Linux Libertine bawaan untuk spanduk logo kata kop halaman. Pendekatan penggunaan yang sama dengan $wgTimelessLogo.

Jadi Wikipedia bahasa Inggris bisa menggunakan Wikipedia wordmark.svg, seperti:

$wgTimelessWordmark = 'Wikipedia wordmark.svg';

Atau menetapkan sebuah larik untuk setiap versi resolusi, plus dimensinya, sesuai yang di atas (sebenarnya, kemungkinan besar dimensinya disertakan).

• Jika tidak menggunakan berkas yang diunggah di wiki, menetapkan dimensi menjadi diwajibkan.
• Ukuran nominal yang disarankan maksimal berlebar 200px dan bertinggi 38px.

Note that Timeless supports wordmark and HiDPI logos set in Manual:$wgLogos , so just using that is recommended if you have no particular reason not to. In particular the site title rendering may or may not require a wordmark image to render correctly, as the styles for the text title are basically just guesses that will not always work. Other options to make the wordmark render correctly include:

• Setting some custom css in the wiki's Timeless.css, such as no-wrap or a different font-size value
• Setting a different display string via changing the contents of the timeless-sitetitle message