Personnalisation des couleurs

Liste des variables css

Les couleurs ci-dessous sont les couleurs global du plugin, vous pourrez personnaliser ces couleurs en modifiant les valeurs de ces variables CSS.

Comment personnaliser la couleur du plugin

Pour personnaliser les couleurs du plugin suivez ces étapes :

1- Sur l’espace administration de votre site WordPress dans la barre de menu à gauche, sélectionner apparence puis thèmes.

2- Une fois sur cette page cliquer le bouton « personnaliser » de votre thème.

3 – Dans le menu à gauche, ouvrer l’onglet CSS additionnel et ajouter la pseudo-classe root comme l’image ci-dessous.

4 – Maintenant, vous pouvez commencer à modifier les couleurs, suivez l’exemple.

Dans cet exemple, j’ai modifié la couleur de la variable –baseocom-purple-light avec une couleur bleu à l’intérieur de la pseudo-classe root.

Tous les éléments de la page qui auront la couleur associée à cette variable prendront la couleur que vous avez choisie.

5 – Sauvegarder en cliquant sur le bouton « Publier ».

Toutes les variables CSS

:root {

    --baseocom-red: #cd094f;
    --baseocom-red-light: #e8115c;
    --baseocom-white: #fff;
    --baseocom-purple: #1212ff;
    --baseocom-purple-dark: #000091;
    --baseocom-purple-medium: #6a6af4;
    --baseocom-purple-lighter: #adadf9;
    --baseocom-purple-light: #e3e3fd;
    --baseocom-black: #000;
    --baseocom-blue: #0063cb;
    --baseocom-grey-dark: #3a3a3a;
    --baseocom-grey-dark-medium: #666666;
    --baseocom-grey-lighter: #e5e7eb;
    --baseocom-grey-light: #f9f6f9;
    --baseocom-transparent: transparent;
  
    --baseocom-body-background: var(--baseocom-white);
    --baseocom-body-text-color: var(--baseocom-grey-dark);
    --baseocom-title-text-color: var(--baseocom-black);
    --baseocom-block-background-color: var(--baseocom-white);
    --baseocom-block-background-color-hover: var(--baseocom-grey-light);
    --baseocom-guided-research-background-color: var(--baseocom-purple-light);
    --baseocom-guided-research-text-color: var(--baseocom-grey-dark);
    --baseocom-guided-research-color-title: var(--baseocom-purple-dark);
    --baseocom-guided-research-button-background-color: var(--baseocom-white);
    --baseocom-guided-research-button-background-color-hover: var(--baseocom-white);
    --baseocom-guided-research-button-text-color: var(--baseocom-purple-dark);
    --baseocom-guided-research-button-text-color-hover: var(--baseocom-purple-dark);
    --baseocom-guided-research-button-border-color: var(--baseocom-purple-dark);
    --baseocom-guided-research-circle-button-color: var(--baseocom-white);
    --baseocom-guided-research-circle-button-color-hover: var(--baseocom-purple-lighter);
    --baseocom-guided-research-circle-button-border-color: var(--baseocom-purple-dark);
    --baseocom-guided-research-button-help-icon-color: var(--baseocom-purple-dark);
    --baseocom-guided-research-button-help-icon-color-hover: var(--baseocom-purple);
    --baseocom-guided-research-button-help-background-color-hover: var(--baseocom-grey-light);
    --baseocom-guided-research-button-submit-background-color: var(--baseocom-purple-dark);
    --baseocom-guided-research-button-submit-background-color-hover: var(--baseocom-purple);
    --baseocom-guided-research-button-submit-text-color: var(--baseocom-white);
    --baseocom-guided-research-button-submit-text-color-hover: var(--baseocom-white);
    --baseocom-guided-research-selected-text-color: var(--baseocom-purple-dark);
    --baseocom-guided-research-button-edit-text-color: var(--baseocom-purple-dark);
    --baseocom-guided-research-button-edit-text-color-hover: var(--baseocom-purple-dark);
    --baseocom-guided-research-button-edit-background-color: var(--baseocom-transparent);
    --baseocom-guided-research-button-edit-background-color-hover: var(--baseocom-white);
    --baseocom-link-color: var(--baseocom-purple-dark);
    --baseocom-link-color-hover: var(--baseocom-purple);
    --baseocom-breadcrumb-text-color: var(--baseocom-grey-dark-medium);
    --baseocom-breadrcrumb-text-color-active: var(--baseocom-black);
    --baseocom-breadcrumb-separator-color: var(--baseocom-grey-dark-medium);
    --baseocom-block-info-border-color: var(--baseocom-blue);
    --baseocom-block-reminder-border-color-left: var(--baseocom-purple-medium);
    --baseocom-who-can-help-background-color: var(--baseocom-grey-light);
    --baseocom-who-can-help-text-color: var(--baseocom-grey-dark);
    --baseocom-who-can-help-title-color: var(--baseocom-red);
    --baseocom-who-can-help-button-color: var(--baseocom-red);
    --baseocom-who-can-help-button-color-hover: var(--baseocom-red-light);
    --baseocom-who-can-help-button-text-color: var(--baseocom-white);
    --baseocom-who-can-help-button-text-color-hover: var(--baseocom-white);
    --baseocom-location-search-input-background-color: var(--baseocom-grey-light);
    --baseocom-location-search-input-border-color: var(--baseocom-red);
    --baseocom-location-search-icon-color: var(--baseocom-red);
    --baseocom-location-search-suggestions-background-color: var(--baseocom-white);
    --baseocom-location-search-suggestions-border-color: var(--baseocom-purple-dark);
    --baseocom-location-search-suggestions-text-color: var(--baseocom-purple-dark);
    --baseocom-location-search-suggestions-text-color-hover: var(--baseocom-white);
    --baseocom-location-search-suggestions-background-color-hover: var(--baseocom-purple-dark);
    --baseocom-who-can-help-dropdown-background-color: var(--baseocom-white);
    --baseocom-who-can-help-dropdown-background-color-hover: var(--baseocom-grey-lighter);
    --baseocom-who-can-help-dropdown-text-color: var(--baseocom-red);
    --baseocom-who-can-help-dropdown-text-color-hover: var(--baseocom-red);
    --baseocom-who-can-help-dropdown-border-color: var(--baseocom-grey-lighter);
    --baseocom-who-can-help-dropdown-content-text-color: var(--baseocom-grey-dark);
    --baseocom-who-can-help-dropdown-icon-color: var(--baseocom-red);
    --baseocom-summary-card-border-color: var(--baseocom-grey-lighter);
    --baseocom-summary-card-shadow-color-bottom: var(--baseocom-purple-dark);
}

