Comment contrôler la couleur pour la class CSS "sprd-bg-s2"?

Français Spreadshop
, ,
#1

Je cherche à modifier la couleur de background pour la class CSS “.sprd-bg-s2” (elle est utilisée pour la couleur des pastilles “NOUVEAU” ajoutées récemment aux Spreashops).

Problème, la feuille de style générée automatiquement après le choix et la personnalsiation d’une palette de couleurs, contient une règle :
.sprd-bg-s2 {
background-color: #22262D !important;
}

Et ce “!important” m’empêche ensuite de modifier la background-color avec ma feuille de styles css personnalisée.

Où est-ce que je peux agir pour modifier sprd-bg-s2 ?

comment-modifier-class-css-sprd-bg-s2
comment-modifier-class-css-sprd-bg-s2.jpg372×605 38.9 KB

1 Like
#2

Oufffff il faut que je demande au nos devs :sweat_smile:

#3

Alors: c’est super simple :wink: Cette fonction éxiste dèja dans les paramètres:

secondary buttons text
secondary buttons text.JPG485×830 43 KB

Tu choisisses simplement le couleur que tu préferes.

#4

Merci.

Mais cela modifie aussi la couleur de tous mes textes ! Alors je crois que la mention “NOUVEAU” restera en noir…

#5

Salut,
Je rencontre le même problème sur mon site avec la boutique Spreadshirt.

Il faut savoir que la balise !important est utilisée pour deux raisons :

  1. Le code HTML et/ou le CSS est mal structuré.
  2. C’est pour surcharger du code tiers (HTML, CSS ou JS) que l’on ne peut pas modifier.

Dans tous les cas, cette balise ne devrait pas être utilisée. C’est possible, même sur des design très complexes ! Il suffit juste de savoir faire du CSS et penser son code (CSS mais aussi HTML) correctement :wink:

#6

Bon, j’ai trouvé une parade : utiliser une règle css plus détaillée et ajoutée à ma feuille de styles personnalisée :

.sprd-product-list-item__new-badge.sprd-bg-s2 {background-color: #00B2A5 !important;}

On est obligé d’ajouter !important à la fin, sinon, c’est la règle des CSS par défaut qui l’emporte malgré tout.

#7

Très juste. Mon propos concernait le code mal structuré des CSS de nos Spreadshop :wink:

#8