Style CSS

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:

  1. Czcionka nagłówków wpisów w Twoim motywie ma kolor zielony.
  2. Chcesz, aby czcionka nagłówków wpisów miała kolor niebieski.
  3. Odnajdujesz informację (z dalszej części dowiesz się jak) który selektor jest odpowiedzialny za wygląd tytułów wpisów w Twoim szablonie.
  4. 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;
    }
  5. Zapisujesz zmiany i odświeżasz stronę.
  6. 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)

Simple Custom CSSBudowa 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).

Budowa stylu CSS

Podobne wpisy

  • Zbadaj elementZbadaj element Zbadaj element czyli jak znaleźć odpowiedni selektor stylu CSS i zmienić go według własnych upodobań!
  • Style CSS – TekstStyle CSS – Tekst Poniższe właściwości stylów CSS służą do określania wyglądu tekstu. Można za ich pomocą zmienić kolor tekstu, odstępy pomiędzy znakami i wyrazami w tekście, wysokość wiersza, wyrównanie tekstu w poziomie i pionie, sposób dekoracji tekstu, wcięcie pierwszej linijki akapitu.
  • Dodawanie komentarzyDodawanie komentarzy Opis procesu dodawania komentarzy, zastosowanie tagów HTML w komentarzach, ustawienia publikacji komentarzy.
  • Style CSS w motywieStyle CSS w motywie Informacje na temat możliwości dodawania niestandardowych stylów CSS z poziomu opcji motywu.
  • Jak działa wyszukiwarka internetowa?Jak działa wyszukiwarka internetowa? Kilka słów wstępu na temat funkcjonowania wyszukiwarek internetowych - jak działają i czy możemy mieć wpływ na prezentowane przez nie wyniki.
  • Ustawienia czytaniaUstawienia czytania Informacje na temat ustawień czytania - co wyświetla strona główna, liczba postów na jednej podstronie, ustawienia RSS, widoczność dla wyszukiwarek.

Na razie brak komentarzy.

Dodaj komentarz

Newsletter

Zapisz się do newslettera i otrzymuj informacje o nowych częściach kursu oraz ciekawostkach ze świata WordPressa.

* Nikomu nie przekażemy Twojego adresu email. Nie wysyłamy spamu.

Facebook

Grupa WordPress Dla Każdego

Zapraszamy także na grupę "WordPress Dla Każdego" na Facebooku

https://www.facebook.com/groups/1652448521698143/.

Grupa została stworzona z myślą o wymianie doświadczeń, wzajemnej pomocy, dyskusji i dzieleniu się informacjami dotyczącymi WordPressa.