Gamepedia Yardım Viki
Advertisement

Bu, görübünm özelleştirmesi de yararlı olabilecek en yaygın MediaWiki CSS seçicileri için bir kılavuzdur. Lütfen aşağıdaki seçici listesinin ayrıntılı olmadığını unutmayın. Tarayıcı geliştirici araçları, viki kaplamalarını özelleştirmek isteyen kullanıcılara yardımcı olabilir ve bu kılavuzda açıkça belirtilmeyen öğeleri bulmaya yardımcı olabilir.

Başlık öğeleri[]

Simge ve kenar çubuğu öğeleri[]

Tercihler sayfası öğeleri[]

Viki editör öğeleri[]

İçerik öğeleri[]

Seçici Açıklama Öneriler
#pageWrapper
Sayfa içeriği ve altbilgisi etrafındaki dış sarmalayıcı.
  • Kenar çubuğu için Curse altbilgisine kadar uzanan bir arka plan istiyorsanız, bunu kullanmak bir seçenektir. Arka planın sayfa içeriğinin ve altbilgisinin de arkasında olacağını unutmayın, ancak arka planla bu sayfalarda gizleyebilirsiniz.
div#content
Sayfa içeriği için kapsayıcı.
div#content #firstHeading
Sayfa başlığı.
div#content h1, div#content h2, div#content h3, div#content h4, div#content h5, div#content h6
Makaledeki başlıklar.
  • overflow: auto; ayarı, başlıkların arka planlarını veya kenarlıklarını kayan öğelere göre yapar. Bu, kayan elemanların altındaki eşya bölümlerini itmek için net kullanma ihtiyacını azaltır.
  • IE'nin birçok sürümündeki garip davranışlar nedeniyle, overflow: auto kullanırsanız, kaydırma çubuklarının bazı başlıklarda görünmesini önlemek için yaklaşık 5 piksel padding-bottom gerekir.
.mw-editsection
Başlıklardaki düzenleme bağlantıları.
  • Başlık stilleri de bunu etkiler. Bunu başlık metninden ziyade normal metne benzetmek için stil uygulamak istediğiniz durumlar olabilir.
div#toc, div.toc
İçindekiler kutusu.
div#content .toc .toctitle h2
İçindekiler başlığı
  • Herhangi bir başlık kenarlığını veya arka planını kaldırmak, görünüm tasarımına bağlı olarak bunun için genellikle iyi bir fikirdir.
.toctoggle
İçindekiler göster/gizle düğmesi.
  • Başlık stilleri de bunu etkiler. Bunu başlık metninden ziyade normal metne benzetmek için stil uygulamak istediğiniz durumlar olabilir.
hr
Genel yatay çizgi.
  • Büyük olasılıkla, başka yollar da olsa, bu border-bottom ile şekillendirilecektir.
ul
Genel sırasız listeler.
  • Burada standart list-item-image madde işaretini geçersiz kılabilirsiniz.
table.wikitable
wikitable sınıfındaki içerik tabloları.
  • Varsayılan olarak, genellikle geçersiz kılınması gereken bir arka planı vardır.
table.wikitable > * > tr > th, table.wikitable > tr > th
wikitable sınıfına sahip tablolardaki tablo başlığı hücreleri.
  • Varsayılan olarak, genellikle geçersiz kılınması gereken bir arka planı vardır.
table.wikitable > * > tr > td
wikitable sınıfına sahip tablolardaki tablo veri hücreleri.
  • Varsayılan olarak, genellikle geçersiz kılınması gereken bir arka planı vardır.
table.jquery-tablesorter th.headerSort
Sıralanabilir tablo başlık hücreleri.
  • Sıralama okları buna arka plan olarak eklenir. right center konumlandırılmış bir arka plan olarak yukarı ve aşağı ok görüntüsü ekleyerek bunu geçersiz kılabilirsiniz. Bu genellikle koyu ciltlerde gereklidir.
table.jquery-tablesorter th.headerSortDown
Sıralanabilir tablo başlık hücreleri.
  • Yukarı sıralama oku buna arka plan olarak eklenir. right center konumlandırılmış bir arka plan olarak yukarı ve aşağı ok görüntüsü ekleyerek bunu geçersiz kılabilirsiniz. Bu genellikle koyu ciltlerde gereklidir.
