Un utente ha chiesto informazioni su Dara di Wordpress

Cambia Aggiungi colore carrello al passaggio del mouse

Un utente ha chiesto 👇

Voglio solo regolare il colore del passaggio del mouse del pulsante Aggiungi al carrello quando non sono selezionate opzioni. È un colore più caldo piuttosto che il blu navy che vorrei avere.

Apprezziamo qualsiasi aiuto! Benedici!

Lanciatore di thread

(@windanwaves)

2 anni fa

C’è un modo per cambiare tutte le coperture dei pulsanti in tutto il sito web? Ogni volta che penso di averli presi tutti ne trovo un altro.

Vorrei anche cambiare il colore del passaggio del mouse per il pulsante “procedi con PayPal” in questa pagina: https://windanwaves.com/shop/checkout/

Se potessi cambiare tutti i colori di un passaggio del mouse, potrei ridurre la quantità di codice che utilizzo e catturare tutti i pulsanti che non ho ancora notato.

GRAZIE DELL’AIUTO !!

(@ anonimo-16453565)

2 anni fa

Ehi, @windanwaves

Per farlo, vai a Aspetto → Personalizza → CSS aggiuntivo e inserisci il seguente codice:

button:hover {
  background-color: red !important;
}

Spero che quanto sopra ti possa aiutare.

Grazie.

(@mattjallday)

2 anni fa

Quindi funziona sulla maggior parte dei pulsanti.

Sto anche usando questo codice per cambiare tutti i colori dei pulsanti in nero:

a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt {
	background: #000000 !important;
}

C’è un modo per combinare questi due codici in modo che tutti i pulsanti siano # 000000 e i codici al passaggio del mouse siano # 24c7e1?

(@kokkieh)

2 anni fa

Ciao Matthew,

Il problema con questo è che alcuni pulsanti possono avere i propri plugin che possono avere il proprio file style.css, quindi quei pulsanti usano lo stile specificato dal plugin piuttosto che lo stile specificato dal tema. L’unico modo per catturarli tutti è ottenere i selettori CSS specifici applicabili a ciascun pulsante.

E se cambi il colore di sfondo dei pulsanti in nero, dovrai anche cambiare il colore del testo per mantenere leggibile il testo del pulsante.

Infine, cerca di evitare l’uso !important per quanto possibile. Se il tuo selettore CSS è abbastanza specifico, non dovresti averne bisogno. Qualunque sia il codice che provo, ce ne sono alcuni !important Le assicurazioni che hai aggiunto ne impediscono il corretto funzionamento, quindi è meglio rimuoverle completamente.

Vai al tuo CSS personalizzato e rimuovi queste due regole che hai aggiunto:

button:hover {
  background-color: #24c7e1 !important;
}

a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt {
	background: #000000 !important;
}

Quindi aggiungi quanto segue: cambia tutti i pulsanti che riesco a trovare, incluso quello Vai a PayPal:

/* Sets background and text color for clickable buttons */
a.button, button.button, input.button, #respond input#submit, a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt, a.button.wc-backward, a.button.wc-forward,button, input[type="button"], input[type="reset"], input[type="submit"], #infinite-handle span, .button {
  background-color: #000000;
  color: #24c7e1;
}

a.button:hover, button.button:hover, input.button:hover, #respond input#submit:hover, a.button.alt:hover, button.button.alt:hover, input.button.alt:hover, #respond input#submit.alt:hover, a.button.wc-backward:hover, a.button.wc-forward:hover, button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, #infinite-handle span:hover, .button:hover {
  background-color: #24c7e1;
  color: #515151;
}

/* Sets background and text color for disabled buttons */
a.button:disabled, a.button.disabled, a.button:disabled[disabled], button.button:disabled, button.button.disabled, button.button:disabled[disabled], input.button:disabled, input.button.disabled, input.button:disabled[disabled], #respond input#submit:disabled, #respond input#submit.disabled, #respond input#submit:disabled[disabled]{
  color: #24c7e1;
}

a.button:disabled:hover, a.button.disabled:hover, a.button:disabled[disabled]:hover, button.button:disabled:hover, button.button.disabled:hover, button.button:disabled[disabled]:hover, input.button:disabled:hover, input.button.disabled:hover, input.button:disabled[disabled]:hover, #respond input#submit:disabled:hover, #respond input#submit.disabled:hover, #respond input#submit:disabled[disabled]:hover {
  background-color: #24c7e1;
}

Lanciatore di thread

(@windanwaves)

2 anni fa

Sei fantastico! Grazie mille. Sembra più o meno esattamente come volevo che fosse. Lo apprezzo.

Le uniche cose che voglio mettere a punto ora sono il colore del testo sul pulsante delle opzioni selezionate qui:
https://windanwaves.com/shop/

Voglio cambiarlo da blu a bianco.

Con lo sfondo sul pulsante Aggiungi al carrello qui quando non sono selezionate opzioni:
https://windanwaves.com/product/follow-the-signs-tee/

Voglio cambiarlo da blu-verde a nero.

