Zbadaj element

Być może nasuwa Ci się pytanie:

  • No tak, style CSS wydają się być bardzo użytecznym rozwiązaniem, ale jak mam z nich korzystać, skoro nie znam struktury stylów CSS w moim szablonie? Nie wiem, który selektor czego dotyczy, i w ogóle nie wiem od czego zacząć!

W takiej sytuacji bardzo pomocna okazuje się opcja Zbadaj Element, dostępna w większości przeglądarek (np. Chrome, Mozilla czy Internet Explorer).

Aby jej użyć, wejdź na dowolną stronę internetową (najlepiej własną – tą którą właśnie tworzysz), najedź kursorem na interesujący Cię element strony (np. nagłówek, akapit lub zdjęcie) i naciśnij prawy przycisk myszy. Rozwinie się menu z na pewno dobrze znanymi Ci opcjami (zapisz stronę, drukuj, wyświetl źródło itp.) – ostatnią z nich jest właśnie „Zbadaj element”. Opcję można także uaktywnić naciskając kombinację klawiszy Ctrl + Shift + I.

Zbadaj elementPo uruchomieniu opcji „Zbadaj element”, w dolnej części przeglądarki pojawi się dodatkowe okno dialogowe, w którym znajdziemy kod źródłowy dotyczący badanego elementu oraz style CSS (zazwyczaj po prawej stronie okna).

Style CSS elementu można zmieniać bezpośrednio w tym oknie, a zmiany podglądać w czasie rzeczywistym w przeglądarce. Oczywiście, gdy odświeżymy stronę, wszystkie wprowadzone wcześniej zmiany zostaną usunięte. Niemniej jednak dzięki temu dowiesz się jaki styl należy zmienić, aby wprowadzić przewidziane zmiany na stałe.

Przykład:

Jeżeli chcesz wprowadzić zmiany w stylu CSS dotyczącym nagłówka wpisu, musisz kliknąć na nim prawym klawiszem myszy i wybrać opcję „Zbadaj element”.

Zbadaj elementZ okna Reguły dowiesz się, że za jego wygląd odpowiada selektor .entry-title. Pomiędzy klamrami dopisz odpowiednią deklarację (np. jeżeli chcesz zmienić kolor czcionki na czerwony – font-color: #dc0000;) i naciśnij Enter. Jeżeli na ekranie tytuł zmieni kolor na czerwony, oznacza to, że właśnie taką regułę musisz wpisać w odpowiednim polu Custom CSS (w szablonie lub wtyczce).

PS: O budowie stylu CSS przeczytasz w poprzednim wpisie – http://wpwizard.pl/wordpress-css/

1 Komentarz

  1. 6 listopada 2015    

    Bardzo prosty i zrozumiały wpis dla początkujących użytkowników

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/