Cambiare colore pulsante PrestaShop: usa custom.css invece di modificare theme.css

Dove aggiungere il colore perché non sparisca

Nel custom.css del tema attivo, e con un tema acquistato meglio in un child theme. Prima di aprire qualsiasi file, guarda le impostazioni del tema nel back office. Molti temi acquistati hanno un loro modulo di configurazione con la scelta dei colori per pulsanti e titoli. In quel caso la modifica richiede pochi clic e nessun CSS. Il tema Classic non ha impostazioni del genere. Ogni posto in cui puoi fare la modifica ha conseguenze diverse.

L'ordine di caricamento dei fogli di stile è descritto nella documentazione sulla gestione delle risorse del tema. Se le modifiche al tema ti sono già sparite dopo un aggiornamento, leggi cosa fare quando un aggiornamento del tema ha cancellato le tue modifiche.

Come cambiare il colore di un pulsante passo per passo

Ti serve l'accesso ai file del tema via FTP o con il file manager del tuo hosting.

1. Apri una pagina prodotto e controlla la classe del pulsante negli strumenti del browser (clic destro, Ispeziona).
2. Apri il file assets/css/custom.css nella cartella del tema attivo.
3. Aggiungi una regola per il pulsante e una separata per lo stato al passaggio del mouse.
4. Salva il file, dopo averne fatto prima una copia.
5. Svuota la cache in Parametri avanzati > Prestazioni.
6. Controlla la pagina prodotto in una finestra privata e dal telefono.

Nel tema Classic il pulsante aggiungi al carrello ha la classe add-to-cart. La regola può essere così:

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

Lo stato al passaggio del mouse è descritto da MDN alla voce del selettore :hover. I telefoni non ce l'hanno, quindi il colore base deve funzionare da solo.

Come cambiare i colori di altri elementi del negozio

Allo stesso modo, con una regola in custom.css, ma con una classe diversa. Qui sotto le classi del tema Classic. In un tema acquistato i nomi possono essere diversi, quindi controllali sempre negli strumenti del browser.

Cambia un elemento alla volta e controlla la pagina dopo ogni modifica. Più modifiche insieme rendono difficile trovare quella che ha rotto qualcosa. Aggiungi anche un breve commento nel file con cosa hai cambiato e quando. Fra sei mesi sarà più facile trovare la regola da sistemare.

Un cambio completo della palette del tema, per esempio tutte le tonalità di verde insieme, di solito è un lavoro sui file sorgente del tema e una ricompilazione. Di solito lo fa uno sviluppatore o l'autore del tema.

Come scegliere un colore che sia leggibile

Controlla il contrasto tra il testo del pulsante e il suo sfondo prima di salvare la modifica. Per il testo normale le linee guida sull'accessibilità raccomandano un contrasto di almeno 4,5 a 1, come spiega il W3C a proposito del criterio sul contrasto. Puoi controllare un colore in WebAIM Contrast Checker inserendo i codici dello sfondo e del testo.

Domenica, ore 20:30, e stai cambiando il verde nel file per la terza volta, svuotando la cache e ricaricando la pagina. Il colore acceso del marchio sta bene nel logo, ma il testo bianco sopra si perde. Di solito aiuta una tonalità più scura dello stesso colore.

Perché non vedi il nuovo colore?

Il più delle volte per la cache o per una regola troppo debole. Controlla in ordine:

• Hai svuotato la cache nel back office e ricaricato la pagina saltando la cache del browser?
• Hai modificato custom.css nel tema attivo, non nel tema genitore?
• La regola del tema è più specifica della tua? Allora aggiungi una classe genitore al tuo selettore.

Dei livelli di cache parliamo di più nell'articolo modifiche non visibili in PrestaShop.

Come cambiare il colore del pulsante con la chat

Dai il colore e il pulsante. La tua chat (Claude o ChatGPT) trova il foglio di stile, mostra la regola che aggiungerà e la salva dopo la tua approvazione, con una copia del file.