Définir un thème graphique personnalisé

Article : PAR017

 

Il vous est possible de personnaliser les thèmes affichés dans la liste des thèmes disponibles.

Cette fonctionnalité est soumise à un droit.

Le thème qui sera personnalisé sera exporté sous le nom "Personnalisé". Il n'existe qu'un seul thème "Personnalisé" à la fois.

 

Dans cet article, le thème graphique 'NATURE' est utilisé comme exemple.

Accéder à : Masquer
  1. Cliquez sur la rubrique Paramètres.

  2. Dans la sous-rubrique Apparence graphique Espace Citoyens, cliquez sur Thème graphique 'personnalisé'.

  3. Lors du premier accès à cet écran le thème graphique copié par défaut est le thème 'ARPEGE'.

  4. Sélectionnez le thème 'NATURE' dans la liste déroulante, puis cliquez sur Copier le thème. Le message d'avertissement suivant s'affiche : "Etes-vous sûr de vouloir copier un nouveau thème graphique de travail ? Le travail actuel sera définitivement perdu." Effectivement puisqu'il n'est possible de travailler que sur un seul thème personnalisé à la fois.

  5. Cliquez sur Oui. Le thème graphique copié affiché est alors 'NATURE', c'est le thème graphique de travail. Ce thème est visible dans la partie inférieure de la page.

  6. Trois types d'éléments graphiques peuvent être personnalisés, ils sont disponibles dans les onglets correspondants : les couleurs, les polices de caractères, les arrondis.

Personnaliser les couleurs

Pour vous aider à personnaliser les couleurs d'un thème, vous trouverez ci-après un tableau récapitulant les correspondances entre les couleurs et les éléments disponibles dans l'Espace Citoyens Premium.

 

  1. Cliquez sur la flèche située à droite de la couleur à modifier pour ouvrir la fenêtre de modification des couleurs.

  1. Si vous connaissez le code hexadécimal de la couleur, saisissez-le dans la zone prévue à cet effet.
  2. Sinon sélectionnez un pavé de couleur dans la partie gauche ou déplacez-vous dans la palette jusqu'à obtenir la couleur souhaitée, celle-ci est visible dans le carré de la couleur sélectionnée. Son code hexadécimal s'affiche.
  3. Cliquez sur Valider. Un rappel de la couleur d'origine du thème est visible à droite de la sélection ainsi que son code hexadécimal. Cela permet de choisir à nouveau la couleur par défaut du thème si besoin.
  4. Refaites cette opération pour chacune des couleurs à modifier.

Correspondances entre les couleurs et l'affichage dans l'Espace Citoyens Premium



         La liste des exemples affichés ci-dessous, issus du thème 'Nature', n'est pas exhaustive.

Couleurs principales

Couleur principale

De préférence une couleur foncée pour faire ressortir les titres, et les éléments importants (liens, blocs de séparation).

Ensemble de l'Espace Citoyens Premium

Titres

Liens

Bouton d'aide

Boutons d’actions : Commencer, Aller à l'étape ...

 

 

Page d’accueil publique

Titres des zones Mon espace perso et Je n'ai pas d'espace

Page d’accueil privé

Titres des zones Mon compte, Co-représentants, Membres foyer

Page personne

Jours du calendrier/agenda

Couleur secondaire

 

Couleur moyenne pour permettre la lecture de textes blancs par-dessus. De préférence en accord avec la couleur Principale.

Ensemble de l'Espace Citoyens Premium

Etiquettes indiquant la date sur les actualités

Page d’accueil publique

Liens vers "Toutes les démarches" et "Voir toutes les actualités"

Page d’accueil privé

Accès aux éléments après 1 clic sur une dalle :

- Dernières démarches effectuées

- Echanges à lire

- Rendez-vous proches

- Edition de documents

- Coordonnées

- Modifier les réservations

- Créer une inscription

- Qui a perdu sa carte

Page d’accueil privé et fiche personne

Nom du détenteur de l’espace personnel

Pages formulaire

Etapes réalisées dans la barre d’étapes formulaire,

Information sur la durée de la démarche

Récapitulatif d’une demande (fond de la barre d’onglet sur le côté)

Couleur tertiaire

Couleur de contrastes avec les deux premières, elle permet de mettre en avant certains éléments de l’ECP.

Page d’accueil privée

Cadre de la personne titulaire du compte

 

Nom du métier dans "Mes démarches"

Pages formulaire

Etape en cours dans la barre d’étapes d'un formulaire

Texte

Couleur général du texte hors couleur spécifique de titres, de liens, de couleur définie par l’utilisateur (dans les articles par exemple), de label et champ formulaire.

Page d’accueil privée

Contenu du cadre de la personne titulaire du compte

 

Champs des formulaires

Fond blocs

Couleur de préférence très claire qui vient en fond de zones d’information et d’action.

Page d’accueil publique

Mon espace perso

Je n'ai pas d'espace

Page d’accueil privée

Accès au compte famille

Contour des personnes de la famille rattachées à l’espace personnel

Ensemble du site

Menu de navigation : Actualités, Infos pratiques, Activités, Votre avis nous intéresse

Couleurs spécifiques

Alerte

Couleur utilisée pour le texte des messages d’alerte en cas d’erreur de saisie. De préférence de couleur foncée qui indique le caractère obligatoire / d’information du message.

