PrestaShop Button-Farbe ändern: custom.css statt theme.css bearbeiten

Wo Sie die Farbe einfügen, damit sie nicht verschwindet

In der custom.css des aktiven Themes, und bei einem gekauften Theme am besten in einem Child Theme. Bevor Sie Dateien öffnen, sehen Sie sich die Theme-Einstellungen im Backend an. Viele gekaufte Themes haben ein eigenes Konfigurationsmodul mit einer Farbauswahl für Buttons und Überschriften. Dann ist die Änderung eine Sache von ein paar Klicks und braucht kein CSS. Das Theme Classic hat solche Einstellungen nicht. Jede Stelle, an der Sie die Änderung machen können, hat andere Folgen.

Die Reihenfolge, in der Stylesheets geladen werden, beschreibt die Dokumentation zur Verwaltung von Theme-Assets. Wenn Ihnen Theme-Änderungen schon einmal nach einem Update verschwunden sind, lesen Sie, was zu tun ist, wenn ein Theme-Update Ihre Änderungen entfernt hat.

Wie Sie eine Button-Farbe Schritt für Schritt ändern

Sie brauchen Zugriff auf die Theme-Dateien per FTP oder über den Dateimanager Ihres Hosters.

1. Öffnen Sie eine Produktseite und prüfen Sie die Klasse des Buttons in den Browser-Werkzeugen (Rechtsklick, Untersuchen).
2. Öffnen Sie die Datei assets/css/custom.css im Ordner des aktiven Themes.
3. Fügen Sie eine Regel für den Button hinzu und eine eigene für den Hover-Zustand.
4. Speichern Sie die Datei, nachdem Sie vorher eine Kopie davon angelegt haben.
5. Leeren Sie den Cache unter Erweiterte Einstellungen > Leistung.
6. Prüfen Sie die Produktseite in einem privaten Fenster und auf dem Handy.

Im Theme Classic hat der Button „In den Warenkorb“ die Klasse add-to-cart. Die Regel kann so aussehen:

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

Den Hover-Zustand beschreibt MDN beim Selektor :hover. Handys haben ihn nicht, die Grundfarbe muss also allein funktionieren.

Wie Sie die Farben anderer Shop-Elemente ändern

Genauso, mit einer Regel in custom.css, aber mit einer anderen Klasse. Unten stehen Klassen aus dem Theme Classic. In einem gekauften Theme können die Namen abweichen, prüfen Sie sie also immer in den Browser-Werkzeugen.

Ändern Sie immer ein Element und prüfen Sie die Seite nach jeder Änderung. Mehrere Änderungen auf einmal machen es schwer, die zu finden, die etwas kaputt gemacht hat. Fügen Sie außerdem einen kurzen Kommentar in die Datei ein, was Sie wann geändert haben. In sechs Monaten finden Sie die Regel, die korrigiert werden muss, so leichter.

Eine vollständige Änderung der Theme-Palette, zum Beispiel aller Grüntöne auf einmal, ist meist Arbeit an den Quelldateien des Themes und ein Neubau. Das macht in der Regel ein Entwickler oder der Theme-Autor.

Wie Sie eine Farbe wählen, die lesbar ist

Prüfen Sie den Kontrast zwischen Button-Text und Hintergrund, bevor Sie die Änderung speichern. Für normalen Text empfehlen die Barrierefreiheitsrichtlinien einen Kontrast von mindestens 4,5 zu 1, wie das W3C zum Kontrastkriterium erklärt. Eine Farbe können Sie im WebAIM Contrast Checker prüfen, indem Sie die Codes für Hintergrund und Text eingeben.

Sonntag, 20:30, und Sie ändern das Grün in der Datei zum dritten Mal, leeren den Cache und laden die Seite neu. Die kräftige Markenfarbe sieht im Logo gut aus, aber weißer Text geht darauf unter. Ein dunklerer Ton derselben Farbe hilft meist.

Warum sehen Sie die neue Farbe nicht?

Meist wegen des Caches oder einer zu schwachen Regel. Prüfen Sie der Reihe nach:

• Haben Sie den Cache im Backend geleert und die Seite unter Umgehung des Browser-Caches neu geladen?
• Haben Sie custom.css im aktiven Theme bearbeitet, nicht im übergeordneten Theme?
• Ist die Regel des Themes spezifischer als Ihre? Dann ergänzen Sie Ihren Selektor um eine übergeordnete Klasse.

Mehr zu den Cache-Ebenen sagen wir im Beitrag Änderungen in PrestaShop nicht sichtbar.

Wie Sie die Button-Farbe mit dem Chat ändern

Sie nennen die Farbe und den Button. Ihr Chat (Claude oder ChatGPT) findet das Stylesheet, zeigt die Regel, die er hinzufügen wird, und speichert sie nach Ihrer Zustimmung, mit einer Kopie der Datei.