Bu sayfada Taşınabilir Bilgi Kutuları için ipuçları, püf noktaları, küçük parçalar, CSS ve hackler bulunur. Her bir öğenin kullanılabilir ve stilini anlamak için Bilgi kutuları/CSS ve Bilgi kutuları/Etiketler yardım sayfalarına başvurduğunuzdan emin olun.
Bilgi kutularını dönüştürme[]
Şablon:Ana
Ayrıştırıcı işlevleri[]
Ayrıştırıcı işlevlerin yanı sıra Lua, <default> veya <format> etiketlerinde ve ayrıca vikimetin kabul eden tüm etiketlerde kullanılabilir. Ancak bilgi kutusunun görüntülenmesini engelleyeceğinden bu etiketlerin dışında kullanılmamalıdır.
İsteğe bağlı gezinti[]
<navigation> etiketlerinde <default> veya <format> alt etiketlerinde olmamasına rağmen, yalnızca bir parametre belirtildiğinde veya belirli bir değeri olduğunda görüntülenmelerini sağlamak için değişken parametreleri kullanabilirsiniz. Aşağıdaki ilk örnek, "galerigöster" parametresinin "evet" olarak ayarlanıp ayarlanmadığını kontrol etmek için #ifeq ayrıştırıcı işlevini kullanır. Eğer öyleyse, bir bağlantı görüntüler; değilse, hiçbir şey gösterilmez ve gezinme satırı oluşturulmaz. İkinci örnek yalnızca "showgallery" boş olmadığını doğrular.
<navigation>{{#ifeq: {{{galerigöster}}} | evet | [[Ana Sayfa|Galeri]] |}}</navigation>
<navigation>{{#if: {{{galerigöster|}}} | [[Ana Sayfa|Galeri]] |}}</navigation>
Daraltlma[]
<infobox>
<group collapse="closed">
<header>Daraltmak kolaydır</header>
<data>
<default>Daraltılmış şeyler</default>
</data>
</group>
Yorumlama[]
Taşınabilir bilgi kutuları XML kullanır, bu nedenle yorum yapmak için normal kurallar onlar için gerçekten geçerli değildir. Bölümleri gizlemenin veya yorum eklemenin bir püf noktası şöyle bir şey kullanmaktır:
<infobox>
<group>
<header>Tony Stark</header>
<data>
<default>Savaş makinesi</default>
</data>
<data>
<default>Iron Man</default>
</data>
<!-- yorum
Bu kısım gizli
<header>Umut</header>
<data>
<default>Dark Goddess</default>
</data>
<data>
<default>Leydinin ölümü</default>
</data>
yorum-->
</group>
</infobox>
Biçimlendşrme[]
Bunlar, hizmetlilerin vikilerinin CSS'sine ekleyebilecekleri bazı kodlardır. Daha fazla bilgi için w:tr:Yardım:Bilgi kutuları/CSS sayfasına bakın.
Metin biçimlendirme[]
Yaygın bir ihtiyaç, metni ortalamak veya dikey olarak biçimlendirmektir ve bu, CSS kullanılarak yapılabilir (buna bakın). Veri öğelerinin biçimlendirmesi, aşağıdaki gibi kod kullanılarak biçimlendirilebilir:[1]
.portable-infobox .pi-data {
height: 10em; /* yüksekliği ayarlar */
display: flex;
align-items: center; /* öğeleri veya metni dikey olarak hizalayın */
justify-content: center ; /* öğeleri veya metni yatay olarak hizalar */
}
Kelime kaydırmayı önleme[]
Bazen metnin sarılmasına izin vermek istenmeyebilir. Bunu önlemenin bir yolu, CSS'yi şu şekilde kullanmaktır:
.portable-infobox .pi-data-label {
flex-basis: 120px;
}
Bu, minimum genişliği ayarlar, böylece etiket gerekli olmadıkça sarılmaz.
Resim biçimlendirme[]
Otomatik olarak yeniden boyutlandırma[]
Tüm resim boyutlarına uyum sağlayacak bir yaklaşım, basitçe şunu kullanmaktır:
.pi-theme-name .pi-image-thumbnail {
width: 100%;
height: auto;
}
Yeniden boyutlandırılmış bilgi kutularında[]
Bilgi kutunuz için standart olmayan bir genişlik kullanırsanız (.pi-theme-name { width: 123px; } aracılığıyla), CSS'deki resimleri de yeniden boyutlandırmanız gerekir. Bu, .pi-image-thumbnail sınıfı aracılığıyla şu şekilde yapılır:
.pi-theme-name .pi-image-thumbnail {
max-width: 123px; /* Tipik olarak, bilgi kutunuzla aynı genişliği kullanın, eksi kenarlıklar */
height: auto; /* Resim oranını korur */
}
Ancak bu, istenenden daha yüksek görüntülere yol açabilir. Bilgi kutusunun tüm genişliğini doldurmalarına ihtiyacınız yoksa, hiçbir değerin aşılmamasını ve resim oranının korunmasını sağlamak için yüksekliklerini de aynı şekilde sınırlayabilirsiniz:
.pi-theme-name .pi-image-thumbnail {
max-width: 123px;
max-height: 123px;
width: auto;
height: auto;
}
Başlık biçimlendirme[]
Başlık metnini özelleştirmek, diğer herhangi bir metni özelleştirmeye benzer, yalnızca doğru sınıfı kullanmakla ilgilidir. Örneğin:
.pi-theme-name .pi-title {
font-family: formalscrp421 bt;
font-weight: bold;
color: blue;
}
vikideki tüm bilgi kutularının başlıklarının bunun gibi görünmesini sağlar.
Gruplar[]
Gruplar özellikle taşınabilir bilgi kutularında çok yönlüdür. Daraltılabilirler veya bilgilerin düzenini değiştirebilirler. Bir bilgi kutusu çok fazla bilgi içeriyorsa, bunları gruplara eklemek ve daraltmak daha iyi olabilir:
<infobox>
<group layout="horizontal">
<data source="elmalar"/>
<data source="armut"/>
<data source="mangolar"/>
</group>
<group layout="horizontal">
<data source="avokadolar"/>
<data source="üzümler"/>
<data source="domatesler"/>
</group>
<group collapse="closed">
<header>İyi yemek</header>
<data source="patesler"/>
<data source="çarkıfelek"/>
<data source="ananas"/>
</group>
</infobox>
Birden çok parametre[]
Aynı alan için[]
<infobox>
<data source="kadınlar">
<default>{{{bayanlar|Janedoe}}}</default>
</data>
</infobox>
CSS[]
Tüm bir veri satırına stil verme[]
Bazı öğelere satır içi stil uygulayabilseniz de, tüm veri girişini ve başlığını toplu olarak etkilemektir. Örneğin, tüm satırın arka plan rengini değiştirmek yeterli olmayacaktır. Bunun nedeni, her <data> satırının bir <div> içindeki değerinden bir <div> içinde (ve varsa <format>) oluşmasıdır. Bu nedenle, tam olarak doldurmak için arka plan renginizle o üst düzey <div> hedeflemelisiniz. Bunu yapmak için, bilgi kutunuzun div'lerinden hangisini hedeflediğinizi belirlemeniz gerekir.
Yukarıdan aşağıya doğru giderek, bilgi kutusu kodunuzu gözden geçirin ve stil vermek istediğinize ulaşana kadar her <data> etiketini sayın. <title>, <image> veya <navigation> etiketlerini saymayın, çünkü bunlar div öğelerinde bulunmaz. Bu örnek için, bir başlığınız, bir resminiz ve ardından şu sırayla üç veri etiketiniz olduğunu varsayalım: Yaş, Cinsiyet ve Şehir.
- Önemli: Bilgi kutunuz varsayılan değeri olmayan veri etiketleri içeriyorsa, bunlar boş bırakıldığında gösterilmeyecek ve bu nedenle satırlarınızın numaralandırması değişecektir. Bu sorunun olası çözümleri için aşağıya bakın.
Bilgi kutusunun üst kısmına göre div numaranızı öğrendikten sonra, div:nth-of-type(1) içindeki 1 yerine uygun değerle (örneğimizde Yaş için 1, Cinsiyet için 2 veya Şehir için 3) aşağıdaki kodu kullanabilirsiniz.
.pi-theme-name div:nth-of-type(1) {
background-color: #000000;
}
Yukarıdaki kod, başlık dahil tüm ilk satırı (Yaş) seçecektir. Yalnızca değeri içeren div'i etkilemek için şunu kullanın:
.pi-theme-name div:nth-of-type(1) div:first-of-type {
background-color: #000000;
}
Sondaki fazladan div:first-of-type, tam satır ile gerçek içerik arasındaki kapsayıcıyı seçer, böylece başlık etkilenmez. Hangi satırı hedefliyor olursanız olun, bu seçim için her zaman first-of-type değerinin (veya first-of-type(1)) kullanıldığını unutmayın.
Tabii ki, bu numara, listeler gibi satır içi stili zor olan öğelere başka özellikler eklemek için kullanılabilir. Hatta diğer tüm öğeler (li:nth-child(2n+2)), tek bir öğeden yalnızca ilk vb. gibi yalnızca belirli liste öğelerini etkilemek için CSS seçicilerini kullanarak daha derine inebilirsiniz.
İsteğe bağlı alanlarla nasıl başa çıkılır[]
Bilgi kutunuz varsayılan değeri olmayan isteğe bağlı alanlar içeriyorsa, belirli bir satırın/div'in konumunu belirlemek imkansız olabilir ve bu hilenin istenmeyen satırları biçimlendirmesine neden olabilir. Ancak içeriğinizin sırasına bağlı olarak bu sorunu birkaç şekilde çözebilirsiniz:
- Satırınızı bilgi kutunuzun altına veya yakınına yerleştirin. Kaç satırın önce geldiğini bilmiyorsanız, ancak kaç satırın sonra geldiğini kesin olarak biliyorsanız, aşağıdan yukarıya doğru sayabilirsiniz. Bunu yapmak için,
div:nth-of-type(1)yerinediv:nth-nth-of-type(1)kullanarak hedefleyin. Örneğimizde, bu önce Şehir'i seçer. - İçeriğinize bağlı olarak, tespit edilmesi zor olan girişler için
<navigation>etiketlerini kullanmayı düşünebilirsiniz. div etiketleri yerine<nav>HTML öğeleri kullandıklarından, bunları ayrı olarak sayabilir ve potansiyel olarak görüntülenmeyecek birkaç gezinme kullanmadığınız sürece, isteğe bağlı içerikten bağımsız olarak konumlarını potansiyel olarak tanımlayabilirsiniz. Bunları, uygun şekildenav:nth-of-type(1)veyanav:nth-nth-of-type(1)kullanarak seçin.
Bir veri kaynağına dayalı kategori ekleme[]
Bilgi kutusu veri kaynaklarından gelen girdiler, adlandırılmış şablon değişkenleri olarak mevcuttur. Yaygın bir kullanım, bilgi kutusundaki belirli bir değere dayalı olarak sayfaya ek kategoriler eklemektir:
<infobox>
<data source="öğe_türü">
<default>Genel öğe</default>
</data>
<!--- daha fazla buraya -->
</infobox>
{{#switch: {{{öğe_türü}}}
|Gen|Genel|Genel öğe = [[Kateogri:Genel öğeler]]
|Özel|Özel öğe = [[Kategori:Özel öğeler]]
}}