Personnalisation des blocs

Comment customiser certain bloc et comment changer la couleur de fond du plugin afin de l’adapter à votre site web.

Adapter la couleur de fond et la couleur du texte à votre site web.

Couleur de fond :
–baseocom-body-background
Couleur du texte :
–baseocom-body-text-color
Couleur du titre principal :
–baseocom-title-text-color
Couleur des blocs :
–baseocom-block-background-color
Couleur des blocs au survol :
–baseocom-block-background-color-hover

Certains blocs sont cliquables pour cela ajouter une couleur de fond lorsque l’utilisateur passe la souris dessus.

Fil d’ariane

Couleur du texte :
–baseocom-breadcrumb-text-color
Couleur du texte de la page active :
–baseocom-breadrcrumb-text-color-active
Couleur des séparateurs :
–baseocom-breadcrumb-separator-color

Les liens

Couleur du texte :
–baseocom-link-color
Couleur du texte au survol :
–baseocom-link-color-hover

Informations

Couleur de la bordure :
–baseocom-block-info-border-color

À savoir / Attention / À noter / Rappel.

Dans cet exemple, nous retrouvons le bloc « À noter », les autres blocs sont identiques à celui-ci.

Couleur de la bordure gauche:
–baseocom-block-reminder-border-color-left

Ou s’adresser / Qui peut m’aider.

