Skin:Timeless

This page is a translated version of the page Skin:Timeless and the translation is 100% complete.
Other languages:
Bahasa Indonesia • ‎Deutsch • ‎English • ‎Esperanto • ‎Türkçe • ‎español • ‎français • ‎italiano • ‎polski • ‎português • ‎русский • ‎עברית • ‎فارسی • ‎中文 • ‎日本語 • ‎한국어
Bu görünüm MediaWiki 1.31 ve üstü ile birlikte gelir. Böylece tekrar indirmek zorunda değilsiniz. Ancak, verilen diğer talimatları izlemeniz gerekir.
MediaWiki görünüm kılavuzu - kategori
Crystal Clear device blockdevice.png
Timeless
Sürüm durumu: beta
Timeless MediaWiki Skin.png
Yazar(lar) Isarra
MediaWiki 1.31+
Lisans GNU Genel Kamu Lisansı 2.0 veya üstü
İndir
Örnek
Parametreler
* $wgTimelessBackdropImage
Translatewiki.net adresinde mevcutsa, Timeless görünümü çevirin
Kullanım ve sürüm matrisi kontrol edin;
Sorunlar : Açık görevler · Hata bildir
Cep telefonunda görüntülenen Timeless görünümdeki İngilizce Vikipedi ana sayfası

Winter temelli görünüm ve bu 2015 köy çeşmesi tartışmasında önerilen tüm mantıklı şeyleri bir görünümde dahil etme girişimi. Sessiz. Onlara söyleme. Ciddi olmadığımı düşündüler.

Timeless (Zamansız) yüksek oranda duyarlı web tasarımı destekliyor ve dar cep telefonu ekranlarından geniş monitörlere kadar çok sayıda ekran genişliği için optimize edildi.

Cep telefonları için varsayılan kaplama olan minimalist arayüz olan Minerva aksine, Timeless, tüm masaüstü boyutlarında varsayılan masaüstü görünümü olan Skin:Vector gibi masaüstü odaklı bir temanın işlevselliğini içerir.

Buna ek olarak, Timeless, üst çubukta, “Düzenle” ve “Geçmişi gör” düğmelerinin yanında, kullanıcı katkı listesine belirgin ve kolay bir kısayol sunar.

Genel amaç, her şeyi göstermek, yalnızca içeriğe odaklanmak (kış) veya karanlık/gece görüntülemeye geçmek için çoklu görüntüleme modlarıyla hem içeriği hem de düzenleme araçlarını vurgulayan tam özellikli bir görünüm yapmaktır. Bir gün bunu gerçekten yapacak.

Skin:Timeless-DarkCSS ile kullanıcılar AMOLED ekranlarda göz yorgunluğunu ve güç tasarrufunu azaltmak için koyu arka planı manüel olarak etkinleştirebilirler. Talimatlar bu sayfada mevcuttur.

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

Kurulum

  • Dosyaları indirin ve skins/ klasörünüzdeki Timeless adlı dizine yerleştirin.
  • LocalSettings.php dosyanızın altına aşağıdaki kodu ekleyin:
wfLoadSkin( 'Timeless' );

Yapılandırma

Aşağıdakiler yalnızca MediaWiki 1.34+ sürümünde desteklenir

$wgTimelessBackdropImage (string, default 'cat.svg')
Uygun bir arka plan resmine $wgLogo gibi ayarlayın. Öneri 500-750 piksel genişliğe ayarlanmış bir SVG'dir: HiDPI desteği için SVG; boyut gerçekten ne olursa olsun olabilir, ancak bunun varsayılan kedi ile benzer bir arka içerik görünümüne neden olacağı yerde.
Bir arkaplanın potansiyel olarak diğer arkaplan renk temaları ile değiştirilmeden çalışması için, daha sonra uygulanırsa ve uygulandığında, b/w alfa değerlerinin% 20-50 opaklık siyah/beyaz olduğu, şeffaf bir tek renkli görüntü önerilir. Parçalar da 10-50/255 civarındadır, çünkü bu saf beyaz/siyah olmayan çoğu şey üzerinde çalışmasına izin vermelidir.
Örnekler (aslında yukarıdaki öneriye uymaz ve bu nedenle muhtemelen karanlık arka planlar üzerinde çalışmaz): Timeless zemin (wiktionary).svg ve Timeless zemin (metawiki).svg
$wgTimelessLogo (null|string|array, default null)
Özel logo oluşturma, özellikle Timeless için özel logolara izin verir (başlıkla çoğaltmayı önlemek için kelime işareti olmayan kare logo sürümü gibi). Ayrıca, yalnızca 135x135 piksel logolar için çalıştığı ve tüm yüksek çözünürlüklü logoları bu boyuta ölçeklendirdiği için $wgLogoHD kullanmaktan biraz daha iyi HiDPI desteği sağlar.
Vikide tarafından yüklenen bir dosyaya Timeless olarak işaret etmek için kullanılabilir (bunu kullanıyorsanız dosyayı korumayı unutmayın) veya sadece bir dizi kullanarak logo yolu ayrıntılarını manüel olarak belirleyebilirsiniz.
$wgLogo ve $wgLogoHD nominal olarak 160x160px logosu için ayarlanmış, ancak HD sürümlerinin de doğru boyutta olduğu yerlerde yeniden kullanmak için:
$wgTimelessLogo = [
	'1x' => $wgLogo,
	'1.5x' => $wgLogoHD['1.5x'],
	'2x' => $wgLogoHD['2x'],
	'width' => 160,
	'height' => 160
];
Vikide yüklenen $dosyasını kullanmak için:
$wgTimelessLogo = 'Cows.svg';
  • Yüklenen logoların en iyi şekilde SVG'ler veya 2x veya daha yüksek boyutlu raster olarak çalıştığını ve her hedef çözünürlüğü için ölçeklendirileceğini unutmayın. Açıkçası bu yaklaşım dosya yüklemelerinin ve küçük resimlerin etkinleştirilmesini gerektirir.
  • Önerilen nominal boyutlar muhtemelen 135px ile 165px arasındadır.
$wgTimelessWordmark (null|string|array, default null)
Başlık bannerı markalarının varsayılan Linux Libertine serif metni yerine bir görüntü kullanmak için. $wgTimelessLogo ile aynı kullanım yaklaşımı.
Yani İngilizce Vikipedi Wikipedia wordmark.svg kullanabilir, şöyle:
$wgTimelessWordmark = 'Wikipedia wordmark.svg';
Veya her çözünürlük sürümünün bir dizisini ve her bir boyut için yukarıdaki boyutları belirtin (onlarla daha olasıdır, açıkçası).
  • Yüklenen bir dosya vikide kullanılmıyorsa, boyutları belirtmek gerekir.
  • 200 piksel genişliğe ve 38 piksel yüksekliğe kadar önerilen nominal boyut.