Samodzielna modyfikacja kodu CSS nie jest skomplikowana, o ile znamy podstawowe zasady. Warto jednak znać kilka zasad, jak można zrobić to prawidłowo.
Lokalizacja - czyli, jak znaleźć odpowiedni kod CSS
Pierwszą sprawą jest zlokalizowanie kodu, który chcemy zmienić, możemy to zrobić w prosty sposób dzięki przeglądarce. Potrzebne do tego są narzędzia developerskie.
W większości przeglądarek internetowych (Chrome, Firefox itp.) możemy otworzyć tzw. narzędzia deweloperskie (Windows skrót F12). W tych narzędziach znajdziemy zakładkę nazywaną Inspektor lub Elementy. Następnie kilkamy prawy, przyciskiem myszy, na element, który chcemy zmienić i wciskamy opcję Zbadaj element (lub coś o podobnej nazwie). W panelu po prawej stronie zobaczy kod HTML oraz powiązany z nim CSS.
Na co zwrócić uwagę modyfikując kod CSS
Kopia zapasowa - zmiany w CSS mogą wpływać na wygląd całej strony. Zawsze warto utworzyć kopię zapasową oryginalnego pliku style.css przed wprowadzeniem zmian. Może to nawet być zapis w pliku .txt
Narzędzia do edycji - warto ułatwić sobie pracę korzystając z narzędzi do edycji CSS. Podkreślą one składnie na różne kolory, co pomoże nam w wygodny sposób wprowadzić zmiany.
Tablice CSS - jeżeli zaczynamy naszą przygodę z CSS, warto zwrócić uwagę na tablice CSS, które znacząco ułatwią nam pracę.
Testowanie - po wprowadzeniu nowego kodu warto dokładnie przejrzećm jak wygląda strona - również w wersji mobilnej. Może trzeba będzie dostosować wartości lub dodać dodatkowe selektory.
Przed edycją warto zadać sobie kilka pytań:
- Jaki selektor odpowiada za element, który chcesz zmienić,
- Jak wygląda obecny kod CSS?
- Gdzie jest osadzony, czy posiadamy motyw potomny?
- Jaki efekt chcemy osiągnąć naszymi zmianami?
Modyfikacje wprowadzane bezpośrednio w motywie
Jeśli edytujemy pliki motywu bezpośrednio, te zmiany mogą zostać utracone podczas aktualizacji motywu. Zdecydowanie warto rozważyć dodanie kodu w opcji Dostosuj motywu (sekcja własny CSS) lub w innym miejscu motywu potomnego. Ogólnie warto pamiętać, że wszystkie modyfikacje głównego motywu bez child theme nie są wskazane. Zawsze warto działać starannie i dokładnie, a wówczas z reguły wprowadzimy większość zmian, bez względu na wyjściowy wygląd naszego motywu.