> For the complete documentation index, see [llms.txt](https://documentation.efalia.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://documentation.efalia.com/documentations/efalia-process/administration/administration-fonctionnelle/gestion-themes.md). # Gestion des Thèmes La **gestion des thèmes** (ou skins) d'Efalia Process permet de personnaliser l'apparence de l'application : logo, couleurs, favicon, styles CSS et comportements JavaScript. Cette fonctionnalité est disponible à partir de la version **6.14.0**. *** ## Que peut-on personnaliser ? Un thème permet de modifier l'apparence de trois espaces distincts : | Espace | Description | | -------------------------------- | -------------------------------------------------------- | | **Panorama / App** (`app/`) | Interface principale de travail des utilisateurs | | **Designer** (`designer/`) | Interface de modélisation (administrateurs fonctionnels) | | **Page de connexion** (`login/`) | Écran de login | **Fichiers réservés** (à la racine du thème) : | Fichier | Description | | -------------------------------------- | ------------------------------------------------------------ | | `header-logo.png` (ou `.jpg`, `.jpeg`) | Logo affiché en haut à gauche dans l'entête des applications | | `favicon.png` | Icône dans le titre du navigateur et les favoris | | `login-cover.jpg` | Image de fond à gauche du formulaire de connexion | | `workey.style.min.css` | Fichier CSS global du thème | *** ## Emplacement des Thèmes Les thèmes se trouvent dans le répertoire `skins/` des données du serveur Efalia Process : ``` $WORKEY_DATA/skins/ ``` *`$WORKEY_DATA` correspond généralement au répertoire `Workey_Data`.* *** ## Créer un Thème {% stepper %} {% step %} #### Créer le répertoire du thème Dans le répertoire `$WORKEY_DATA/skins/`, créez un dossier pour votre thème. **Règle de nommage :** Alphanumérique uniquement, sans espaces ni caractères spéciaux. Exemples : `blue-theme`, `corporate-theme`, `dark-mode` ``` $WORKEY_DATA/skins/ └── mon-theme/ ``` {% endstep %} {% step %} #### Créer la structure de répertoires Créez les sous-répertoires correspondant aux espaces à personnaliser : ``` $WORKEY_DATA/skins/ └── mon-theme/ ├── app/ ← Styles pour le Panorama / applications ├── designer/ ← Styles pour le Designer HTML └── login/ ← Styles pour la page de connexion ``` Vous n'êtes pas obligé de créer tous les répertoires — créez uniquement ceux que vous souhaitez personnaliser. {% endstep %} {% step %} #### Ajouter vos fichiers CSS et JavaScript Déposez vos fichiers **CSS** et **JS** dans les répertoires correspondants. {% hint style="info" %} 💡 Les fichiers sont **incorporés dans l'ordre alphabétique** de leur nom. Nommez vos fichiers en conséquence si l'ordre d'application est important (ex : `01-reset.css`, `02-variables.css`, `03-components.css`). {% endhint %} **Structure complète d'un thème :** ``` $WORKEY_DATA/skins/ └── mon-theme/ ├── header-logo.png ← Logo entête ├── favicon.png ← Icône navigateur ├── login-cover.jpg ← Image page de connexion ├── workey.style.min.css ← CSS global du thème │ ├── app/ │ ├── skin.css │ └── skin.js │ ├── designer/ │ └── skin.css │ └── login/ ├── skin.css └── skin.js ``` {% endstep %} {% step %} #### Activer le thème dans l'administration Pour qu'Efalia Process prenne en compte votre thème : 1. Connectez-vous en tant qu'administrateur (Workflow Manager) 2. Accédez à **Administration > Paramètres** 3. **Activez** la fonctionnalité des thèmes personnalisés 4. **Sélectionnez** votre thème dans la liste déroulante 📸 **CAPTURE : admin-fonct-themes-01-activation-theme.png** > Interface d'administration avec la section de gestion des thèmes, case "Activer les thèmes personnalisés" et sélection du thème actif **Résultat :** Le thème est appliqué immédiatement sans redémarrage du serveur. {% endstep %} {% endstepper %} *** ## Paramètres Back Office La gestion des thèmes est également configurable via les paramètres back office : | Paramètre | Valeur | Description | | ------------------------------------- | -------------------- | -------------------------------- | | `com.clog.workey.skin.custom.enabled` | `true` / `false` | Activer les thèmes personnalisés | | `com.clog.workey.skin.folder.name` | Nom du dossier thème | Thème actif (ex : `mon-theme`) | Ces paramètres peuvent être modifiés à chaud depuis **Administration > Paramètres** (administration simplifiée). *** ## Exemple de Thèmes Multiples Vous pouvez avoir plusieurs thèmes disponibles et basculer entre eux depuis l'administration : ``` $WORKEY_DATA/skins/ ├── blue-theme/ │ ├── favicon.png │ ├── workey.style.min.css │ └── login-cover.jpg │ └── corporate-theme/ ├── header-logo.svg ├── app/ │ ├── skin.css │ └── skin.js ├── designer/ │ └── skin.css └── login/ ├── skin.css └── skin.js ``` *** ## Mise à Jour depuis une Version Antérieure à 6.14.0 Si vous installez Efalia Process 6.14.0 ou supérieur sur une version antérieure, le système effectue automatiquement une **migration des fichiers de personnalisation existants** : {% stepper %} {% step %} #### Création de la structure de thèmes Le répertoire `skins/` est créé avec un thème `default` contenant les répertoires `app/`, `designer/` et `login/`. {% endstep %} {% step %} #### Migration des fichiers existants Les anciens fichiers de personnalisation sont déplacés : | Ancien emplacement | Nouveau emplacement | | ------------------ | --------------------- | | `/styles/` | `/skins/default/` | | `/custom-css/` | `/skins/default/app/` | | `/custom-js/` | `/skins/default/app/` | Le répertoire `/custom-js` est également dupliqué sous le nom `/external-js`. {% endstep %} {% step %} #### Archivage des anciens répertoires Les anciens répertoires sont renommés avec le préfixe `__unused__` : * `__unused__styles/` * `__unused__custom-css/` * `__unused__custom-js/` Ces répertoires peuvent être supprimés manuellement après validation de la migration. {% endstep %} {% endstepper %} {% hint style="success" %} ✅ La migration est automatique. Vérifiez que vos personnalisations sont bien présentes dans les nouveaux emplacements avant de supprimer les anciens répertoires `__unused__`. {% endhint %} *** ## ⚠️ Limitation {% hint style="warning" %} **Limite Technique — Version minimale** La gestion des thèmes n'est disponible qu'à partir de la version **Efalia Process 6.14.0**. Sur les versions antérieures, la personnalisation se faisait directement dans les répertoires `/styles/`, `/custom-css/` et `/custom-js/`. {% endhint %} {% hint style="warning" %} **Risques de personnalisation avancée** Il est techniquement possible d'aller au-delà de la simple personnalisation visuelle (surcharge de comportements JavaScript). Cependant, toute modification avancée est effectuée **à vos risques et périls** et peut être incompatible avec les futures mises à jour d'Efalia Process. {% endhint %} *** ## Bonnes Pratiques {% hint style="success" %} **✅ À faire :** * Conserver le thème `default` intact et créer vos thèmes dans des dossiers séparés * Nommer les fichiers CSS/JS avec des préfixes numériques pour contrôler l'ordre d'application * Tester les thèmes dans un environnement de recette avant la production * Versionner vos fichiers de thème dans un dépôt Git * Utiliser des variables CSS pour faciliter la maintenance des couleurs {% endhint %} {% hint style="danger" %} **❌ À éviter :** * Modifier les fichiers du thème `default` directement (écrasés lors des mises à jour) * Utiliser des noms de dossiers avec espaces ou caractères spéciaux * Surcharger massivement le JavaScript interne d'Efalia Process {% endhint %} *** ## Questions Fréquentes
Peut-on avoir un logo différent selon l'application verticale ? Non, le fichier `header-logo.png` s'applique globalement à toutes les applications de l'espace `app/`. Il n'est pas possible de définir un logo par application verticale avec le système de thèmes standard. Pour une personnalisation avancée par application, une surcharge CSS ciblée avec les classes CSS spécifiques aux applications est nécessaire.
Les thèmes s'appliquent-ils à la documentation générée par le Designer ? Non. Le système de thèmes s'applique au Panorama (app), au Designer HTML et à la page de connexion uniquement. La documentation générée automatiquement par le Designer utilise son propre style.
Faut-il redémarrer le serveur pour qu'un nouveau thème soit pris en compte ? **Non.** Une fois le thème activé et sélectionné depuis l'administration simplifiée, les modifications sont appliquées immédiatement. Pour les modifications de fichiers CSS/JS dans le thème, un simple rechargement de la page navigateur (Ctrl+F5 pour vider le cache) est suffisant.
Comment revenir au thème par défaut ? Depuis **Administration > Paramètres**, désactivez les thèmes personnalisés (`com.clog.workey.skin.custom.enabled = false`) ou sélectionnez le thème `default` dans la liste.
Peut-on utiliser des polices de caractères personnalisées ? Oui. Déposez vos fichiers de polices dans le répertoire de votre thème et référencez-les dans votre fichier CSS via `@font-face`. Les polices peuvent être placées dans le sous-répertoire `app/` pour l'espace Panorama.
*** **Votre thème est configuré.** Efalia Process affiche maintenant vos couleurs, votre logo et votre identité visuelle. Pour aller plus loin : * [Paramétrage du Front Office](/documentations/efalia-process/administration/administration-fonctionnelle/parametrage-front-office.md) * [Préconisations Matérielles](/documentations/efalia-process/administration/administration-technique/preconisations-materielles.md) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://documentation.efalia.com/documentations/efalia-process/administration/administration-fonctionnelle/gestion-themes.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.