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/

Podobne wpisy

  • Style CSSStyle CSS Czym są style CSS i jak korzystać z opcji Custom CSS w WordPressie - kilka słów wstępu dla początkujących.
  • 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.
  • SpamSpam Czym jest spam, co spamerom daje masowe dodawanie spamowych komentarzy i jak walczyć ze spamem.
  • Jak znaleźć i wybrać motyw?Jak znaleźć i wybrać motyw? Porady jak znaleźć idealny motyw i na jakie elementy zwrócić uwagę podczas jego wyboru. Porównanie motywów darmowych i płatnych.
  • Słowa i frazy kluczoweSłowa i frazy kluczowe Czym są wartościowe słowa kluczowe i dlaczego nie warto pozycjonować strony na popularne hasła niezwiązane z jej zawartością.
  • Style CSS w motywieStyle CSS w motywie Informacje na temat możliwości dodawania niestandardowych stylów CSS z poziomu opcji motywu.

1 Komentarz

  1. 6 listopada 2015    

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

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.