Se possibile tutto sarà perfetto. Sono già molto soddisfatto del codice che mi hai fornito. Grazie ancora !!

(@lizkarkoski)

2 anni fa

Ciao –

Le uniche cose che voglio mettere a punto ora sono il colore del testo sul pulsante delle opzioni selezionate qui:
https://windanwaves.com/shop/

Voglio cambiarlo da blu a bianco.

Aggiungi il seguente CSS:


a.button.product_type_variable.add_to_cart_button 
.content-wrapper.full-width a {
    color: #ffff;
}

Con lo sfondo sul pulsante Aggiungi al carrello qui quando non sono selezionate opzioni:
https://windanwaves.com/product/follow-the-signs-tee/

Voglio cambiarlo da blu-verde a nero.

Utilizza la seguente SEC:

div.product form.cart .button {
 background-color: #15b6b8;
}

Fammi sapere se funziona bene 🙂

(@lizkarkoski)

2 anni fa

Scusa. Ho combinato un pasticcio con quella seconda parte della SEC. Poiché il pulsante è disabilitato finché non viene selezionato un prodotto, è necessario utilizzare questo:

.disabled {
   background-color: black !important;
}

Lanciatore di thread

(@windanwaves)

2 anni fa

Hmmm per qualche motivo il primo codice non apporta modifiche al testo delle opzioni selezionate.

Il secondo codice ha funzionato alla grande !!

Vi ringrazio molto!

(@kokkieh)

1 anno, 12 mesi fa

Hmmm per qualche motivo il primo codice non apporta modifiche al testo delle opzioni selezionate.

L’ordine in cui viene posizionato un SEC è importante: viene sempre eseguito dall’alto verso il basso. E sembra in entrambi i casi che tu metta il codice che Liz ti ha dato tra il codice che ti ho dato prima. Ciò potrebbe impedire al codice di funzionare correttamente, in quanto potrebbe portare a una successiva violazione del nuovo codice: quando Liz lo ha testato, sarebbe stato il suo codice DOPO il codice che ti ho dato, non tra.

Per favore, sposta tutto il codice che Liz ti ha dato in fondo al CSS personalizzato, in modo che appaia solo dopo il codice che ho dato. Vale a dire, dovrebbe assomigliare a:

/* Sets background and text color for clickable buttons */
a.button, button.button, input.button, #respond input#submit, a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt, a.button.wc-backward, a.button.wc-forward,button, input[type="button"], input[type="reset"], input[type="submit"], #infinite-handle span, .button {
  background-color: #000000;
  color: #ffffff;
}

/* Sets background and text color for button hover */
a.button:hover, button.button:hover, input.button:hover, #respond input#submit:hover, a.button.alt:hover, button.button.alt:hover, input.button.alt:hover, #respond input#submit.alt:hover, a.button.wc-backward:hover, a.button.wc-forward:hover, button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, #infinite-handle span:hover, .button:hover {
  background-color: #24c7e1;
  color: #ffffff;
}

/* Sets background and text color for disabled buttons */
a.button:disabled, a.button.disabled, a.button:disabled[disabled], button.button:disabled, button.button.disabled, button.button:disabled[disabled], input.button:disabled, input.button.disabled, input.button:disabled[disabled], #respond input#submit:disabled, #respond input#submit.disabled, #respond input#submit:disabled[disabled]{
  color: #ffffff;
}

/* Sets background and text color for disabled buttons hover */
a.button:disabled:hover, a.button.disabled:hover, a.button:disabled[disabled]:hover, button.button:disabled:hover, button.button.disabled:hover, button.button:disabled[disabled]:hover, input.button:disabled:hover, input.button.disabled:hover, input.button:disabled[disabled]:hover, #respond input#submit:disabled:hover, #respond input#submit.disabled:hover, #respond input#submit:disabled[disabled]:hover {
  background-color: #000000;
}

/* Changes text color on Select Options button on Shop page */
a.button.product_type_variable.add_to_cart_button  {
  color: #ffffff;
}

Si noti inoltre che ho leggermente modificato il codice per il pulsante Seleziona opzioni.

Il secondo codice ha funzionato alla grande !!

Utilizzando !important viola questo comando, motivo per cui qualsiasi codice aggiunto funziona sempre. Ma viola questo comando, il che significa quando lo hai aggiunto !important con qualcosa, non c’è modo di superarlo in seguito, se necessario.

Prova invece questo (ricordati di aggiungerlo solo dopo il codice esistente):

/* Changes background color for inactive Add To Cart button on variable product page */
button.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed {
  background-color: #000000;
}

Essendo più specifici nel nostro selettore possiamo ottenere e utilizzare lo stesso risultato !important, ma senza potenziali problemi futuri !important puo ‘causare.

Lanciatore di thread

(@windanwaves)

1 anno, 12 mesi fa

Funziona perfettamente! Grazie!!!!! <3

(@kokkieh)

1 anno, 12 mesi fa

Disposto ad aiutare 🙂

Was this helpful?

0 / 0

Lascia un commento 0

Your email address will not be published. Required fields are marked *