Passer au contenu principal

DESIGN | Comment modifier la couleur du texte blanc sur fond blanc ou noir sur fond noir - Base de connaissances / Aspect et Personnalisation - ShopFactory Help Center

DESIGN | Comment modifier la couleur du texte blanc sur fond blanc ou noir sur fond noir

Liste des auteurs

A. Sur la page de validation des commandes - les textes du formulaire sont blancs sur fond blanc.

C'est l‘élément GC22. Faire en sorte que la couleur du texte devienne noire.

Le texte blanc sur fond blanc peut être dû au fait que la couleur du texte de la division CONTENT est blanche :  Il s'agit d'un élément GC22. Faites en sorte que la couleur du texte de la division Contenu soit noire. Pour résoudre ce problème, veuillez suivre la procédure suivante :

- Lancez votre boutique dans ShopFactory

- Cliquez sur Design

- Opérez un clic droit sur n'importe quelle zone.

- Cliquez sur "Modifier le texte..." sous Contenu

- Changez la couleur en noir (#000000)

- Cliquez sur Ok

- Enregistrez et pré-visualisez la boutique.

- Publiez à nouveau la boutique pour que les modifications soient prises en compte en ligne.


B. Page panier - le lien vers les conditions générales est en blanc sur fond blanc.

L'élément GC1 a est en blanc sur blanc. GC1 correspond généralement au contenu du site /WebSiteContent.


(Remarque : les correspondances des classes GC peuvent varier selon les thèmes et les styles de boutique).

Exemple sur le thème SFX-HOM-AA


- Cliquez sur Personnaliser le design

- Opérez un clic droit sur n'importe quelle zone.

- Cliquez sur "Modifier le texte... sous « Contenu ».

- Changez la couleur en noir (#000000)

- Cliquez sur Ok

- Enregistrez et pré-visualisez la boutique.

- Publiez à nouveau la boutique pour que les modifications soient prises en compte en ligne.


C. Formulaires de validation des commandes, de facturation et d'expédition : Le menu déroulant des régions/pays est en blanc sur blanc.

Changez la couleur du texte GC41 de blanc (#ffffff) à noir (#000000)


GC41 est utilisé sur la balise Body. Définition du texte en noir.

- Cliquez sur Personnaliser le design

- Cliquez avec le bouton gauche de la souris sur la section de l'en-tête -> dans le menu contextuel, sélectionnez la balise BODY -> Modifier le texte...

- Changez la couleur du texte en noir

D. Barre de recherche  - les mots recherchés sont blancs sur blanc

C'est l’élément GC39 qui correspond  à WebSiteHeader / entête du site. Définissez la couleur du texte en noir.

Ou mieux encore, faites en sorte que la couleur du texte de WebSiteHeader / entête du site soit automatique.


- Cliquez sur Personnaliser le design

- Cliquez avec le bouton gauche de la souris sur l'en-tête -> dans le menu contextuel, sélectionnez En-tête du site  -> Modifier le texte...

- Changez la couleur du texte en noir

Dans Personnaliser le design, changez la couleur du texte GC39 (WebSiteHeader) en couleur automatique.

- Lancez votre boutique dans ShopFactory

- Menu Designer -> Personnaliser le design

- Cliquez avec le bouton gauche de la souris sur la section Entête du site et changez la couleur de l’entête du site  en auto.


Si ce qui précède ne fonctionne pas, ajoutez une image html personnalisée pour la boutique.

- Lancez votre boutique dans ShopFactory

- Cliquez sur le menu déroulant "Central" -> Contenu personnalisé.

- Cliquez sur le bouton + (Ajouter) pour ajouter une NOUVELLE image html personnalisée.

- Faites glisser le contenu du bloc de texte dans la section description

- En haut à droite de votre nouveau bloc de texte (HC1 ou HC2 - selon le nombre de fichiers html personnalisés que vous avez déjà), cliquez sur l'icône EDIT (crayon).

- Modifiez le code HTML personnalisé

Changez l’intitulé HTML : Texte de recherche

- Copiez/collez le code dans la fenêtre de contenu :

<style>

#mobile_search #phrase {color:#000000;}

</style>

- Cliquez sur OK

- Cliquez sur TERMINER

- Enregistrez et pré-visualisez votre boutique dans un navigateur externe.

- Publiez à nouveau la boutique.


E. Modifier la couleur d'arrière-plan de la zone de logo pourla faire correspndre (à Utils).

Ajoutez le code personnalisé de la boutique, en cochant la case Ce champ contient du javascript.


- Lancez votre boutique dans ShopFactory

- Cliquez sur le menu déroulant "Central" -> Contenu de la boutique personnalisée.

- Cliquez sur le bouton + (Ajouter) pour ajouter un NOUVEAU code html personnalisé.

- Faites glisser le contenu du bloc de texte dans la section description

- En haut à droite de votre nouveau bloc de texte (HC1 ou HC2 - selon le nombre de pages html personnalisées que vous avez déjà), cliquez sur l'icône EDIT (crayon).

- Modifiez le code HTML personnalisé

Changez le nom de l'intitulé HTML : Zone du logo

- Copiez/collez le code dans la fenêtre de contenu :

<style>

.header.mobile .utils {background-color:inherit;}

</style>

- Cliquez sur OK

- Cliquez sur TERMINER

- Enregistrez et pré-visualisez votre boutique dans un navigateur externe.

- Publiez à nouveau la boutique.


F. La page de résultats de recherche contient des textes en blanc sur fond blanc – ajout d’une image de fond.

- Lancez votre boutique dans ShopFactory

- Cliquez sur le menu déroulant "Central" -> Contenu personnalisé de la boutique

- Cliquez sur le bouton + pour ajouter un nouveau contenu

- Dans les éléments HC1 ou HC2 nouvellement ajouté, cliquez sur l'icône EDIT (crayon) pour ajouter le contenu.

- Double-cliquez sur le HC1 ou HC2, puis collez le code dans la zone de contenu.

- Modifier le nom de l'identification : textes de la page de résultats de recherche

- Copiez/collez le code dans la fenêtre de contenu :

<style>

#search-result-content {

    margin-top: -40px;

    background-image: url(../media/sf-darken.png);

}

#search-result-content #ProductList_L {

    background-color: transparent;

}

#search-result-content .SearchStringFound {

    color: #000000;

}

</style>

- Cliquez sur OK

- Cliquez sur OK

- Enregistrez et pré-visualisez votre boutique dans un navigateur externe.

- Publiez à nouveau votre boutique.