table.jquery-tablesorter th.headerSortUp
Sıralanabilir tablo başlık hücreleri.
  • Yukarı sıralama oku buna arka plan olarak eklenir. right center konumlandırılmış bir arka plan olarak yukarı ok görüntüsü ekleyerek bunu geçersiz kılabilirsiniz. Bu genellikle koyu ciltlerde gereklidir.
table.jquery-tablesorter th.headerSortDown
Sıralanabilir tablo başlık hücreleri.
  • Aşağı sıralama oku buna arka plan olarak eklenir. Bunu, right center konumlandırılmış bir arka plan olarak eklenmiş bir aşağı ok görüntüsü ile geçersiz kılabilirsiniz. Bu genellikle koyu görünümlerde gereklidir.
ul.gallery
Standart bir resim galerisi için kapsayıcı.
li.gallerybox
Standart resim galerisindeki bir görüntünün dış kabı. Görüntü ve resim yazısı içerir.
li.gallerybox div.thumb
Standart resim galerisindeki bir resim için iç görünüm. Sadece görüntüyü içerir.
  • Kenar boşluklarını veya dolguyu ayarlarken dikkatli olun, çünkü bu iç kutunun dış kutudan uzamasına veya en azından merkezden hareket etmesine neden olabilir.
div.gallerytext
Standart resim galerisindeki bir resim için altyazı.
.thumb
Bir resim bağlantısında thumb bağımsız değişkeni kullanılarak oluşturulan bir küçük resim için görünmez dış kap.
  • Bunun yerine div.thumbinner öğesine kenarlıklar, arka planlar ve görsel efektler uygulayın.
  • Bunun yerine .thumb.tleft ve .thumb.tright öğelerine kenar boşluğu ayarlarını uygulayın.
.thumb.tleft
Solda yüzen bir thumb için görünmez dış kap.
  • Burada marj ayarlamaları yapılmalıdır. Küçük resimler ve metin arasında biraz boşluk bırakmak için bazı boşluklar bıraktığınızdan emin olun.
.thumb.tright
Sağda yüzen bir thumb için görünmez dış kap.
  • Burada marj ayarlamaları yapılmalıdır. Küçük resimler ve metin arasında biraz boşluk bırakmak için sol kenar boşluğu bıraktığınızdan emin olun.
div.thumbinner
Hem resim hem de resim yazısının etrafında bir thumb için kapsayıcı.
  • Bunun için varsayılan kenarlığı ve arka planı değiştirmek isteyebilirsiniz.
html .thumbimage
thumb resmi için kapsayıcı.
  • Bunun için varsayılan kenarlığı ve arka planı değiştirmek isteyebilirsiniz.
.thumbcaption
thumb resminin başlığı.
pre
Önceden biçimlendirilmiş metin.
  • MediaWiki'de varsayılan olarak bunun için bir arka plan ve kesik kenarlık vardır.
  • white-space: pre-wrap; ve word-wrap: break-word; uzun satırların içerik alanı genişliğini aşmasını önlemek için önemle tavsiye edilir.
#catlinks
Kategori bağlantıları için kapsayıcı.
  • Çoğu "kutunun" aksine, bunun bir üst marjı olmalıdır.

Altbilgi öğeleri[]

Seçici Açıklama Öneriler
div#footer
Telif hakkı metni ve Hakkında, Feragatnameler vb. bağlantılarını içeren viki sayfa altbilgisi.
#footer #footer-places
Altbilgideki sorumluluk reddi bağlantılarının listesi.
#footer #footer-places li a
Altbilgideki yukarıdaki listede bulunan çengeller.
  • Altbilgideki bağlantıların (bağlantılar) başka bir yerdeki bağlantılardan farklı bir renk olmasını istiyorsanız bunu kullanın.

Genel arayüz öğeleri[]

Seçici Açıklama Öneriler
input[type="text"], input[type="password"], input[type="file"], select, textarea
MediaWiki'de bulunan çeşitli metin ve liste kutuları.
button, input[type="submit"], input[type="button"], input[type="reset"]
MediaWiki'de bulunan çeşitli düğmeler.
.usermessage
Kullanıcı tartışma sayfanız düzenlendikten sonra görünen "Yeni mesajlarınız var" kutusu.
div.mw-warning
Bazı nadir uyarı/hata mesajları.
div.mw-warning-with-logexcerpt
Düzenlendiğinde silinen ve korunan sayfalarda bir veya daha fazla günlük girişi gösteren bir kutu.
div#content fieldset
Birçok sayfada görünen denetimli kutular. Belli bir örnek, Özel:SonDeğişiklikler öğesinde gösterilecek girişleri ayarlamak için bağlantı içeren örnektir.
  • Ne yazık ki, box-shadow, üst kenarlığın göründüğü yerde değil, legend üzerindeki gerçek kutunun kenarında görünür.
