Motywy, w zależności od stopnia zaawansowania, posiadają liczne opcje personalizacji – w wielu można zmieniać układy, kolory, czcionki i mnóstwo innych detali. Jednak czasami okazuje się to niewystarczające.
Wtedy na pomoc przychodzą style CSS, dzięki którym można zmienić dosłownie każdy element wyglądu strony internetowej (oczywiście oprócz grafik), nie zmieniając kodów źródłowych strony.
Arkusz stylów CSS to lista dyrektyw (tzw. reguł) ustalających w jaki sposób ma zostać wyświetlana przez przeglądarkę internetową zawartość wybranego elementu (lub elementów) (X)HTML lub XML. Można w ten sposób opisać wszystkie pojęcia odpowiedzialne za prezentację elementów dokumentów internetowych, takie jak rodzina czcionek, kolor tekstu, marginesy, odstęp międzywierszowy lub nawet pozycja danego elementu względem innych elementów bądź okna przeglądarki. (…)
CSS został stworzony w celu odseparowania struktury dokumentu od formy jego prezentacji. Separacja ta zwiększa zakres dostępności witryny, zmniejsza zawiłość dokumentu, ułatwia wprowadzanie zmian w strukturze dokumentu.
CSS ułatwia także zmiany w renderowaniu strony w zależności od obsługiwanego medium (ekran, palmtop, dokument w druku, czytnik ekranowy). Stosowanie zewnętrznych arkuszy CSS daje możliwość zmiany wyglądu wielu stron naraz bez ingerowania w sam kod (X)HTML, ponieważ arkusze mogą być wspólne dla wielu dokumentów.
Źródło: pl.wikipedia.org
Wprowadzanie zmian w oryginalnych plikach zawierających style CSS, znajdujących się na serwerze, jest ryzykowne i niezalecane. Do wyboru są dwie bezpieczne możliwości:
- stworzenie motywu potomnego, zawierającego zmienione style CSS,
- skorzystanie z opcji Custom CSS, pozwalającej na określenie własnych stylów CSS, ale bez ingerencji w pliki źródłowe.
Zasada działania Custom CSS jest bardzo prosta. W odpowiednim miejscu wpisujesz style CSS dotyczące elementów, który chcesz zmienić, a otrzymują one pierwszeństwo nad domyślnymi stylami Twojego motywu.
Przykładowo:
- Czcionka nagłówków wpisów w Twoim motywie ma kolor zielony.
- Chcesz, aby czcionka nagłówków wpisów miała kolor niebieski.
- Odnajdujesz informację (z dalszej części dowiesz się jak) który selektor jest odpowiedzialny za wygląd tytułów wpisów w Twoim szablonie.
- Wpisujesz w polu Custom CSS fragment kodu ustawiający kolor tytułów na niebieski (który prawdopodobnie będzie wyglądał tak jak poniżej):h1 {
font-color: #0000FF;
} - Zapisujesz zmiany i odświeżasz stronę.
- Nagłówki zmieniły kolor na niebieski!
Są niebieskie, pomimo że zgodnie z plikiem stylów CSS znajdujących się na serwerze, cały czas powinny być zielone. Na tym właśnie polega magia Custom CSS. Nic nie zmieniasz w pliku, a możesz wprowadzać w stylach CSS wszystkie zmiany jakich zapragniesz!
Powyższe rozwiązanie jest praktyczne również dlatego, że nie tracisz swoich modyfikacji CSS po aktualizacji motywu – jego pliki mogą zostać nadpisane w każdej chwili, a kod Custom CSS pozostaje bez zmian.
Opcja Custom CSS dostępna jest w wielu szablonach (szczególnie Premium) jako zakładka ustawień motywu, więc w pierwszej kolejności sprawdź, czy Twój motyw ją obsługuje. Jeżeli nie – nic nie szkodzi – dostępnych jest wiele wtyczek, które umożliwiają dodawanie własnych stylów CSS (na przykład Simple Custom CSS)
Budowa stylu CSS
Pojedynczy styl CSS (inaczej zwany regułą) składa się z dwóch podstawowych elementów:
- selektora, który określa element strony do której będą odnosić się deklaracje (np. czcionka nagłówka),
- deklaracji, która określa jak sformatowany ma być dany element (np. kolor – niebieski, wielkość – 32px).
