Comment personnaliser les couleurs de l'extranet de vos utilisateurs

À qui s'adresse cette page

• Pour qui : Admin OF

• Durée : 3 minutes

• Prérequis : un compte Admin OF actif sur SmartOF, les codes couleurs de la charte graphique de votre organisme

Quand utiliser cette procédure

Scénario : vos apprenants et contacts clients vont recevoir l'accès à leur espace en ligne. Si les couleurs de l'extranet ne correspondent pas à votre identité visuelle, la première connexion crée un doute sur la fiabilité de la plateforme. Pour vos clients B2B, c'est aussi un signal de professionnalisme. La personnalisation se fait en 3 minutes et s'applique aux trois extranets en même temps.

Avant de commencer

• Configurer mon compte

• Disposer des codes couleurs de votre charte graphique au format hexadécimal (ex : #1A73E8), le sélecteur de couleur intégré accepte aussi le RGB et la sélection visuelle dans une palette

Étapes

1. Ouvrir l'écran de personnalisation des extranets

Depuis le menu latéral, dans la section "Divers", cliquez sur "Paramètres". Dans la page qui s'ouvre, ouvrez l'onglet "Avancé" puis la section "Personnalisation des Extranets".

2. Choisir la couleur primaire

Dans le champ "Couleur primaire", saisissez le code hexadécimal de votre couleur principale (par exemple #1A73E8), ou cliquez sur le sélecteur de couleur à côté du champ pour la choisir dans une palette visuelle (le sélecteur permet aussi de saisir directement en RGB).

💡 Astuce : la couleur primaire est appliquée aux boutons principaux de l'extranet (boutons d'action, validations) et aux boutons "outline" (boutons à contour). Choisissez la couleur la plus visible de votre charte graphique.

3. Choisir la couleur secondaire

Dans le champ "Couleur secondaire", saisissez le code hexadécimal de votre couleur secondaire, ou utilisez le sélecteur de couleur (qui accepte également le RGB et la sélection visuelle).

💡 Astuce : la couleur secondaire est appliquée aux liens secondaires de l'extranet (texte cliquable de second niveau).

4. Choisir entre fond uni et fond dégradé (optionnel)

Sous les champs de couleur, la case "Désactiver le fond dégradé sur les extranets" contrôle l'arrière-plan des extranets. Quand elle est cochée, le fond reste uni. Décochez-la pour appliquer un fond dégradé construit à partir de votre couleur primaire vers le blanc.

5. Vérifier l'aperçu

Sous les champs de saisie, un aperçu en direct affiche un échantillon de boutons primaires, de boutons "outline" et de liens secondaires avec vos couleurs. Vérifiez que le contraste reste lisible et que les couleurs correspondent bien à votre charte.

⚠️ Attention : un contraste faible entre la couleur de texte et le fond peut rendre certains éléments illisibles côté apprenant. Si possible, testez l'accessibilité de vos couleurs avec un outil de vérification de contraste (WCAG AA).

6. Enregistrer la personnalisation

Cliquez sur le bouton "Enregistrer" en bas de la section pour appliquer la nouvelle palette.

💡 Astuce : pour annuler vos changements et revenir aux couleurs par défaut de SmartOF, utilisez le bouton "Réinitialiser aux couleurs par défaut" situé à côté du bouton d'enregistrement.

Résultat attendu

Vous avez maintenant : une palette de couleurs personnalisée appliquée aux trois extranets de SmartOF, apprenants, contacts clients et formateurs. À leur prochaine connexion, vos utilisateurs voient les boutons d'action, les liens et (si activé) le fond dégradé aux couleurs de votre organisme de formation.

Pièges fréquents

• Code couleur refusé par le champ texte : le champ texte n'accepte que l'hexadécimal à 6 caractères précédé de # (ex : #1A73E8). Les noms CSS (red, blue) et les formats rgb() ou hsl() saisis directement dans le champ sont refusés. Pour saisir une couleur en RGB, utilisez le sélecteur de couleur à côté du champ.

• Les boutons deviennent illisibles après changement de couleur : la couleur choisie n'a pas un contraste suffisant avec la couleur du texte des boutons (texte blanc par défaut). Choisissez une couleur primaire foncée pour les boutons principaux ou testez vos couleurs avec un outil de vérification WCAG AA.

Questions fréquentes

Puis-je définir des couleurs différentes pour l'extranet apprenant, l'extranet client et l'extranet formateur ?

Non, la palette définie dans "Personnalisation des Extranets" s'applique aux trois extranets simultanément : apprenants, clients (entreprises et contacts clients) et formateurs. Il n'est pas possible aujourd'hui de définir une charte graphique différente par persona.

Où apparaissent exactement les couleurs que je modifie ?

La couleur primaire est appliquée aux boutons d'action principaux et aux boutons à contour ("outline"). La couleur secondaire est appliquée aux liens secondaires de l'extranet. Si le fond dégradé est activé, la couleur primaire est également utilisée pour générer un dégradé de votre couleur primaire vers le blanc en arrière-plan des extranets. Ces couleurs ne s'appliquent pas aux emails envoyés depuis SmartOF ni aux documents générés (conventions, attestations, factures).

Comment revenir aux couleurs par défaut de SmartOF ?

Sur l'écran "Personnalisation des Extranets", cliquez sur le bouton "Réinitialiser aux couleurs par défaut". Vos personnalisations sont remplacées par la palette par défaut de SmartOF.

Quels formats de code couleur sont acceptés ?

Le champ texte n'accepte que l'hexadécimal à 6 caractères précédé de # (ex : #1A73E8). Les noms CSS (red, blue) et les formats rgb() ou hsl() saisis directement dans le champ sont refusés. Pour saisir une couleur en RGB ou la choisir visuellement, cliquez sur le sélecteur de couleur à côté du champ, il permet la saisie en hexadécimal, en RGB et la sélection dans une palette.

Voir aussi

• Adapter SmartOF à ma charte graphique, pour personnaliser les logos en complément des couleurs

• Adapter les emails envoyés par SmartOF, pour aligner aussi la communication par email sur votre identité visuelle

• Configurer mon compte, étape préalable à toute personnalisation