Na tej stronie znajdziesz różne przydatne klasy CSS, które mogą znaleźć zastosowanie w różnych sytuacjach. Znajdują się tutaj zarówno klasy dostępne domyślnie jak i te dodane przez administratorów w MediaWiki:Common.css, MediaWiki:Wikia.css i MediaWiki:Monobook.css. Jeśli uważasz, że warto dodać tutaj jakąś użyteczną klasę CSS, nie krępuj się i ją dodaj.
Jak używać klas CSS?[]
Aby dodać klasę do elementu trzeba ją podać wewnątrz atrybutu class="", kilka klas należy rozdzielić spacjami
Kolorystyka motywu[]
Domyślnie jest dostępnych kilka klas, które dodają kolor tła dostosowujący się do kolorystyki motywu.
| class="color1" |
| class="accent" |
| class="color2" |
Kolorowanie linków[]
Aby zmienić kolor odnośników bez potrzeby uciekania się do arkusza styli wystarczy użyć klasy color-links. Wszystkie odnośniki wewnątrz elementu z tą klasą przybiorą kolor tekstu.
<span class="color-links">Przykładowy tekst z [[The Elder Scrolls Wiki|odnośnikiem]] w roli głównej.</span>
Efekt: Przykładowy tekst z odnośnikiem w roli głównej.
Można również nadać inny kolor odnośnikowi poprzez zawarcie samego odnośnika w elemencie zmieniającym kolor. Element zmieniający kolor sam nie musi posiadać tej klasy, musi tylko być wewnątrz elementu, który ją posiada.
<span class="color-links">Przykładowy tekst z <span style="color:green">[[The Elder Scrolls Wiki|odnośnikiem]]</span> w roli głównej.</span>
Efekt: Przykładowy tekst z zielonym odnośnikiem w roli głównej.
Usunięcie strzałki w linkach zewnętrznych[]
Aby usunąć obrazek symbolizujący odnośnik zewnętrzny wystarczy, żeby znalazł się on w elemencie z klasą plainlinks
http://google.com/ – <span class="plainlinks">http://google.com/</span>
Efekt: http://google.com/ – http://google.com/
Tabele[]
Istnieją dwie domyślne klasy, które pozwalają nadać czytelny wygląd tabelom. Są to article-table oraz wikitable
{| class="article-table"
...
| Nagłówek A | Nagłówek B | Nagłówek C |
|---|---|---|
| Komórka A | Połączona komórka | |
| Komórka B | Komórka C | Komórka D |
| Połączony nagłówek | Nagłówek D | |
{| class="wikitable"
...
| Nagłówek A | Nagłówek B | Nagłówek C |
|---|---|---|
| Komórka A | Połączona komórka | |
| Komórka B | Komórka C | Komórka D |
| Połączony nagłówek | Nagłówek D | |
Dla tabel są również dostępne klasy centered i fit, które kolejno służą do wyśrodkowania tabeli na stronie oraz do rozciągnięcia jej na całą szerokość strony.
Poziome listy[]
Klasa hlist pozwala na wygodne tworzenie list poziomych za pomocą wikiskładni. Wszystkie listy znajdujące się wewnątrz elementu z tą klasą zostaną przerobione na poziome. Zależnie od rodzaju listy, efekt końcowy będzie inny.
Listy nieuporządkowane zostaną połączone w jeden ciąg, a poszczególne elementy rozdzielone kropką: ·
<div class="hlist"> * Lorem * Ipsum * Dolor * Sit * Amet </div>
- Lorem
- Ipsum
- Dolor
- Sit
- Amet
Listy uporządkowane zostaną połączone podobnie do nieuporządkowanych z tą różnicą, że elementy zostaną poprzedzone kolejnymi numerami
<div class="hlist"> # Lorem # Ipsum # Dolor # Sit # Amet </div>
- Lorem
- Ipsum
- Dolor
- Sit
- Amet
Listy definicji również działają podobnie, przy czym etykiety zostaną pogrubione oraz będą oddzielone dwukropkiem od kolejnych elementów
<div class="hlist"> ; Lorem : Ipsum : Dolor ; Sit : Amet </div>
- Lorem
- Ipsum
- Dolor
- Sit
- Amet
Wszystkie rodzaje list mogą być wielopoziomowe oraz mieszane. Listy zagnieżdżone zostaną zawarte w nawiasach
<div class="hlist"> ; Lorem : Ipsum :# Dolor :# Sit :* Amet </div>
- Lorem
- Ipsum
- Dolor
- Sit
- Amet
Domyślnie wszystkie listy w danym elemencie pozostaną same w sobie elementami blokowymi. Aby temu zapobiec wystarczy wraz z klasą hlist podać klasę inline.
Zwijane elementy[]
Klasa mw-collapsible pozwala na włączenie możliwości zwijania elementów. Więcej informacji znajdziesz na stronie Pomoc:Zwijanie.