Barva tlačítka v PrestaShopu: použijte custom.css místo úprav theme.css

Kam barvu přidat, aby nezmizela

Do custom.css aktivní šablony a u koupené šablony ideálně do child theme. Než otevřete jakékoli soubory, podívejte se do nastavení šablony v administraci. Mnoho koupených šablon má vlastní konfigurační modul s výběrem barev tlačítek a nadpisů. Pak změna zabere pár kliknutí a CSS nepotřebuje. Šablona Classic takové nastavení nemá. Každé místo, kde změnu uděláte, má jiné důsledky.

Pořadí, ve kterém se stylopisy načítají, popisuje dokumentace ke správě assetů šablony. Pokud vám už změny šablony po aktualizaci zmizely, přečtěte si, co dělat, když aktualizace šablony odstranila vaše změny.

Jak změnit barvu tlačítka krok za krokem

Potřebujete přístup k souborům šablony přes FTP nebo správce souborů na hostingu.

1. Otevřete stránku produktu a v nástrojích prohlížeče zjistěte třídu tlačítka (pravé tlačítko, Prozkoumat).
2. Otevřete soubor assets/css/custom.css ve složce aktivní šablony.
3. Přidejte pravidlo pro tlačítko a samostatné pro stav po najetí myší.
4. Soubor uložte, předtím si udělejte jeho kopii.
5. Vymažte cache v Rozšířené parametry > Výkon.
6. Zkontrolujte stránku produktu v anonymním okně a na telefonu.

V šabloně Classic má tlačítko pro vložení do košíku třídu add-to-cart. Pravidlo může vypadat takto:

.product-add-to-cart .add-to-cart {
  background-color: #2e7d32;
  color: #ffffff;
}
.product-add-to-cart .add-to-cart:hover {
  background-color: #1b5e20;
}

Stav po najetí myší popisuje MDN u selektoru :hover. Telefony ho nemají, takže základní barva musí fungovat sama.

Jak změnit barvy dalších prvků e-shopu

Stejně, pravidlem v custom.css, ale s jinou třídou. Níže jsou třídy ze šablony Classic. V koupené šabloně se názvy mohou lišit, proto je vždy ověřte v nástrojích prohlížeče.

Měňte jeden prvek po druhém a po každé změně stránku zkontrolujte. Několik změn najednou ztěžuje nalezení té, která něco rozbila. Do souboru přidejte také krátký komentář, co a kdy jste změnili. Za půl roku snáz najdete pravidlo, které je třeba opravit.

Úplná změna palety šablony, například všech odstínů zelené najednou, je obvykle práce se zdrojovými soubory šablony a přestavba. Tu obvykle dělá vývojář nebo autor šablony.

Jak zvolit barvu, která bude čitelná

Než změnu uložíte, zkontrolujte kontrast mezi textem tlačítka a jeho pozadím. Pro běžný text doporučují pravidla přístupnosti kontrast alespoň 4,5 : 1, jak vysvětluje W3C u kritéria kontrastu. Barvu ověříte ve WebAIM Contrast Checker zadáním kódů pozadí a textu.

Neděle, 20:30, a vy potřetí měníte zelenou v souboru, mažete cache a obnovujete stránku. Výrazná barva značky vypadá v logu dobře, ale bílý text se na ní ztrácí. Obvykle pomůže tmavší odstín stejné barvy.

Proč novou barvu nevidíte?

Nejčastěji kvůli cache nebo příliš slabému pravidlu. Zkontrolujte postupně:

• Vymazali jste cache v administraci a obnovili stránku mimo cache prohlížeče?
• Upravili jste custom.css v aktivní šabloně, ne v nadřazené?
• Je pravidlo šablony specifičtější než vaše? Pak do selektoru přidejte nadřazenou třídu.

O vrstvách cache více v článku změny v PrestaShopu nejsou vidět.

Jak změnit barvu tlačítka s chatem

Zadáte barvu a tlačítko. Váš chat (Claude nebo ChatGPT) najde stylopis, ukáže pravidlo, které přidá, a po vašem schválení ho uloží, s kopií souboru.