div#content fieldset legend
Alan kümesi kutusunun başlığı.
.error
Kırmızı metin bir tür hata ile görüntüleniyor.
  • Daha koyu ciltlerde, bunu daha açık kırmızı veya pembe bir gölge yapmak isteyebilirsiniz.
.errorbox
Kırmızı bir kutudaki metin bir tür hata ile görüntülenir.
  • Varsayılan olarak açık kırmızı zemin üzerine metin siyahtır. Koyu tenli bir yerde olmayabilir.
.warning
Bir tür uyarı vermek için turuncu metin görüntülenir.
  • Daha koyu görünümlerde, bunu daha açık turuncu veya sarı bir gölge yapmak isteyebilirsiniz.
.warningbox
Turuncu bir kutudaki metin bir tür hatayla görüntülenir.
  • Varsayılan olarak açık sarı zemin üzerine metin siyahtır. Koyu tenli bir yerde olmayabilir.
.success
Bazı işlemler başarılı olduktan sonra görüntülenen yeşil metin.
  • Daha koyu görünümlerde, bunu daha açık yeşil bir gölge yapmak isteyebilirsiniz.
.successbox
Başarılı bir işlemden sonra, örneğin tercihleri kaydettikten sonra yeşil bir kutudaki metin.
  • Varsayılan olarak açık yeşil arka plan üzerinde metin siyahtır. Koyu tenli bir yerde olmayabilir.

Sayfa geçmişi öğesi[]

Seçici Açıklama Öneriler
#pagehistory li
Sayfa geçmişi listesindeki bir satır.
  • Seçilen öğelerin (aşağıda) genellikle bir sınırı vardır. Seçili öğelerdeki eksik kenarlığı hesaba katmak için dolgu eklemek iyi bir fikirdir. Bir alternatif, aynı boyuttaki şeffaf bir sınırdır.
#pagehistory li.selected
Sayfa geçmişi listesindeki seçili satırlardan biri.
  • Bu, varsayılan olarak bir kenarlığa ve arka plana sahiptir. Koyu görünümlerde, bunların tipik olarak farklı renklere değiştirilmesi gerekir.
table.diff
Fark sonuçları ve başlıklar için kapsayıcı.
td.diff-otitle
Eski revizyonun başlığı.
td.diff-ntitle
Yeni revizyonun başlığı.
diff-lineno
Her değişimin üstündeki satır numaraları değişir.
td.diff-addedline
Sayfaya eklenen bir satır.
td.diff-addedline .diffchange
Eklenen bir değişiklik satırındaki metin değiştirildi.
td.diff-deletedline
Sayfadan kaldırılan bir satır.
td.diff-deletedline .diffchange
Kaldırma değişiklik satırındaki metin değiştirildi.
td.diff-context
Bağlam sağlamak için değişmeyen çizgiler dahil edildi.

Arama sayfası öğeleri[]

Seçici Açıklama Öneriler
.mw-search-formheader
Arama sayfasındaki "İçerik sayfaları", "Multimedya" vb. bağlantıları içeren kutu.
.mw-search-formheader div.search-types ul li.current a
Seçilen arama türü.
  • Bunu muhtemelen renk düzenine uyacak şekilde değiştirmek isteyeceksiniz. Bunun kesinlikle koyu renk görünümlerde değiştirilmesi gerekecektir.
fieldset#mw-searchoptions
Bu, gelişmiş arama seçeneklerini içeren kutudur. Görmek için "Gelişmiş"'i tıklayın.
  • Bu, varsayılan olarak ayarlanmış bir arka plan ve kenarlığa sahiptir. Renkler genellikle koyu ten renginde değiştirilmelidir.
  • .mw-seatch-formheader de kenar boşluklarını ayarladıysanız, bunun üst kenar boşluğu .mw-seatch-formheader alt kenar boşluğunun negatifi olmalıdır. Üst kenar boşluğunun etkili olması için !important gerektiğini unutmayın.
