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-color-purple avec une couleur bleu à l’intérieur de la pseudo-classe root.

Tous les éléments de la page qui sont de couleur violette prendront la couleur que vous avez choisie.

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

Toutes les variables CSS

:root {
    --baseocom-color-red: #cd094f;
    --baseocom-color-hover-red: #e8115c;
    --baseocom-color-white: #fff;
    --baseocom-color-purple: #000091;
    --baseocom-color-purple-hover: #1212ff;
    --baseocom-color-purple-light: #e3e3fd;
    --baseocom-color-purple-lighter: #adadf9;
    --baseocom-color-black: #000;
    --baseocom-color-blue: #0063cb;
    --baseocom-color-grey: #3a3a3a;
    --baseocom-color-grey-light: #f9f6f9;
    --baseocom-color-grey-lighter: #e5e7eb;
    --baseocom-color-grey-lightest-border: #e5e5e5;
    --baseocom-color-grey-border: #d1d5db;
    --baseocom-color-transparent: transparent;
    --baseocom-color-transparent-border: transparent;
    --baseocom-color-input: #eee;
    --baseocom-bg-body: var(--baseocom-color-white);
    --baseocom-text-color-body: var(--baseocom-color-grey);
    --baseocom-text-color-title: var(--baseocom-color-black);
    --baseocom-bg-color-block: var(--baseocom-color-white);
    --baseocom-hover-bg-color-block: var(--baseocom-color-grey-light);
    --baseocom-bg-color-guided-research: var(--baseocom-color-purple-light);
    --baseocom-text-color-guided-research: var(--baseocom-color-grey);
    --baseocom-color-title-guided-research: var(--baseocom-color-purple);
    --baseocom-bg-color-guided-research-button: var(--baseocom-color-white);
    --baseocom-hover-bg-color-guided-research-button: var(--baseocom-color-white);
    --baseocom-text-color-guided-research-button: var(--baseocom-color-purple);
    --baseocom-hover-text-color-guided-research-button: var(--baseocom-color-purple);
    --baseocom-border-color-guided-research-button: var(--baseocom-color-purple);
    --baseocom-color-circle-guided-research-button: var(--baseocom-color-white);
    --baseocom-hover-color-circle-guided-research-button: var(--baseocom-color-purple-lighter);
    --baseocom-border-color-circle-guided-research-button: var(--baseocom-color-purple);
    --baseocom-icon-color-guided-research-button-help: var(--baseocom-color-purple);
    --baseocom-hover-icon-color-guided-research-button-help: var(--baseocom-color-purple-hover);
    --baseocom-hover-bg-color-guided-research-button-help: var(--baseocom-color-grey-light);
    --baseocom-bg-color-guided-research-button-submit: var(--baseocom-color-purple);
    --baseocom-hover-bg-color-guided-research-button-submit: var(--baseocom-color-purple-hover);
    --baseocom-text-color-guided-research-button-submit: var(--baseocom-color-white);
    --baseocom-hover-text-color-guided-research-button-submit: var(--baseocom-color-white);
    --baseocom-text-color-guided-research-selected: var(--baseocom-color-purple);
    --baseocom-text-color-guided-research-button-edit: var(--baseocom-color-purple);
    --baseocom-hover-text-color-guided-research-button-edit: var(--baseocom-color-purple);
    --baseocom-bg-color-guided-research-button-edit: var(--baseocom-color-transparent);
    --baseocom-hover-bg-color-guided-research-button-edit: var(--baseocom-color-white);
    --baseocom-link-color: #000091;
    --baseocom-link-hover-color: #1212ff;
    --baseocom-text-color-breadcrumb: #666666;
    --baseocom-text-page-color-breadrcrumb: var(--baseocom-color-black);
    --baseocom-color-separator-breadcrumb: #666666;
    --baseocom-block-border-color-info: var(--baseocom-color-blue);
    --baseocom-block-border-left-color-reminder: #6a6af4;
    --baseocom-bg-color-who-can-help: var(--baseocom-color-grey-light);
    --baseocom-text-color-who-can-help: var(--baseocom-color-grey);
    --baseocom-color-title-who-can-help: var(--baseocom-color-red);
    --baseocom-color-btn-find-contact: var(--baseocom-color-red);
    --baseocom-hover-color-btn-find-contact: var(--baseocom-color-hover-red);
    --baseocom-color-text-btn-find-contact: var(--baseocom-color-white);
    --baseocom-hover-text-btn-find-contact: var(--baseocom-color-white);
    --baseocom-color-input-location-search: var(--baseocom-color-input);
    --baseocom-color-border-input-location-search: var(--baseocom-color-red);
    --baseocom-color-icon-location-search: var(--baseocom-color-red);
    --baseocom-color-bg-suggestions: var(--baseocom-color-white);
    --baseocom-color-border-suggestions: var(--baseocom-color-purple);
    --baseocom-color-text-suggestions: var(--baseocom-color-purple);
    --baseocom-hover-color-text-suggestions: var(--baseocom-color-white);
    --baseocom-hover-color-bg-suggestions: var(--baseocom-color-purple);
    --baseocom-color-bg-dropdown-who-can-help: var(--baseocom-color-white);
    --baseocom-hover-color-btn-bg-dropdown-who-can-help: var(--baseocom-color-grey-lighter);
    --baseocom-color-btn-text-dropdown-who-can-help: var(--baseocom-color-red);
    --baseocom-hover-color-btn-text-dropdown-who-can-help: var(--baseocom-color-red);
    --baseocom-color-border-dropdown-who-can-help: var(--baseocom-color-grey-lightest-border);
    --baseocom-color-text-dropdown-who-can-help: var(--baseocom-color-grey);
    --baseocom-color-icon-dropdown-who-can-help: var(--baseocom-color-red);
}

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-bg-body
Couleur du texte :
–baseocom-text-color-body
Couleur du titre principal :
–baseocom-text-color-title
Couleur des blocs :
–baseocom-bg-color-block
Couleur des blocs au survol :
–baseocom-hover-bg-color-block

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-text-color-breadcrumb
Couleur du texte de la page :
–baseocom-text-page-color-breadrcrumb
Couleur des séparateurs :
–baseocom-color-separator-breadcrumb

Les liens

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

Informations

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

À 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-border-left-color-reminder

Ou s’adresser / Qui peut m’aider.

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

Bouton (Trouver un interlocuteur) :

Couleur de fond :
–baseocom-color-btn-find-contact
Couleur de fond au survol :
–baseocom-hover-color-btn-find-contact
Couleur du texte :
–baseocom-color-text-btn-find-contact
Couleur du texte au survol :
–baseocom-hover-text-btn-find-contact

Champ de recherche

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

Liste des suggestions :

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

Liste déroulante et lien

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

Contenu de la liste déroulante :

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

Recherche guidée

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

Bouton de sélection

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

Bouton d’aide

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

Sélection terminée

Texte :

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

Bouton (Modifié) :

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

Bouton (Afficher les informations) :

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