Skin:Timeless

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

Timeless Sürüm durumu: kararlı
Yazar(lar)	Isarra
Uyumluluk politikası	MediaWiki ile birlikte anlık görüntüler yayımlanır. Master geriye dönük olarak uyumlu değil.
MediaWiki	1.31+
Lisans	GNU Genel Kamu Lisansı 2.0 veya üstü
İndir	Görünümü indir Git [?]: Git master'ı indir depoyu göz at (Phabricator · GitHub) tarih yaz veri deposu katkıda bulunanlar (GitHub) kod incelemesi
Örnek	mediawiki.org This article
Parametreler $wgTimelessBackdropImage
Quarterly downloads	156 (Ranked 3rd)
Public wikis using	2,938 (Ranked 13th)
Public wikis using as default skin	165
Translatewiki.net adresinde mevcutsa, $2 görünümü çevirin
Vagrant rolü	timeless
Sorunlar :	Açık görevler · Hata bildir

Cep telefonunda görüntülenen Timeless görünümdeki İngilizce Vikipedi ana sayfası

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.

Görünüm, Winter ile temel alır ve bu 2015 Köy çeşmesi tartışması ile ilgili önerileri birgörünümle birleştirme girişimi.

Kurulum

• Vagrant kullanılıyorsa, vagrant roles enable timeless -p ile kurun

Manüel 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' );
  

• Gerektiği gibi yapılandırın.
•  Yapıldı - Görünümün başarıyla yüklendiğini doğrulamak için vikinizde Special:Version sayfasına gidin.

Özellikler

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, “Değiştir” 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.

MobileFrontend/Minerva'dan farklı olarak, Timeless, tabloları mobil çözünürlükler için zorla yeniden biçimlendirmez ve bunun yerine, kullanıcıların kendi kullanımlarına göre optimize edilmiş tabloları ve şablonları kendileri hazırlamasını bekler ve teşvik eder.

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.

Gelecekteki hedef, aşağıdaki özelliklere sahip tam özellikli bir görünüm oluşturmaktır:

1. hem içeriği hem de düzenleme araçlarını vurgular,
2. her şeyi göstermek, yalnızca içeriğe (kış) odaklanmak veya
3. karanlık/gece izlemeye geçme.

Duyarlı web sitesi tasarımı ayrıntıları

Bu bölüm varsayılan yapılandırmasına dayanmaktadır.

≥1340 pikselleri

Simüle edilmiş 1340 piksel ekran genişliğinin üzerinde site, üç sütun halinde görülebilir. Bazı site gezinme bölümleri içerik alanının sol tarafındayken (ör. "Gezinti", "Araçlar") bazıları sağ taraftayken ("Daha fazla", "Yazdır/dışa aktar", "Diğer projelerde", "Diğer dillerde", "Kategoriler") sağ tarafta.

Yaklaşık 1900 piksellik simüle edilmiş bir tarayıcı görüntü alanı genişliğinden başlayarak, içeriğin bulunduğu merkez sütunun genişliği 1261 piksele sabitlenirken, önceki görünümlerde Vector ve MonoBook ekran genişliğiyle süresiz olarak genişletilebilir.

Bu görünümle bu CSS kod pasajı kullanılarak belirsiz bir içerik genişliği elde edilebilir.

Bu CSS kodu ile kullanıcılar isteğe bağlı olarak birinci (sol taraf) sütundaki üçüncü (sağ taraf) sütundan gezinme bölümlerini, daha önce 1339 ila 1100 piksel arasında tarayıcı genişliği yapıldığı gibi görüntüleyebilirler.

1339 - 1100 pikseli

Site iki sütunda görülebilir. İçerik alanının sağ tarafındaki site gezinme bölümleri, mevcut bölümlerin altında sol tarafa taşınır.

1100 pikselden az

Site tek bir sütunda görülebilir. İçerik alanı tüm ekran alanını doldurur. Kategoriler, Vector ve Monobook üzerinde oldukları sayfanın alt kısmında görünür

Site gezinme bölümleri, metin etiketleri olan bir üst gezinme çubuğuna daraltılır ve şu anda saf CSS yerine JavaScript kullanılarak gösterilir ve Skin:MinervaNeue içinde uygulandığı gibi :checked gizlenir.

851 pikselden az

851 pikselin altındaki Timeless duyarlı tasarımı, cep telefonu ekranlarına uyum sağlıyor.

İçerik alanının yukarısındaki gezinme öğelerindeki metin etiketleri (ör. "Sayfa", "Tartışma", "Değiştir", "Kaynağı değiştir", "Geçmişi gör") yatay alandan tasarruf etmek için gösterilmez; her ikisi yerine yalnızca simgeler gösterilir.

