FANDOM


Taşınabilir bilgi kutuları, bir wiki topluluk CSS kullanarak yerel yöneticiler tarafından kolayca düzenlenebilir.

Özelleştirmeler olmadan, taşınabilir bilgi kutusu teması, topluluğunuzun Tema Tasarımcısı ayarları, özellikle de makale arka plan rengini ve bağlantı rengini alır.

Bilgi kutusu temaları ve türleri

Varsayılan bilgi kutusu teması, yerel topluluk CSS ve type, theme veya theme-source kullanılarak geçersiz kılınabilir. infobox etiketindeki öznitelikleri, sınıfları kullanarak belirli bilgi kutusu şablonlarını hedeflemeyi kolaylaştıracaktır.

  • Type niteliği, mantıksal bir tür belirtmek için kullanılır (bir bilgi kutusunun tanımladığı şeydir), ancak bir CSS sınıfı olarak da kullanılabilir.
  • Theme özelliği, bilgi kutusu şablonu için özel bir CSS sınıfı belirtmek için kullanılır.
  • Theme-source özelliği, CSS sınıfını bir şablon parametresiyle değiştirmenize olanak sağlar.
  • Europa tema özelliğini kullanan toplulukların farklı CSS varsayılanları vardır. Bunlar .pi-europa seçicisi kullanılarak tanımlanabilir. Taşınabilir Bilgi Kutuları için yeniden yaratmaya çalıştıkları mevcut klasik stilleri olan toplulukların, CSS'lerini geçirmeden önce Europa'yı devre dışı bırakmaları teşvik edilir.

"type" kullanımı

Örneğin, type="character" infobox HTML’ye type-character adlı bir sınıf ekler, bu daha sonra CSS kullanılarak özelleştirilebilir:

Şablon kodu
<infobox type="character">
  ...
</infobox>
Kullanılacak CSS
.portable-infobox.type-character {
   ...
}

Örnek olarak, aşağıdaki kod ikincil arka plan rengini kırmızı olarak değiştirmek için kullanılabilir:

.portable-infobox.type-character .pi-secondary-background {
    background-color: #CF3D0C;
}

"theme" kullanma

Örneğin, theme="delta" bilgi kutusu HTML’ye pi-theme-delta adında bir sınıf ekler ve ardından CSS kullanılarak özelleştirilebilir:

Şablon kodu
<infobox theme="delta">
  ...
</infobox>
Kullanılacak CSS
.portable-infobox.pi-theme-delta {
   ...
}

Örnek olarak, aşağıdaki kod ikincil arka plan rengini kırmızı olarak değiştirmek için kullanılabilir:

.portable-infobox.pi-theme-delta .pi-secondary-background {
    background-color: #CF3D0C;
}

"theme-source" kullanımı

Örneğin, theme-source="location", bir makalenin bilgi kutusunda location belirtildiğinde, bunun değerini sınıf olarak kullanacağı anlamına gelir. For example:

Şablon kodu
<infobox theme-source="location">
   ...
</infobox>
Makale üzerindeki kod
{{Example infobox
 |location = africa
}}
Kullanılacak CSS
.portable-infobox.pi-theme-africa {
   ...
}

Belirli bir bilgi kutusundaki belirli öğeleri hedeflemek istiyorsanız, bunun gibi bir şey yaparsınız:

.portable-infobox.pi-theme-africa .pi-secondary-background {
   //özel stiller
}

Gelişmiş tema notları

  • Hem theme hem de' theme-source kullanılıyorsa, ikisi de CSS özelliklerini sağlayacaktır.
  • theme ve theme-source değerindeki boşluklar kısa çizgilere (-) dönüştürülür, yani yalnızca tek bir sınıf eklenebilir.
  • Herhangi bir tema belirtilmezse, .pi-theme-wikia yerine kullanılır.

Ana sınıflar

Bu sınıflar, belirli etiketlerin stilini güncellemenize yardımcı olur:

İsim
.pi-title
Başlık
.pi-header
Navigasyon
.pi-navigation
Gruplar
.pi-group
Veri Etiketi
.pi-data
Veri Değeri
.pi-data-value
Veri Sınıfı
.pi-data-label
Resim
.pi-image
Resim Sekmeleri
.pi-image-collection-tabs

Yardımcı sınıflar

