InfoboxTabImages, Fandom'un varsayılan olarak izin vermediği, taşınabilir bilgi kutusu sekmelerinde etiket olarak resimlerin kullanılmasını sağlayan bir CSS stil sayfasıdır.
Her vikide, <panel> ve <section> etiketlerini kullanan sekmeler içeren şablonlar içeren birden çok şablon vardır. Çoğu içerik oluşturucu bu sekmelerde bir simge/küçük resim göstermek ister. <section> sekmeleri oluşturur ve <label> sekmeleri adlandırmak için kullanılır. <data> altındaki <label> etiketler görselleri kabul etse de, <section> altındaki <label> etiket izin vermediği için. Bunun yerine yalnızca resime bir bağlantı gösterir. Bu stil sayfası, sorunun üstesinden gelmek için basit bir yöntem kullanır. Şu anda bu stil sayfası resmi olarak 11 sekmeye ve sonsuz sayıda panele kadar destekler.
Kurulum[]
Kullanım[]
Aşağıdaki kodu CSS'nize kopyalayın:
.pi-theme-SablonTemaAdi {
--label-color: rgba(0,0,0,0);
--image-size: 30px 30px;
--image-hover-size: 34px 34px;
--image-active-size: 32px 32px;
--image-tab_1: url('');
--image-tab_2: url('');
--image-tab_3: url('');
--image-tab_4: url('');
--image-tab_5: url('');
--image-tab_6: url('');
--image-tab_7: url('');
--image-tab_8: url('');
--image-tab_9: url('');
--image-tab_10: url('');
--image-tab_11: url('');
}
SablonTemaAdi ile şablona verdiğiniz temayla değiştirin.
<infobox theme="Ornek">
.
.
.
Bu durumda CSS seçici şöyle olmalıdır:
.pi-theme-Ornek {
...
}
Şimdi simgelerin bağlantısını --image-tab_x:url(''); ögesine ekleyin, burada x sekme numarasıdır.
- Not: Maalesef 1'den fazla paneli olan şablonlar için bu stil sayfası resimleri hepsine uygular. Bunu aşmak için 'Notlar' bölümlerini okuyun.
Notlar[]
1'den fazla panel içeren şablonlar için[]
Ne yazık ki CSS seçicileri 3'ün sınırlamaları nedeniyle, resimleri hangi panel veya panellere uygulamanız gerektiğini seçmenin kolay bir yolu yoktur (kolaydır ancak CSS S4'te daha kolay bir yol vardır).
Bunu yapmak için nth-child(x) sözde sınıfını kullanmanız gerekir. Sözdizimi şöyle görünmelidir:
.pi-theme-Ornek section.pi-panel:nth-child(x){
/* Değişkenler */
}
Burada x şablondan şablona farklılık gösterir. Panelden önce kaç Öge olduğuna bağlıdır. Örnek olarak, bir şablonun başlığı (ana olan) varsa, x 2 olmalıdır. Bir şablonun Başlığı varsa ve ayrıca x resmi 3 olmalıdır (Bunu aramak için tarayıcının İncele (F12) seçeneğini kullanabilirsiniz).
Farklı paneller için farklı resimler istiyorsanız bunu da yapabilirsiniz. Yukarıdaki kodun 2 (veya kaç panele farklı resimler uygulamanız gerektiğine bağlı olarak daha fazla) kopyasını alın ve x değerini ilgili panele uyacak şekilde değiştirin.