FANDOM


Wygląd przenośnych infoboksów można z łatwością zmodyfikować, używając CSS.

Domyślnie, przenośne infoboksy pobierają kolory dla swojego wyglądu z lokalnego kreatora motywu, mieszając tło artykułu z kolorem linków.

Motywy infoboksów Edytuj

Domyślny motyw infoboksów może być zmodyfikowany, używając parametrów theme lub theme-source w tagu infobox, pozwalając dostosowywanie ich motywu przez lokalny CSS.

  • Atrybut theme używany jest do określenia niestandardowej klasy CSS dla infoboksu.
  • Atrybut theme-source pozwala na wybór klasy CSS poprzez parametr szablonu.

Jeśli w tagu infobox zostały użyte oba atrybuty, theme zostanie uznany za domyślny. Spacje w wartościach theme i theme-source zostały zastąpione przez dywizy (-), więc tylko pojedyncza klasa może ich używać.

„Theme” Edytuj

Przykładowo, theme="delta" doda klasę, nazwaną pi-theme-delta do kodu HTML infoboksu. Można ją zmodyfikować, używając CSS:

<infobox theme="delta">
  // zawartość infoboksu
</infobox>
.portable-infobox.pi-theme-delta {
   // style CSS  
}

W tym przypadku, poniższy kod zastępuje drugorzędny kolor tła na czerwony:

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

Jeśli nie użyto motywu, zamiast niego zostanie użyta klasa .pi-theme-wikia.

„Theme-source” Edytuj

Przykładowo, theme-source="pochodzenie" oznacza, że kiedy parametr pochodzenie zostanie wypełniony w infoboksie, będzie używał jego wartości jako swojej klasy:

<infobox theme-source="pochodzenie">
   ...
</infobox>
{{infobox
 |pochodzenie = Polska
}}

Kod CSS, który należy dodać aby zmienić wygląd tego infoboksu będzie wyglądał tak:

.portable-infobox.pi-theme-Polska {
   //styl CSS
}

Jeśli twoim celem jest modyfikacja poszczególnych części infoboksu, w tym przypadku powinieneś użyć kodu takiego, jak ten:

.portable-infobox.pi-theme-Polska .pi-secondary-background {
   //styl CSS
}

Klasy główne Edytuj

Te klasy pozwolą na dostosowanie poszczególnych

Tytuł (tag <title>)
.pi-title
Nagłówek (tag <header>)
.pi-header
Nawigacja (tag <navigation>)
.pi-navigation
Grupy (tag <group>)
.pi-group
Dane (tag <data>)
Cały wiersz
.pi-data
Wartość
.pi-data-value
Etykieta
.pi-data-label
Obraz (tag <image>)
.pi-image
Karty z obrazami
.pi-image-collection-tabs

Klasy pomocnicze Edytuj

Przenośne infoboksy zawierają wiele ogólnych klas, które pomogą ci łatwo dostosować wygląd infoboksu:

.pi-background
główne tło
.pi-secondary-background
tło nagłówka i nawigacji
.pi-font
style czcionki
.pi-secondary-font
style czcionki nawigacji, nagłówka i etykiety
.pi-item-spacing
odstępy wokół elementów infobosku
.pi-border-color
kolor obramowania infoboksu

Uwaga: To nie są wszystkie klasy, dostępne w infoboksach, większą listę można znaleźć na stronie Pomoc:Infoboksy/Tagi.

Fragmenty przykładowych kodów Edytuj

Zmiana szerokości infoboksu:

.portable-infobox {
   width: 300px;
}

Zmiana koloru tła infoboksu:

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

Zmiana tła nagłówków i nawigacji:

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

Zmiana koloru obramowania:

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

Zmiana odstępów między elementami:

.portable-infobox .pi-item-spacing {
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
}

Zmiana wielkości czcionki wartości:

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

Zmiana wielkości czcionek nagłówka, nawigacji oraz etykiety:

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

Zmiana wielkości tytułu infoboksu:

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

Zmiana szerokości kolumny:

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

Zmiana wielkości czcionki podpisu dla motywu "oblivion":

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

Zaawansowane Edytuj

Normalnie, kiedy chcesz zmienić styl pojedynczego motywu, napisałbyś taki kod:

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

Jednakże, kiedy klasa CSS znajduje się w tym samym elemencie wraz z inną i musisz zastosować zmiany dla obu, nie stawiaj spacji między klasami. na przykład, .pi-background jest w tym samym elemencie <aside>, na którym jest motyw (.pi-theme-nazwa) i ogólna klasa infoboksu (.portable-infobox), więc kod, który zmienia tło dla takiego układu, wygląda tak:

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