Taşınabilir bilgi kutuları, genel stili kolayca güncellemenize yardımcı olmak için tasarıma özel çeşitli yardımcı sınıflar içerir:

.pi-background
genel bilgi kutusu arka planı
.pi-secondary-background
başlık ve gezinme arka planları
.pi-font
veri değeri yazı tipi stili
.pi-secondary-font
başlık, etiket ve gezinme yazı tipi stilleri
.pi-item-spacing
her bilgi kutusu elemanının etrafındaki dolgu
.pi-border-color
bilgi kutusu öğesi sınır renkleri

Not: Bu mevcut sınıfların kapsamlı bir listesi değildir - daha fazlası Yardım:Bilgi kutuları/Etiketler içinde listelenmiştir.

Örnek kod parçacıkları

Bilgi kutusu genişliğini değiştir:

.portable-infobox {
   width: 300px;
}

Bilgi kutusu arka plan rengini değiştir:

.portable-infobox.pi-background {
   background-color: #ff0000;
}

Bilgi kutusu başlıklarını ve gezinme arka planını değiştirin:

.portable-infobox .pi-secondary-background {
   background-color: #00ff00;
}

Bilgi kutusu öğelerinin kenarlık rengini değiştir:

.portable-infobox .pi-border-color {
   border-color: #00ff00;
}

Bilgi kutusu öğeleri dolgusunu değiştirin:

.portable-infobox .pi-item-spacing {
   padding: 10px 20px;
}

Bilgi kutusu veri değerlerinin yazı tipi boyutunu değiştir:

.portable-infobox .pi-font {
   font-size: 16px;
}

Bilgi kutusu başlıklarını, etiketleri ve gezinme değerleri yazı tipi boyutunu değiştirin:

.portable-infobox .pi-secondary-font {
   font-size: 18px;
}

Bilgi kutusu başlığının yazı tipi boyutunu değiştir:

.portable-infobox .pi-title {
   font-size: 24px;
}

Etiket sütunu genişliğini değiştir:

.portable-infobox .pi-data-label {
   flex-basis: 165px;
}

Özel tema "oblivion" için seçin, sonra başlık yazı tipi boyutu:

.portable-infobox.pi-theme-oblivion .pi-caption {
   font-size: 16px;
}

Görüntüler için sekmelerin arka plan rengini değiştirme

.pi-image-collection-tabs li {
  background-color: green;
}
 


Gelişmiş

Normalde, belirli bir temanın stilini değiştirmeniz gerekirse, bunun gibi bir şey yazarsınız:

.portable-infobox.pi-theme-name .pi-secondary-background {
   background-color:#334;
}

Bununla birlikte, bir CSS sınıfı diğerinin “aynı” öğesindeyken ve her ikisi için de seçmeniz gerektiğinde, sınıflar arasında boşluk bırakmayın. Örneğin, .pi-background temasıyla aynı <aside> öğesinde (.pi-theme-name) ve genel taşınabilir infobox sınıfı (.portable-infobox), bu nedenle o temanın arka planını değiştiren CSS:

.portable-infobox.pi-theme-name.pi-background {
   background-color:#334;
}

Münferit elemanlar, seçiciler olarak veri öznitelikleri kullanılarak bağımsız olarak tasarlanabilir. Örneğin, source girişine sahip tüm Taşınabilir Bilgi Kutusu öğeleri şimdi HTML'de data-source="ATK" gibi bir veri özniteliğinde bu parametre adıyla oluşturur. Bu, tek tek öğeleri stilize etmek ve tanımlamak için .pi-item[data-source=ATK] gibi CSS veya jQuery seçicileri yazmanıza olanak sağlar. type ile birlikte kullanıldığında, bunun nth-of-type stil seçimine olan gereksinimini ortadan kaldırması ve tasarım ve etkileşim için diğer olasılıkları açması gerekir.

Bir öğedeki name niteliği, <title>, <group>, <header>, <image> ve <navigation>. veri kaynağı, veri özniteliği gibi, <data name="bar">, .pi-item[data-item-name=bar] olarak seçilebilir. Verilerinin tanımlanması dahil, bir kaynak girişini kabul edip etmemelerini açıkça <header>, <image>, <navigation>, veri özniteliği gibi, <data name="bar">, .pi-item[data-item-name=bar] olarak seçilebilir.

Community content is available under CC-BY-SA unless otherwise noted.