fieldset#mw-searchoptions h4
Gelişmiş arama seçenekleri kutusunun içindeki başlık.
  • h4 öğelerine herhangi bir kenarlık eklediyseniz, bunları burada kaldırmak genellikle daha iyi görünür.
fieldset#mw-searchoptions div.divider
Gelişmiş arama seçenekleri kutusunun içindeki yatay çizgi.
  • Bunu genellikle hr ile aynı stillere ayarlamak en iyisidir.

Dosya/resim sayfası öğeleri[]

Seçici Açıklama Öneriler
ul#filetoc
Dosya sayfalarındaki bağlantıların üst çubuğu.
  • Özellikle koyu görünümler için geçersiz kılınması gereken varsayılan bir arka planı ve kenarlığı vardır.
table.mw_metadata
Dosya sayfalarının altında bulunan meta veri tablosu.
  • Genellikle, burada table.wikitable için kullandığınız aynı stilleri kullanabilirsiniz.
table.mw_metadata th
Dosya sayfalarının altında bulunan meta veri tablosundaki başlık (solda) hücreleri.
  • Genellikle, burada table.wikitable th için kullandığınız aynı stilleri kullanabilirsiniz.
table.mw_metadata td
Dosya sayfalarının altında bulunan meta veri tablosundaki değer (sağ) hücreleri.
  • Genel olarak, burada table.wikitable td için kullandığınız aynı stilleri kullanabilirsiniz.

Çeşitli özel sayfa öğeleri[]

Seçici Açıklama Öneriler
.TablePager
Özel:Tümİletiler gibi özel sayfalarda görülen tablo türü.
  • Genellikle, table.wikitable için kullanılan aynı stiller iyi çalışır.
.TablePager th
Özel:Tümİletiler gibi özel sayfalarda görülen tablo türü için başlık hücreleri.
  • Genellikle, table.wikitable th için kullanılan aynı stiller iyi çalışır.
.TablePager td
Özel:Tümİletiler gibi özel sayfalarda görülen tablo türü için normal hücreler.
  • Genellikle, table.wikitable td için kullanılan aynı stiller iyi çalışır.
.TablePager tr:hover td
İmleç satırın üzerine geldiğinde Özel:Tümİletiler gibi özel sayfalarda görülen tablo türü için normal hücreler.
  • Varsayılan olarak, .TablePager tablolarında bir satırın üzerine geldiğinde arka plan rengi biraz değişir. Normal hücreler veya tablo için arka plan rengini değiştirdiyseniz, bunu hafifçe farklı bir renge de değiştirmeniz gerekir.

AbuseFilter öğeleri[]

AbuseFilter uzantısı varsayılan olarak yüklenir. Çok fazla özel CSS eklemez, ancak kötüye kullanma günlüğündeki bir düzenleme için inceleme/ayrıntılar sayfasındaki tabloların, özellikle de karanlık kaplamalarda biraz çalışması gerekebilir.

Seçici Açıklama Öneriler
table.mw-abuselog-details
İnceleme/ayrıntı sayfalarında görülen ve kötüye kullanım filtresi değişkenlerini gösteren tablo.
  • table.wikitable için kullanılan stiller genellikle iyidir.
table.mw-abuselog-details tr th
İnceleme / ayrıntı sayfalarında görülen tablo için başlık hücreleri.
  • table.wikitable için kullanılan stiller genellikle iyidir.
table.mw-abuselog-details tr td
İnceleme/ayrıntı sayfalarında görülen tablo için normal hücreler.
  • table.wikitable td için kullanılan stiller genellikle iyidir.

Sayfaya özgü stili[]

Her MediaWiki sayfasında, geçerli sayfa başlığını temel alan <body> öğesine atanmış benzersiz bir sınıf adı vardır. Çoğu durumda bu, page- (veya sayfa ile birlikte herhangi bir alt sayfanın hedeflenmesi gerekiyorsa) ve ardından boşlukların ve diğer özel karakterler alt çizgi (_) ile değiştirilir. Tam sınıf adı, stil değişiklikleri gereken sayfadaki tarayıcının görünüm kaynağı özelliği kullanılarak elde edilebilir.

Bir sayfadaki ilk başlığı (sayfa adının kendisini içeren) gizleyerek, bu özellik için en yaygın kullanım örneklerinden birine bir örnek:

.page-MediaWiki_CSS h1:first-child
 {
  display: none;
 }

Ayrıca bakınız[]

Advertisement