Couleur de fond :
–baseocom-who-can-help-background-color
Couleur du texte :
–baseocom-who-can-help-text-color
Couleur du titre :
–baseocom-who-can-help-title-color

Bouton (Trouver un interlocuteur) :

Couleur de fond :
–baseocom-who-can-help-button-color
Couleur de fond au survol :
–baseocom-who-can-help-button-color-hover
Couleur du texte :
–baseocom-who-can-help-button-text-color
Couleur du texte au survol :
–baseocom-who-can-help-button-text-color-hover

Champ de recherche

Couleur de fond du champ :
–baseocom-location-search-input-background-color
Couleur de la bordure du bas :
–baseocom-location-search-input-border-color
Couleur des icônes (loupe, croix) :
–baseocom-location-search-icon-color

Liste des suggestions :

Couleur de fond :
–baseocom-location-search-suggestions-background-color
Couleur de la bordure :
–baseocom-location-search-suggestions-border-color
Couleur du texte :
–baseocom-location-search-suggestions-text-color
Couleur du texte au survol :
–baseocom-location-search-suggestions-text-color-hover
Couleur de fond du texte au survol :
–baseocom-location-search-suggestions-background-color-hover

Liste déroulante et lien

Couleur de fond :
–baseocom-who-can-help-dropdown-background-color
Couleur de fond au survol du bouton :
–baseocom-who-can-help-dropdown-background-color-hover
Couleur du texte du bouton :
–baseocom-who-can-help-dropdown-text-color
Couleur du texte au survol :
–baseocom-who-can-help-dropdown-text-color-hover
Couleur de la bordure :
–baseocom-who-can-help-dropdown-border-color

Contenu de la liste déroulante :

Couleur du texte :
–baseocom-who-can-help-dropdown-content-text-color
Couleur des icônes :
–baseocom-who-can-help-dropdown-icon-color

Recherche guidée

Couleur de fond :
–baseocom-guided-research-background-color
Couleur du texte :
–baseocom-guided-research-text-color
Couleur du titre :
–baseocom-guided-research-color-title

Bouton de sélection

Couleur de fond :
–baseocom-guided-research-button-background-color
Couleur de fond au survol :
–baseocom-guided-research-button-background-color-hover
Couleur du texte :
–baseocom-guided-research-button-text-color
Couleur du texte au survol :
–baseocom-guided-research-button-text-color-hover
Couleur de la bordure :
–baseocom-guided-research-button-border-color
Couleur du cercle à gauche :
–baseocom-guided-research-circle-button-color
Couleur du cercle à gauche au survol :
–baseocom-guided-research-circle-button-color-hover
Couleur de la bordure du cercle à gauche:
–baseocom-guided-research-circle-button-border-color

Bouton d’aide

Couleur de l’icône :
–baseocom-guided-research-button-help-icon-color
Couleur de l’icône au survol :
–baseocom-guided-research-button-help-icon-color-hover
Couleur de fond au survol :
–baseocom-guided-research-button-help-background-color-hover

Sélection terminée

Texte :

Couleur du texte :
–baseocom-guided-research-selected-text-color

Bouton (Modifié) :

Couleur du texte :
–baseocom-guided-research-button-edit-text-color
Couleur du texte au survol :
–baseocom-guided-research-button-edit-text-color-hover
Couleur de fond :
–baseocom-guided-research-button-edit-background-color
Couleur de fond au survol :
–baseocom-guided-research-button-edit-background-color-hover

Bouton (Afficher les informations) :

Couleur du texte :
–baseocom-guided-research-button-submit-text-color
Couleur du texte au survol :
–baseocom-guided-research-button-submit-text-color-hover
Couleur de fond :
–baseocom-guided-research-button-submit-background-color
Couleur de fond au survol :
–baseocom-guided-research-button-submit-background-color-hover

Bloc sommaire et comment faire

Couleur de la bordure :
–baseocom-summary-card-border-color
Couleur de l’ombre en bas :
–baseocom-summary-card-shadow-color-bottom