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

Na razie brak komentarzy.

Dodaj komentarz

„WordPress dla początkujących” – nowa książka już w sprzedaży!

Szkolenie – Warszawa 9 grudnia 2017

Termin:

9 grudnia 2017 w godzinach 9 - 17

Miejsce:

Warszawa

Opis szkolenia:

Stwórz samodzielnie swoją stronę internetową w pod okiem trenera podczas szkolenia "Strona internetowa w WordPressie". Płacisz kwotę niższą od zlecenia stworzenia strony zewnętrznej firmie – zyskujesz zarówno atrakcyjną, funkcjonalną oraz (co najważniejsze) działającą stronę internetową jak i umiejętności, które z pewnością przydadzą się w przyszłości!

Szkolenie odbywa się w pracowni komputerowej wyposażonej w komputery stacjonarne - nie ma potrzeby przynoszenia własnego sprzętu.

100% PRAKTYKI – podczas szkolenia zajmujemy się tylko i wyłącznie tworzeniem od podstaw stron internetowych kursantów.

Więcej informacji:

http://wpwizard.pl/szkolenie-wordpress-warszawa/

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.

PRZYJDŹ NA SZKOLENIE W WARSZAWIE

Termin:

9 grudnia 2017 w godzinach 9 – 17

Miejsce:

Warszawa

Opis szkolenia:

Stwórz samodzielnie swoją stronę internetową w pod okiem trenera podczas szkolenia „Strona internetowa w WordPressie”. Płacisz kwotę niższą od zlecenia stworzenia strony zewnętrznej firmie – zyskujesz zarówno atrakcyjną, funkcjonalną oraz (co najważniejsze) działającą stronę internetową  jak i umiejętności, które z pewnością przydadzą się w przyszłości!

Szkolenie odbywa się w pracowni komputerowej wyposażonej w komputery stacjonarne  – nie ma potrzeby przynoszenia własnego sprzętu.

100% PRAKTYKI – podczas szkolenia zajmujemy się tylko i wyłącznie tworzeniem od podstaw stron internetowych kursantów.

Więcej informacji:

http://wpwizard.pl/szkolenie-wordpress-warszawa/