Site gezinme bölümleri, simge etiketlerine sahip bir üst gezinme çubuğuna daraltılmıştır.

CSS pasajları

Bu kod pasajları, bir MediaWiki hizmetlisi olarak MediaWiki:Timeless.css ile, normal bir kullanıcı olarak kişinin kendi kullanıcı alanı CSS'ye veya bir kullanıcı dış görünümüne tarayıcı eklentisi ziyaretçi olarak yapıştırarak görünümün görünümünü özelleştirmek için kullanılabilir.

Belirsiz içerik genişliği

Sınırlı içerik genişliklerinin eleştirisi ​​ile ilgili olarak, bu CSS kod pasajını kullanarak, merkez (içerik) sütununun genişliği ve üstündeki renk çubuğunun mavi orta çizgisi ile süresiz olarak ekran genişliği genişler.

/* Belirsiz içerik genişliği */
@media screen and (min-width: 851px) {
    .color-middle-container,
    .ts-inner { max-width: none; }
}

Tek taraflı gezinme menüsü

Bu kod pasajını kullanarak, sağ taraftaki gezinme menüsünün öğeleri (#mw-related-navigation), 1100 ila 1330 piksel tarayıcı genişliği hatta Vector ve MonoBook görünümlerinde bilindiği gibi tek taraflı gezinme menüsünü tercih eden kullanıcılar için 1340 pikselin ötesinde tarayıcı genişliği devam edecektir.

Kod ayrıca yukarıdan sınırsız içerik genişliği koduyla birlikte çalışır.

/* Tek taraflı gezinme menüsü */
@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;
  }
}

/* Üst renk çubuğunu sayfa sütunlarıyla hizalayın */
.ts-inner {
  padding: 0 0 0 1em;
}

/* Alttaki logoları yeniden hizalama */
#footer { padding-right: 1em; }

Üst çubuktaki modernize edilmiş yazı tipleri

Aşağıdaki CSS kodu, kullanıcı adının şu anda biçimlendirmemiş yazı tiplerine ve tarayıcı genişliğinin 852 ile 1100 piksel arasında görüntülenen üst çubuk gezinme menülerine bir dizi modern yazı tipi türü (yedek yazı tipleri dahil) ekler.

/* Üst çubuk yazı tipi modernizasyonu */
#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;
}

/* Altları olan harfleri kesmekten kaçının: g,j,p,q,y */
#personal h2 span {
    height: 1.5em;
    position:relative;
    bottom:0.1em
}

/* Üçgen pozisyon yaması */
#personal h2::after {
   position: relative;
   bottom: 0.5em;
}

Gezinme sırasında bölüm başlığını vurgulayın

Bu CSS kod pasajı, uzun bir belgede gezinirken geri dönmeyi kolaylaştırmak için gezinme üzerindeki son bölüm başlığını vurgular.

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

Eski yamalar

Bu görünümün erken ve daha az olgun bir sürümüne sahip eski MediaWiki kurulumlarının kullanıcıları ve uzak arayüz hizmetlileri, bu süre zarfında görünümdeki eksiklikleri gidermek için bu kod yamalarını güçlendirebilir:

/* Genişlik optimizasyonu: Cep telefonlarında çok dar görünümü önler */
@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; }
}

/* İçindekiler tablosu girinti yaması (eksikse başlık seviyesi girintilerini yeniler) */
#toc ul ul {
  margin: 0 0 0 2em;
}

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 backdrop (wiktionary).svg ve Timeless backdrop (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 File:Cows.svg 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.

Timeless'ın Manual:$wgLogos olarak belirlenen kelime işaretini ve HiDPI logolarını desteklediğini unutmayın; bu nedenle, bunu yapmamak için özel bir nedeniniz yoksa yalnızca bunu kullanmanız önerilir. Metin başlığı stilleri temelde yalnızca her zaman işe yaramayacak tahminlerden ibaret olduğundan, özellikle site başlığı oluşturma, doğru şekilde işlemek için bir kelime işareti başlığı gerektirebilir veya gerektirmeyebilir. Sözcük işaretini doğru şekilde oluşturmanın diğer seçenekleri şunları içerir:

• Vikinin Timeless.css içinde kaydırmasız veya farklı bir yazı tipi boyutu değeri gibi bazı özel CSS'ler ayarlama
• timeless-sitetitle mesajının içeriğini değiştirerek farklı bir ekran dizesi ayarlama