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 image de marque.
Rendez-vous dans la section CSS personnalisé de votre site (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 passer outre les réglages de votre thème :
!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
Changer la couleur de fond et la couleur de police du bouton « Rechercher » (par défaut fond noir et texte blanc) :
/* bouton de 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;
}
Changer la couleur de fond du bouton « Filtres » :
/* bouton filtre */
.gspro-c-item-gallery__toggle-filters {
background: green !important;
}
Changer 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;
}
Changer 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;
}
Changer 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;
}
Changer la couleur de fond ET de 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;
}
Changer la couleur de police des catégories et sous-catégories :
/* couleur du texte des catégories */
.gspro-o-category {
color: purple !important;
}
Changer la couleur de police 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;
}
Changer la couleur de police et de fond du nombre d’articles ajoutés au panier de la liste de souhaits :
/* badge du nombre d’articles dans le « panier » de la liste de souhaits */
gspro-wishlist .gspro-c-wishlist__count {
background: yellow !important;
color: purple !important;
}
Changer 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;
}
/* fond du bouton cœur du 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 des cartes d’articles
Changer la couleur de fond de la carte d’article :
gspro-item-card {
background: rgb(250, 250, 250);
}
Changer la couleur de fond de la carte d’article uniquement au survol :
gspro-item-card:hover {
background: rgb(255, 255, 255);
}
Afficher l’intégralité du titre 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
}
Changer la couleur du titre de l’article sur la carte :
gspro-item-card .gspro-o-card__title {
color: red;
}
Changer UNIQUEMENT la couleur de fond du bouton « Ajouter à la liste de souhaits » :
gspro-item-card .gspro-o-card__add button {
background: #2A2A2A;
}Changer 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 d’article
Changer la couleur du titre de l’article dans la fiche détaillée :
gspro-item-detail .gspro-c-item-detail__title {
color: red;
}
Changer la couleur du prix ainsi que la largeur et la couleur de la bordure autour du prix dans la fiche détaillée :
gspro-item-detail .gspro-c-item-detail__price {
border: 1px solid black;
color: black;
}
Changer la couleur des options Quantité, Tarif, Sélectionner les dates et Heure de début dans la fiche détaillée :
gspro-item-detail .gspro-o-form .gspro-o-form__horiz {color: red !important;}
Changer la couleur de la description, des détails et des tarifs
gspro-item-detail .gspro-o-list-item__title {color: orange !important;}
Changer la couleur des Relations sur un produit
gspro-item-detail .gspro-o-card__title {color: red !important;}
CSS pour l'intégration au site web
L'intégration a deux états différents. Au départ, elle est réduite et apparaît comme un 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 qui affiche 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 un appareil en particulier, ne change pas les couleurs.
Certains composants web contiennent des éléments de type 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 à la liste de souhaits" :
button.gspro-o-button {
background: pink;
}Changer UNIQUEMENT la couleur de fond du bouton "Ajouter à la liste de souhaits" 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 du texte sur le bouton "Enregistrer" sous "Sélectionner les dates" :
button.gspro-o-button--reverse {
background: white;
color: hotpink;
}
Changer la couleur du texte 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 !
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 de votre écran.