6–9 minut
Cześć! Wprowadzę was w CSS w WordPress. CSS jest to kaskadowy arkusz stylu. W poniższym tekście wyjaśnię pojęcie kaskadowości, czym jest dziedziczenie i jak działa oraz jak zmienić wygląd formularza we wtyczce Contact Form 7.
Spis treści
DEFINICJA
CSS to kaskadowy arkusz stylów. Kaskadowość znaczy, że jeżeli jest więcej stylów na stronie, to przeglądarka decyduje, który styl ma pierwszeństwo. W WordPress wygląda to tak, jeżeli korzystamy z motywu np. Astra i on już ma wbudowany styl lub wtyczka Contact Form 7 i chcemy zmienić jej wygląd, wówczas dodajemy kod CSS i zmienimy.
Przykład z życia, wyobraźcie sobie skrzyżowanie światła, nadają priorytet, które samochody pierwsze przejadą przez skrzyżowanie, każdy samochód jedzie z innej strony i podobnie jest z przeglądarką, pierwsze samochody przejadą mające zielone światło, pierwszy styl zostanie zastosowany posiadający najwyższy priorytet. I teraz skąd przeglądarka ma wiedzieć, komu pierwszemu uruchomić zielone światło, gdyż priorytet CSS ma swój poziom ważności.
Pierwszy poziom ważności ma style znajdujące się w motywie lub wtyczce, ale jeżeli jest, nadpiszemy w wyglądzie w zakładce Dodatkowy CSS, wówczas otrzymają większy poziom ważności i przeglądarka je zastosuje.
Czasami zdarza się, że motyw mimo dodania dodatkowego kodu CSS nie chce, zmieć np. koloru czy zmienić
rozmiaru okienka, wówczas można zastosować ! important, lecz nie za często, gdyż może to popsuć priorytety
stylów, lepszym wyjściem jest zastosowanie bardziej szczegółowej ścieżki zmiany, np. gdy chce zmienić rozmiar
okienka w formularzu, to pisze: klasę formularza, bo ona odpowiada za cały wygląd, potem elementu w nim się
znajdującego tzn. okienko formularza, którego rozmiar chce zmienić przykład:
.klasa formularz obszar textarea {
height: 300px;
width: 200px;
}
Jeżeli wprowadzimy parę stylów CSS do danej wtyczki lub motywu najlepiej oddzielić to komentarzem w formie
/* formularz kontaktowy */ nie będzie on widoczny w kodzie, ale to duże ułatwienie, żeby zorientować się,
gdzie dany styl się znajduję do konkretnej wtyczki czy motywu.
Dziedziczenie w CSS
Oprócz kaskadowości w CSS jest jeszcze dziedziczenie, stosowane jest w bardziej skomplikowanym kodzie, ale ogólnie warto wiedzieć, że istnieje coś jak dziedziczenie. Wskaże przykład, mamy rodzinę, rodzice przekazują dziecku pewne swoje cechy wyglądu jak kolor oczu. W CSS jest podobnie, rodzic ma ustalony z góry kolor tekstu na czarny, czyli każdy akapit, nagłówek czy test będą miały kolor czarny. Chcemy by jeden akapit, miał kolor niebieski, czyli jedno dziecko ma kolor oczu innego koloru, więc nadpisujemy kod w CSS tylko dla tego jednego akapitu np.
.klasa text nagłówek h2 {
color: blue;
}
wtedy tylko ten jeden akapit będzie miał inny kolor, tak działa dziedziczenie. Rodzic, czyli motyw w WordPressie ustala podstawowe kolory a dziecko, czyli jego wewnętrzny element ma te same cechy co rodzic, czyli dziedziczy, ale możemy to zmienić na taki kolor oczu, jaki chcemy, by dziecko miało za pomocą CSS.
Gdzie znaleźć klasę w WordPress?
Na stronie umieściłam już formularz ze wtyczki Contact Form 7. Klasa odznacza konkretny element na stronie, którego wygląd można stylizować indywidualnie, zatem zmiana wyglądu formularza wiąże się ze znalezieniem klasy w kodzie strony. Podpowiem, jak to zrobić. Na stronie klikamy na formularz prawym przyciskiem myszki i wybieramy ostatnią opcję, czyli „zbadaj”.
Po prawej stronie pojawi się nam kod witryny. Spokojnie, jest tego kodu dosyć sporo, ale nas interesuje konkretna jego część. Jak widać po najechaniu na kod po prawej stronie, po lewej wskazuje którego elementu dotyczy. Klasa formularza, którą poszukiwaliśmy to .wpcf7-form. Jest to kontener, który otacza cały formularz. Wszystkie pola, przyciski i inne składowe formularza są umieszczone w tym tagu. Możemy powiedzieć, że to takie „pudełko” dla wszystkich elementów.
Tag o nazwie „input” to najczęściej używane pole w formularzu. W większości przypadku służy do wpisywania tekstu np. hasła, adresu, imienia i nazwiska itp. Zależne jest to, jaki typ, czyli „type” jest określony w atrybutach.
„Textarea” największe pole w formularzu przeznaczone jest do wpisywania dłuższych tekstów niż jedno zdanie np. szczegółowego zapytania dotyczącego oferty.
Kiedy użytkownik witryny wypełni wszystkie wymagane pola i chce wysłać formularz na serwer, odpowiada za to przycisk — wyślij — czyli „submit” lub „button”.
Button jest bardziej elastyczny pod względem stylizacji.
Ostatnią klasą, na którą należy zwrócić uwagę, jest klasa control-wrap.
Służy ona do zmiany wyglądu odnośnie do wyrażenia zgody na przetwarzanie danych zgodnie z rozporządzeniem RODO.
Powyżej widzimy kod napisany w CSS zmiany wyglądu formularza kontaktowego. Stylizację CSS wymaga hierarchii, zaczynamy od ogólnej klasy do jej poszczególnych elementów, czyli od ogółu do szczegółu. Najpierw w kontenerze obniżę formularz odgórnie, w związku z tym wpisuję ogólną klasę formularza odpowiadającego za jego całość. Klasę zaczynamy zawsze od kropki: .wpcf7-form. Otwieramy nawias klamrowy { i wpisujemy zmiany mianowicie margin-top: 15px; margines od góry 15 pikseli średnik. Następnie chce zmniejszyć szerokość formularza, za to odpowiada width: 50%;, zmniejszam o połowę formularz. Wysokość również zmniejszam o połowę, wpisując height: 50%; każdy kod kończymy średnikiem.
Ostatnią zmianą, jaką wprowadzam, jest, to, że chce by formularz, był pośrodku kontenera. Robię to, wpisując margin-left: 25%;. Dlaczego 25%? Formularz znajduje się w kontenerze, czyli 100%, gdy odsunę go od lewej to 50%, zatem, żeby był na środku, muszę wprowadzić połowę z połowy, wówczas znajdzie się na środku.
Kolejne zmiany, jakie wprowadzę to w etykiecie. Odpowiada za to klasa .wpcf7-form label. Dokonam zmiany czcionki, wpisując kod: font-family: work (nazwa czcionki); oraz pogrubię tekst kodem w CSS font-weight: bold (pogrubienie);.
Następną zmianą, jaką dokonam, będzie wprowadzenie podkreślenia w polu „input”. Ponownie rozpocznę od wpisania klasy .wpcf7 input[type=text] oraz żeby zaoszczędzić miejsca, w kodzie wprowadzę drugą klasę odpowiadającą za umieszczenie adresu e-mail: .wpcf7 input [type=”email”]. Między nimi koniecznie jest wstawienie przecinka do oddzielenia klas. Za podkreślenie w CSS odpowiada kod border, umieszczę tylko dolne podkreślenie, ale jest też możliwość również obramowania całej etykiety, tylko góry, lewej bądź prawej strony. Za dolne podkreślenie odpowiada border-bottom: 2px (czyli jakiej ma być szerokości) solid, czyli linia ciągła oraz kolor, ja wybrałam czarny, czyli black. Tę samą czynność wykonam na polu textarea, ale wpiszę go osobno, ze względu na to, że zmienię wielkość pola do wpisania tekstu na 200 pikseli za pomocą kodu height: 200px; czyli zmieniam tylko wysokość, bo szerokość jest już wprowadzona
w ogólnej klasie.
Teraz zajmę się przyciskiem „submit”. Chce dostosować czcionkę do pozostałych etykiet, zatem wpisuję ogólną klasę .wpcf7 input[type=”submit”] otwieram nawias klamrowy { zaczynam od przesunięcia go bardziej na środek, jego pozycja jest wyznaczona przez formularz, nie przez kontener zatem testując, weryfikuję jak daleko, ma znaleźć się od lewej strony, piszę kod: margin-left: 35% jest za mało, 36% również, 37% to jest to — przycisk znalazł się na środku. Można oczywiście to obliczyć lub testować. Dalsze dostosowanie do pozostałych etykiet dokonam poprzez zmianę czcionki na work. Jak poprzednio odpowiada za to kod font-family: work; oraz pogrubię tekst komendą font-weight: bold; W tym momencie przycisk jest na środku formularza, ma zmienioną czcionę oraz pogrubiony tekst i kończę nawiasem klamrowym }. Ostatnią zmianą, jaką dokonam to po najechaniu na przycisk, ma on zmienić kolor i wskaźnik zmieni się z „łapkę wskazującą”. Ponownie wpisuję klasę formularza .wpcf7 input[type=”submit”]: hover (po najechaniu). Za zmianę koloru czcionki odpowiada color: white, następnie tło to background-color: darkblue (można wpisać kolor, jego odznaczenie szesnastokowe, czyli HEX lub rgb). Kod cursor: pointer, jak wspomniałam wcześniej, zmienia wskaźnik na „łapkę wskazującą”.
Ostatnia linijka kodu dotyczy tekstu z wyrażeniem zgody na przetwarzanie danych zgodnie z RODO. Zaczynamy od klasy .wpcf7-form-control-wrap, klasa odpowiadająca za checkboxa i tekst. Chce obniżyć ją o 10px od przycisku, wyślij. W nawiasie klamrowym {} wpisuję margin-top: 10px; Od góry wprowadzam margines 10px.
Wprowadziłam wszystkie zmiany w formularzu kontaktowym, które chciałam i są one widoczne. Podejrzewam, że to będzie nie ostatni kod wpisany w CSS. Jak sobie poradzić przy większej ilości kodu napisanego w CSS? Służy do tego komentarz, a wygląda tak: /* tutaj wpisujesz swój tekst np. formularz kontaktowy */ Ważne jest jego zakończenie, jak tego nie zrobimy zmiany się, nie dokonają i wróci pierwotny wygląd. Również komentarz można umieścić przy kodzie z informacją, do czego służy.
Komentarze pozwalają na porządek w kodzie i później, gdy wrócimy do niego za jakiś czas, pozwoli na odnalezienie się.
W drugiej części artykułu pokażę jak wprowadzić zmiany na urządzeniach mobilnych tj. tablet czy smartfon.
Sprawdź, również jak można dodać efekty za pomocą kodu CSS na stronę.
Strona działa, ale nikt się nie odzywa – co sprawdzić?
Strona działa, ale nikt się nie odzywa. Co sprawdzić? Wchodzisz do sklepu, wszystko wygląda…
Strona działała, ale Google jej nie widział. Sprawdziłam te ustawienia WordPress
Strona działa, można ją otworzyć z linku, więc pojawia się pytanie:
dlaczego nie wyświetla się…
Formularz kontaktowy nie wysyła wiadomości
Pewnego dnia dzwoni klient i mówi:
Wysłałam tydzień temu zapytanie przez formularz na stronie,
ale…
WordPress to nie tylko szablon.
WordPress to nie tylko szablon. Co decyduje o tym, czy strona naprawdę działa Na…
SEO-wiec, copywriter i marketer czym się różnią i jak wpływają na stronę
Gdy planujesz stronę internetową albo chcesz ją poprawić, pojawiają się trzy pojęcia:
SEO, copywriting…