Ensemble du site

Erreur login / mot de passe

 

Erreur dans les formulaires

 

Libellé "Information" d’un message d’information

Facture

Couleur utilisée pour afficher les informations relatives aux factures.

Page d’accueil privée et page Mon compte

Différentes informations relatives aux factures

 

Couleurs d'action

Survol

Couleur de préférence claire elle permet d’identifier l’élément avant que l’utilisateur ne clique dessus.

Ensemble du site

Menu de gauche principalement : ici "Inscriptions" et "GEF_CPTF"

Sélection

Couleur de préférence plus foncée que celle du survol dans la même tonalité. Elle permet d’identifier l’élément sélectionné par l'utilisateur.

Ensemble du site

Menu de gauche principalement : ici "Fonctionnement de l'Espace Citoyens"

 

Couleurs du menu

Couleurs du menu de navigation

Plusieurs couleurs utilisées.

Page d'accueil publique

Dalle Nouvelle démarche

Dalle Date

Dalle Infos pratiques

Dalle Votre avis nous intéresse

Dalle Activités

Dalle Site de la mairie

+ Menu horizontal

Couleurs supplémentaires du menu de navigation

Plusieurs couleurs utilisées.

Page d'accueil privée

Menu Mon accueil

Menu Actualités

Bouton Déconnexion

 

Couleurs des dalles de l'accueil privé et de la fiche personne

Plusieurs couleurs utilisées pour différentier les sections dans la page d’accueil privée.

Elles sont reprises dans la fiche personne.

Page d'accueil privée

 

 

Fiche personne

Zone Mon tableau de bord

et

Images des dalles du tableau de bord

 

 

 

Zone Ma famille

 

 

 

 

 

Zone Démarches

 

 

 

 

 

Zone Mes informations

 

 

 

Zone Autres espaces

Personnaliser les polices de caractères

 

  1. Cliquez sur la flèche située à droite de la police à modifier (Titres ou Texte).
  2. Sélectionnez une police. Un rappel du nom de la police d'origine du thème est visible à droite de la sélection. Cela permet de choisir à nouveau la police par défaut du thème si besoin.
  3. Cliquez sur Ajouter une police pour importer une nouvelle police. Cliquez sur Supprimer polices si cette dernière ne vous convient pas.

 

Personnaliser les arrondis

Pour vous aider à personnaliser les arrondis d'un thème, vous trouverez ci-après un tableau récapitulant les types d'arrondis disponibles et le rendu des valeurs proposées.

 

  1. Cliquez sur la flèche située à droite d'un arrondi à modifier.
  2. Sélectionnez une valeur d'arrondi. Un rappel de la valeur d'arrondi d'origine du thème est visible à droite de la sélection. Cela permet de choisir à nouveau la valeur d'arrondi par défaut du thème si besoin.

 

Arrondi

Emplacement

  

Valeur d'arrondi

Rendu

Dalles menu Accueil
 

50% arrondi en cercle

Autres dalles

15px

Boutons

6px

Etapes démarche

3px

Encadrés personne

0px sans arrondi

Personnaliser le fond

1. Cliquez sur Importer une image pour personnaliser votre fond de page de l'Espace Citoyens. Vous pouvez ensuite gérer le style CSS de votre fond de page en réglant :

2. Cliquez sur supprimer l'image de fond si celle-ci ne vous convient pas.

3. Cliquez sur la flèche pour choisir une nouvelle couleur de fond pour votre Espace Citoyens.

Prévisualiser les modifications

A tout moment il est possible d'afficher le résultat des modifications effectuées sur le thème graphique de travail.

 

  1. Cliquez sur le bouton Prévisualiser. Le thème graphique de travail est alors mis à jour.
  2. Pour visualiser le thème de travail dans une fenêtre indépendante, cliquez sur Détacher la prévisualisation.

 

Pour information, la date, l'heure et l'utilisateur de la dernière prévisualisation sont indiqués dans le bandeau "Thème graphique copié".

Effacer toutes les modifications

Il est possible en une seule action d'annuler toutes les modifications effectuées sur le thème graphique de travail.

 

  1. Cliquez sur le bouton Effacer les modifications. Le message suivant s'affiche : "Etes-vous sûr de vouloir recharger le thème ? Votre travail actuel sera définitivement perdu."
  2. En cliquant sur Oui, le thème de travail sera de nouveau dans l'état dans lequel il était lorsque vous l'avez copié.

Exporter le thème graphique de travail

L'export du thème graphique de travail entraîne la sauvegarde de ce thème sous le nom 'Personnalisé' dans la liste des thèmes graphiques disponibles.

Si un thème graphique 'Personnalisé' existe déjà il est écrasé par le thème exporté car il n'existe qu'un seul thème graphique 'Personnalisé'.

 

  1. Cliquez sur le bouton Exporter le thème. Le message suivant s'affiche : "Etes-vous sûr de vouloir exporter et mettre à disposition le thème de travail en tant que thème graphique 'Personnalisé' ?
  2. En cliquant sur Oui, le thème de travail est enregistré dans les thèmes graphiques disponibles sous le nom 'Personnalisé'.

 

Pour information, la date, l'heure et l'utilisateur du dernier export du thème sont indiqués dans le bandeau "Thème graphique copié".