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[]
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”[]
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”[]
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[]
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[]
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[]
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[]
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;
}