Cette fonctionnalité est disponible sur tous les forfaits Goodshuffle Pro.
Changer les couleurs de l’intégration de votre site web est simple et vous permet d’harmoniser votre site avec votre identité visuelle.
Rendez-vous dans la section CSS personnalisé de votre site web (Article).
Vous utilisez Wix ? Cliquez ici !
Vous trouverez ci-dessous les extraits de code nécessaires pour modifier différentes couleurs sur votre site. Il est recommandé de copier/coller l’ensemble du bloc de code dans votre éditeur CSS, puis de modifier les couleurs selon vos préférences. Il n’est pas obligatoire de modifier toutes les couleurs.
Remarque : Si votre site utilise un thème de couleurs spécifique, vous devrez peut-être ajouter l’extrait suivant pour forcer la prise en compte de vos réglages :
!important;
Cet article contient tous les extraits CSS nécessaires. Si vous souhaitez modifier un élément précis, comme les couleurs générales, le bouton Ajouter ou les couleurs du panier, consultez les articles ci-dessous :
Extraits CSS pour les couleurs générales
Modifiez la couleur de fond et la couleur du texte du bouton "Rechercher" (par défaut fond noir et texte blanc) :
/* bouton recherche */
.gspro-o-search > .gspro-o-button {
/* cette propriété change la couleur de fond de l’élément ciblé */
background: red !important;
/* cette propriété change la couleur du texte de l’élément ciblé */
color: black !important;
}
Modifier la couleur de fond du bouton "Filtres" :
/* bouton filtre */
.gspro-c-item-gallery__toggle-filters {
background: green !important;
}
Modifier la couleur de fond du bouton "Catégories" (uniquement sur mobile) :
/* bouton catégorie - mobile uniquement */
.gspro-c-item-gallery__toggle-category {
background: orange !important;
}
Modifier UNIQUEMENT la couleur de fond du bouton "Ajouter à la liste de souhaits" :
/* couleur du bouton ajouter sur la carte */
gspro-item-card .gspro-o-card__add button {
background: blue !important;
}
Modifier UNIQUEMENT la couleur de l’icône du bouton "Ajouter à la liste de souhaits" :
/* couleur de l’icône ajouter sur la carte */
.gspro-c-item-card__add use {
fill: green !important;
}
Modifier à la fois la couleur de fond et l’icône du bouton "Ajouter à la liste de souhaits" :
/* couleur du bouton ajouter sur la carte */
gspro-item-card .gspro-o-card__add button {
background: blue !important;
}
/* couleur de l’icône ajouter sur la carte */
.gspro-c-item-card__add use {
fill: green !important;
}
Modifier la couleur du texte des catégories et sous-catégories :
/* couleur du texte des catégories */
.gspro-o-category {
color: purple !important;
}
Modifier la couleur du texte du nombre d’articles disponibles dans chaque catégorie et sous-catégorie :
/* couleur du texte du badge de nombre d’articles */
.gspro-u-badge {
color: orange !important;
}
Modifier la couleur du texte et du fond du nombre d’articles ajoutés au panier de la liste de souhaits :
/* badge du nombre d’articles dans la "liste de souhaits" */
gspro-wishlist .gspro-c-wishlist__count {
background: yellow !important;
color: purple !important;
}
Modifier la couleur de l’icône et du fond du bouton "Panier de la liste de souhaits" :
/* couleur de l’icône cœur du panier de souhaits */
gspro-wishlist[data-mode="collapse"] use {
fill: orange;
}
/* couleur de fond du bouton panier de souhaits */
.gspro-c-wishlist__trigger {
background: darkred !important;
}
/* polices */
:root {
--gspro-font-family-secondary: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif !important;
--gspro-font-family-secondary: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif !important;
--gspro-custom-font-size: 16px;
}
CSS de la carte article
Modifier la couleur de fond de la carte article :
gspro-item-card {
background: rgb(250, 250, 250);
}
Modifier la couleur de fond de la carte article uniquement au survol :
gspro-item-card:hover {
background: rgb(255, 255, 255);
}Afficher le titre complet d’un article sur la carte (peut réduire la taille de l’image) :
gspro-item-card .gspro-o-card__title {
color: #0;
white-space: wrap;
overflow: hidden;
text-overflow: ellipsis
}Modifier la couleur du titre de l’article sur la carte :
gspro-item-card .gspro-o-card__title {
color: red;
}
Modifier UNIQUEMENT la couleur de fond du bouton "Ajouter à la liste de souhaits" :
gspro-item-card .gspro-o-card__add button {
background: #2A2A2A;
}Modifier la couleur du bouton "Ajouter à la liste de souhaits" au survol :
gspro-item-card .gspro-o-card__add:hover button {
background: #1A1A1A;
}
CSS des détails de l’article
Modifier la couleur du titre de l’article dans la carte :
gspro-item-detail .gspro-c-item-detail__title {
color: red;
}Modifier la couleur du prix ainsi que l’épaisseur et la couleur de la bordure autour du prix dans la carte :
gspro-item-detail .gspro-c-item-detail__price {
border: 1px solid black;
color: black;
}
Modifier la couleur des options Quantité, Tarif, Sélectionner les dates et Heure de début dans la carte :
gspro-item-detail .gspro-o-form .gspro-o-form__horiz {color: red !important;}
Modifier la couleur de la description, des détails et des tarifs.
gspro-item-detail .gspro-o-list-item__title {color: orange !important;}
Modifier la couleur des relations sur un produit.
gspro-item-detail .gspro-o-card__title {color: red !important;}
CSS d'intégration au site web
L'intégration possède deux états différents. Au départ, elle est réduite et apparaît sous forme de bouton flottant en bas à droite de l'écran. Lorsqu'on clique dessus, elle passe en mode étendu.
Ce CSS vous montre comment appliquer des couleurs d'arrière-plan et de premier plan dans les deux états. Si vous utilisez cet extrait sur votre site, vous voudrez peut-être remplacer le fond “hotpink” par une couleur qui correspond à l'identité visuelle de votre site.
Changer UNIQUEMENT la couleur de l'icône sur le panier de favoris actif :
gspro-wishlist[data-mode="collapse"] use {
fill: red;
}
Changer la couleur de fond en haut du panier de favoris :
gspro-wishlist[data-mode="expand"] {
background: hotpink;
}Changer la couleur de fond ainsi que la couleur du nombre sur le cercle affichant le nombre d'articles dans un panier de favoris actif :
gspro-wishlist[data-mode="collapse"] .gspro-c-wishlist__count {background: black;color: white}
gspro-wishlist[data-mode="collapse"] {
background: white;
}
CSS des boutons
Le CSS des boutons ci-dessous ne doit être utilisé que si vous constatez que votre site, sur un navigateur ou appareil en particulier, ne change pas les couleurs.
Certains composants web utilisent des éléments de bouton. Pour garantir une apparence cohérente sur différents navigateurs, appareils et systèmes d'exploitation, nous définissons une propriété qui les rend faciles à reconnaître et à sélectionner.
Changer UNIQUEMENT la couleur de fond du bouton "Ajouter aux favoris" :
button.gspro-o-button {
background: pink;
}Changer UNIQUEMENT la couleur de fond du bouton "Ajouter aux favoris" au survol :
button.gspro-o-button:hover {
background: rgba(255, 255, 255, 0.2);
}Changer la couleur du bouton "Contact & Infos lieu" uniquement quand il n'est PAS survolé :
button.gspro-o-button--primary {
background: #1F1F1F;
}Changer la couleur du bouton "Contact & Infos lieu" UNIQUEMENT au survol :
button.gspro-o-button--primary:hover {
background: #3F3F3F;
}button.gspro-o-button--warning {
background: darkorange;
color: white;
}
button.gspro-o-button--warning:hover {
background: darkred;
color: white;
}Changer la couleur de la police sur le bouton "Enregistrer" sous "Sélectionner les dates" :
button.gspro-o-button--reverse {
background: white;
color: hotpink;
}Changer la couleur de la police sur le bouton "Enregistrer" sous "Sélectionner les dates" uniquement au survol :
button.gspro-o-button--reverse:hover {
background: rgba(255, 255, 255, 0.8);
color: hotpink;
}Changer la couleur du bouton de fermeture sous "Sélectionner les dates" :
button.gspro-o-button--icon {
background: inherit;
}Changer la couleur du bouton de fermeture sous "Sélectionner les dates" uniquement au survol :
button.gspro-o-button--icon:hover {
background: rgba(255, 255, 255, 0.2);
}
Vous voyez comme il est facile de faire ces modifications ? N'hésitez pas à contacter l'équipe si vous avez encore des questions concernant votre intégration au site web !
Besoin d'aide supplémentaire ?
Cliquez sur la bulle de chat bleue dans le coin inférieur de votre écran pour envoyer un message à notre équipe d'assistance — nous sommes là pour vous aider !
Remarque : Cet article a été traduit à l'aide de l'IA. Pour toute question ou clarification, contactez-nous via la bulle de chat en bas à droite de votre écran.