Zmiana koloru przycisku PrestaShop: custom.css zamiast edycji theme.css
Kolor przycisku w PrestaShop zmienisz, dopisując regułę CSS do pliku custom.css w motywie. W Classic to assets/css/custom.css, wczytywany po głównych stylach. Nie edytuj theme.css, bo przebudowa albo aktualizacja motywu go nadpisze. Po zapisie wyczyść pamięć podręczną, bo inaczej sklep pokaże stary kolor.
Autor: Sani. Sani buduje moduł TellMyShop i na co dzień pracuje z zapleczem sklepów PrestaShop.
Aktualizacja: · 4 min czytania
Gdzie dopisać kolor, żeby nie zniknął?
W custom.css aktywnego motywu, a przy kupionym motywie najlepiej w motywie potomnym. Zanim otworzysz pliki, zajrzyj do ustawień motywu w panelu. Wiele kupionych motywów ma własny moduł konfiguracji z wyborem kolorów przycisków i nagłówków. Wtedy zmiana zajmuje kilka kliknięć i nie wymaga CSS. Motyw Classic takich ustawień nie ma. Każde miejsce zmiany ma inne skutki.
| Miejsce zmiany | Przetrwa przebudowę motywu | Przetrwa aktualizację motywu |
|---|---|---|
| theme.css | nie | nie |
| custom.css w motywie | tak | nie zawsze, zależy od autora motywu |
| custom.css w motywie potomnym | tak | tak |
| pole na własny CSS w ustawieniach motywu | tak | zwykle tak |
Kolejność wczytywania plików stylów opisuje dokumentacja zarządzania zasobami motywu. Jeśli zmiany w motywie znikały ci już po aktualizacji, przeczytaj, co zrobić, gdy aktualizacja szablonu usunęła zmiany.
Jak zmienić kolor przycisku krok po kroku?
Potrzebujesz dostępu do plików motywu przez FTP albo menedżer plików hostingu.
- Otwórz stronę produktu i sprawdź klasę przycisku w narzędziach przeglądarki (prawy klik, Zbadaj).
- Otwórz plik assets/css/custom.css w katalogu aktywnego motywu.
- Dopisz regułę dla przycisku i osobną dla stanu po najechaniu kursorem.
- Zapisz plik, wcześniej zachowując jego kopię.
- Wyczyść pamięć podręczną w Zaawansowane > Wydajność.
- Sprawdź stronę produktu w oknie prywatnym i na telefonie.
W motywie Classic przycisk dodawania do koszyka ma klasę add-to-cart. Reguła może wyglądać tak:
.product-add-to-cart .add-to-cart {
background-color: #2e7d32;
color: #ffffff;
}
.product-add-to-cart .add-to-cart:hover {
background-color: #1b5e20;
}Stan po najechaniu opisuje MDN przy selektorze :hover. Na telefonie go nie ma, więc kolor podstawowy musi wystarczyć sam.
Jak zmienić kolory innych elementów sklepu?
Tak samo, regułą w custom.css, ale z inną klasą. Poniżej klasy z motywu Classic. W kupionym motywie nazwy mogą być inne, więc zawsze sprawdź je w narzędziach przeglądarki.
| Element | Klasa w Classic | Co się zmieni |
|---|---|---|
| Wszystkie główne przyciski | .btn-primary | przyciski w koszyku, zamówieniu i formularzach |
| Przycisk na karcie produktu | .product-add-to-cart .add-to-cart | tylko ten jeden przycisk |
| Cena na karcie produktu | .current-price | kolor aktualnej ceny |
| Nagłówek strony | #header | tło górnej części strony |
| Stopka | #footer | tło stopki |
Zmieniaj po jednym elemencie i sprawdzaj stronę po każdej zmianie. Kilka zmian naraz utrudnia znalezienie tej, która coś zepsuła. Zapisuj też w pliku krótki komentarz, co i kiedy zmieniłeś. Za pół roku łatwiej będzie znaleźć regułę, którą trzeba poprawić.
Pełna zmiana palety motywu, na przykład wszystkich odcieni zieleni naraz, to zwykle praca na plikach źródłowych motywu i jego przebudowa. Takie zmiany zwykle robi developer albo autor motywu.
Jak wybrać kolor, który będzie czytelny?
Sprawdź kontrast tekstu na przycisku z jego tłem, zanim zapiszesz zmianę. Wytyczne dostępności zalecają dla zwykłego tekstu kontrast co najmniej 4,5 do 1, co wyjaśnia W3C przy kryterium kontrastu. Kolor sprawdzisz w WebAIM Contrast Checker, wpisując kod tła i tekstu.
Niedziela, 20:30, trzeci raz zmieniasz zieleń w pliku, czyścisz pamięć i odświeżasz stronę. Jasny kolor marki ładnie wygląda w logo, ale biały napis na nim ginie. Zwykle pomaga ciemniejszy odcień tego samego koloru.
Dlaczego nowego koloru nie widać?
Najczęściej przez pamięć podręczną albo zbyt słabą regułę. Sprawdź po kolei:
- Czy wyczyściłeś pamięć podręczną w panelu i odświeżyłeś stronę z pominięciem pamięci przeglądarki?
- Czy edytowałeś custom.css aktywnego motywu, a nie motywu nadrzędnego?
- Czy reguła motywu nie jest bardziej szczegółowa niż twoja? Wtedy dopisz do selektora nadrzędną klasę.
Więcej o warstwach pamięci podręcznej piszemy w tekście PrestaShop nie widać zmian.
Jak zmienić kolor przycisku z Claude?
Podajesz kolor i przycisk. Claude znajduje plik stylów, pokazuje dopisaną regułę i zapisuje ją po twojej zgodzie, z kopią pliku.
Zrób przycisk „Dodaj do koszyka” w naszej zieleni #2E7D32 z białym tekstem, po najechaniu trochę ciemniejszy.
Motyw Classic, plik assets/css/custom.css jest pusty. Kontrast bieli na #2E7D32 spełnia zalecenie dla zwykłego tekstu. Dopiszę:
było: (pusty plik)
będzie: .product-add-to-cart .add-to-cart { background-color: #2e7d32; color: #fff; }
będzie: .product-add-to-cart .add-to-cart:hover { background-color: #1b5e20; }
Przed zapisem zrobię kopię pliku. Potem wyczyszczę pamięć podręczną i sprawdzę stronę produktu.
Gdy kolor się nie spodoba, Claude przywróci poprzednią wersję pliku z kopii. Darmowy Audyt plików motywu nie zmienia, do tego potrzebna jest wersja płatna z włączonym blokiem Wygląd.
Przykład prośby: zmiana koloru przycisku „Dodaj do koszyka”. Porównanie wersji jest w cenniku.
Pytania i odpowiedzi
Gdzie jest plik custom.css w PrestaShop?
W motywie Classic to plik assets/css/custom.css w katalogu motywu. PrestaShop wczytuje go po głównym pliku stylów, więc twoje reguły wygrywają z regułami motywu. W kupionych motywach plik może mieć inną nazwę albo motyw ma pole na własny CSS w ustawieniach. Sprawdź to w dokumentacji motywu.
Dlaczego nie edytować theme.css?
Bo theme.css to plik zbudowany z kodu źródłowego motywu. Przy aktualizacji albo przebudowie motywu powstaje od nowa, a twoje zmiany znikają. Plik custom.css jest przeznaczony na własne style i nie jest nadpisywany przy przebudowie. Przy aktualizacji kupionego motywu bezpieczniej trzymać zmiany w motywie potomnym.
Czy zmiana koloru przycisku działa w całym sklepie?
Zależy od reguły. Jeśli zmienisz klasę ogólną przycisków głównych, zmienią się wszystkie takie przyciski: w koszyku, w zamówieniu, w formularzach. Jeśli celujesz tylko w przycisk dodawania do koszyka na karcie produktu, zmieni się tylko on. Podgląd zmiany od Claude pokazuje, którą regułę dopisuje.
Jak sprawdzić, czy kolor przycisku jest czytelny?
Sprawdź kontrast tekstu z tłem w darmowym narzędziu, na przykład WebAIM Contrast Checker. Dla zwykłego tekstu wytyczne dostępności zalecają kontrast co najmniej 4,5 do 1. Biały tekst na jasnej zieleni albo żółci zwykle tego nie spełnia. Ciemniejszy odcień tego samego koloru zwykle pomaga.
Ile zmian w plikach motywu Claude zrobi w ciągu godziny?
Domyślnie 20 zapisów plików na godzinę, a limit zmienisz w panelu modułu. Zmiany plików motywu działają w wersji płatnej, w bloku Wygląd, i tylko przez osobne połączenie serwisowe z adresów IP z twojej listy. Przed każdym zapisem Claude pokazuje różnicę w pliku i robi jego kopię.
PrestaShop jest zastrzeżonym znakiem towarowym PrestaShop SA. Claude jest znakiem towarowym Anthropic. TellMyShop nie jest powiązany z żadną z tych firm.