OBLYON
Panneau d'options qui vous permet de personnaliser le thème Oblyon
- 1. PRÉSENTATION DU MODULE
- 2. ACTIVATION DU MODULE
- 3. ONGLET "OPTIONS"
- 4. ONGLET "MENUS"
- 5. ONGLET "ICÔNES"
- 6. ONGLET "COULEURS"
- 7. ONGLET "TABLEAU DE BORD"
- 8. ONGLET "STYLE CSS"
- 9. SAUVEGARDE ET RESTAURATION DES REGLAGES
1. PRÉSENTATION DU MODULE
Présentation du module
Le Thème Oblyon vous propose un design moderne et convivial. Directement inspiré d’une tendance flat design, Oblyon vous garantit une navigation accessible et efficace dans Dolibarr. Avec une réorganisation des menus et une barre de navigation statique avec menus déroulants, naviguer d’une page à l’autre n’aura jamais été aussi simple.
Oblyon est un module de thème graphique qui remplace complètement l'apparence standard de Dolibarr (thème "eldy") par une interface personnalisable :
- Nouveau thème CSS complet (menus, boutons, tableaux, Dashboard, page de connexion...)
- Gestionnaire de menus avance (menu haut / menu gauche, mode inverse, réduit, cache, tactile)
- Personnalisation fine des couleurs (plus de 100 paramètres)
- Choix du pack d'icones FontAwesome (Free ou Pro)
- Options de comportement des listes et des fiches (bandeaux collants, colonnes fixes, etc.)
- Éditeur de CSS personnalisé intégrée
- Page de connexion personnalisable (couleurs, liens, réseaux sociaux)
Le module ne crée aucune table en base : tous les réglages sont stockes sous forme de constantes Dolibarr (table llx_const) et peuvent donc être sauvegardes / restaures facilement (voir section 9).
2. ACTIVATION DU MODULE
Accès à la configuration
1. Aller dans Accueil > Configuration > Modules/Applications
2. Rechercher "Oblyon" (regroupe sous l'éditeur "Inovea Conseil", ou dans la famille du produit si le module "dolinfras" est installé)
3. Cliquer sur le bouton d'activation
Dès l'activation :
- Le thème Dolibarr passe automatiquement sur "Oblyon" (MAIN_THEME)
- Le gestionnaire de menus Oblyon devient actif
- Le pack FontAwesome le plus récent disponible est détecté et appliqué
AVERTISSEMENTS IMPORTANTS :
- N'activez jamais le thème seul sans le module : cela provoque un comportement d'affichage incohérent.
- Ne changez pas le thème depuis la fiche utilisateur (Mon compte > Paramètres de l'affichage) tant que le module Oblyon est actif cela provoque également un comportement inattendu. Toute la personnalisation du theme doit passer par les pages de configuration du module (voir section 3), jamais par le profil utilisateur.
Pour désactiver le module : même écran de gestion des modules. La désactivation restaure automatiquement le thème standard "eldy" et nettoie les constantes de thème (voir section 9 pour la sauvegarde préalable).
3. ONGLET "OPTIONS"
Configuration : OPTIONS
« Options générales »
- Taille du texte de base en pixels (doit être comprise entre 10 et 16) : définit la taille de police de référence de toute l'interface ; les autres tailles (titres, petits textes) sont recalculées en proportion.
- Police de caractères utilisée pour l'interface Dolibarr : change la police d'affichage générale (menus, textes, tableaux) parmi une liste de polices web standards (Arial, Verdana, Segoe UI, etc.).
- Hauteur maximale des images dans les listes (tableaux) : limite en pixels la hauteur des miniatures affichées dans les colonnes des listes (ex. photos produits), pour éviter des lignes de tableau trop hautes.
- Ne pas afficher le numéro de version de Dolibarr (en haut a droite) : masque le numéro de version habituellement visible en haut à droite de l'écran, utile pour ne pas exposer la version exacte de l'instance.
- Afficher une marge en bas de page sur la partie droite : ajoute un espace en bas de la zone de contenu à droite, pour éviter que les derniers éléments affichés ne soient collés au bord de la fenêtre.
- Les statuts des éléments affiches en icone avec ou sans texte (sinon libelle colore classique) : remplace les étiquettes de statut colorées habituelles (ex. "Validée", "Payée") par une icône, avec ou sans texte, pour un affichage plus compact dans les listes.
« Options des listes »
- Basculer la colonne de sélection / recherche / action en masse à gauche : déplace la colonne des cases à cocher de sélection multiple (et le bouton d'action en masse) du côté gauche du tableau plutôt que du côté droit habituel.
- Fixer la barre de titre des listes (titre, action en masse, pagination, bouton "Ajouter" toujours visibles) : rend la barre supérieure de la liste (titre, actions groupées, pagination, bouton Créer) collante en haut d'écran pendant le défilement, pour y accéder sans remonter en haut de page.
- Retirer le bouton "Vue kanban" en haut à droite des listes : masque le bouton de bascule vers l'affichage "vue kanban" proposé par Dolibarr sur certaines listes, si cette vue n'est pas utilisée.
- Fixer l'en-tête de colonne des tableaux lors du défilement vertical : garde visibles les noms de colonnes en haut du tableau pendant le défilement vertical d'une longue liste.
- Fixer la première colonne des tableaux lors du défilement horizontal : garde visible la première colonne (généralement la référence ou le nom) lorsque le tableau est plus large que l'écran et défile horizontalement.
- Fixer la dernière colonne des tableaux lors du défilement horizontal : garde visible la dernière colonne (souvent la colonne d'actions) lors du défilement horizontal d'un tableau large.
- Fixer la barre des totaux en bas de page : rend la ligne de totaux (montants HT/TTC, etc.) du bas de tableau collante en bas d'écran pendant le défilement, pour la garder visible en permanence.
- Afficher les totaux généraux hors pagination si différents des totaux classiques, avec option pour fixer cette barre en bas de page : affiche, en plus des totaux de la page courante, le total général sur l'ensemble des résultats de la liste (toutes pages confondues) lorsque celui-ci diffère, avec possibilité de fixer aussi cette barre en bas d'écran.
« Options des fiches »
- Fixer le bandeau des onglets lors d'un défilement vertical : garde visible la barre d'onglets d'une fiche (facture, tiers, produit...) en haut d'écran pendant le défilement, pour changer d'onglet sans remonter.
- Fixer l'espace référence de la fiche lors d'un défilement vertical (désactivé automatiquement sur mobile) : garde visible le bandeau d'en-tête de la fiche (référence, statut, boutons d'action principaux) en haut d'écran pendant le défilement ; désactivé automatiquement sur téléphone mobile pour ne pas réduire l'espace utile.
- Nombre maximal d'onglets visibles (les autres sont regroupés dans une liste déroulante), avec option pour limiter les onglets à une seule ligne : limite le nombre d'onglets affichés directement sur une fiche ; au-delà, les onglets supplémentaires sont regroupés dans un menu déroulant "plus", avec possibilité de forcer l'ensemble des onglets visibles sur une seule ligne.
- Fixer les boutons d'actions en bas de page : rend la barre de boutons d'actions (Modifier, Valider, Supprimer...) collante en bas d'écran lors du défilement d'une fiche longue.
- Afficher le numéro des lignes (facture, proposition commerciale, etc.) : ajoute une colonne affichant le numéro d'ordre de chaque ligne de produit/service sur les documents (factures, devis, commandes...).
« Options de l'éditeur WYSIWYG (CKEditor) »
- Autoriser tout contenu dans l'éditeur : désactive le filtrage de contenu de l'éditeur de texte enrichi, pour conserver toutes les balises et attributs HTML saisis (par défaut, CKEditor filtre certains contenus par sécurité).
- Activer la correction orthographique automatique (SCAYT) : active le correcteur orthographique automatique "au fil de la frappe" dans les zones de texte enrichi.
- Autoriser les libellés non sécurisés avec HTML (option marquée "non recommandé" : à activer uniquement si nécessaire et en connaissance des risques) : permet de saisir du code HTML dans des libellés normalement en texte simple (ex. désignation de produit), en désactivant une protection de sécurité contre les contenus non filtrés ; à n'activer qu'en connaissance de cause (risque de faille XSS si du contenu non maîtrisé est saisi).
4. ONGLET "MENUS"
Editeur de menus
« Menu Haut »
- Largeur maximale : Cette option permet d’ajuster la mise en page en fonction de la résolution de l’écran et des préférences d’affichage.
- Afficher le logo : Active ou désactive l’affichage du logo Dolibarr ou de votre entreprise dans la barre supérieure.
- Barre adhésive haute : Rend la barre de menu supérieure « fixe », c’est-à-dire qu’elle reste visible même lors du défilement de la page
- Masquer les icônes : Permet de masquer les icônes affichées dans la barre de menu supérieure.
- Conserver la couleur d'origine des icônes du menu (thème Eldy)
« Menu Gauche »
- Barre adhésive gauche : Rend le menu latéral gauche « fixe », permettant ainsi qu’il reste visible lors du défilement.
- Masquer le menu gauche : Cache complètement le menu latéral gauche.
- Masquer les icônes : Supprime les icônes des éléments du menu gauche tout en conservant les intitulés des menus.
- Menu gauche réduit : Affiche uniquement les icônes des menus dans la barre latérale gauche, sans texte.
Incompatibilités signalées par l'interface : Le menu réduit est incompatible avec l'option "Masquer les icones " . Le menu réduit est incompatible avec "Afficher le nom de l'entreprise"
- Effet d'ouverture du menu caché : deploiement au survol de la souris ou pas de deploiement.
- Mode tactile des menus : Ouvre les menus deroulants au toucher (premier appui = ouverture, sans chargement de page). Ce mode est detecte et applique automatiquement sur un ecran tactile ; l'option permet de le forcer meme avec une souris (utile sur des bornes tactiles avec souris/trackpad).
- Page de connexion : Décentrer le bloc de connexion sur la droite de l'ecran
5. ONGLET "ICÔNES"
Icônes
Permet de choisir le pack d'icones FontAwesome utilise par l'ensemble de l'interface Dolibarr :
- Activer l'utilisation des icones FontAwesome 6 (Free) - par défaut, Dolibarr utilise FontAwesome 5
- Sélection du pack FontAwesome a utiliser (version / famille / style d'icone selon les packs disponibles sur le serveur, y compris les packs Pro le cas échéant)
Le module détecte automatiquement a l'activation le pack FontAwesome le plus récent présent sur le serveur. Cet onglet permet de changer ce choix manuellement.
6. ONGLET "COULEURS"
Couleurs
« Thèmes »
Cette section propose plusieurs thèmes prédéfinis pour modifier rapidement l’apparence de l’interface. Chaque thème applique un ensemble de couleurs cohérent pour les menus et autres éléments visuels.
- Oblyon Green (thème vert)
- Oblyon Dark (thème sombre)
- Oblyon Blue (thème bleu)
- Oblyon Night (thème noir et gris)
- Oblyon Light (thème clair avec du blanc et du rouge)
« Menu Haut »
Cette section permet de personnaliser les couleurs du menu situé en haut de l’écran. Vous pouvez modifier :
- La couleur de fond du menu et du survol
- La couleur au survol
- La couleur du texte et de son état actif (lorsqu’un élément est sélectionné).
Si l'option « inverser le menu haut/gauche » est active, ces libellés deviennent ceux du menu gauche, la structure restant identique.
« Menu Gauche »
Cette section permet d’adapter les couleurs du menu latéral gauche. Comme pour le menu du haut, vous pouvez ajuster :
- La couleur de fond et du survol
- La couleur du texte et son état actif
Ces réglages permettent d’assurer une bonne lisibilité et d’harmoniser les couleurs en fonction de vos préférences ou de votre charte graphique.
« Boutons »
Cette section gère l'apparence des boutons d'action et des boutons dits « dangereux » (suppression, annulation). Deux couleurs de dégradé sont proposées pour chaque type, plus une couleur de texte pour les boutons d'action, afin de bien distinguer visuellement une action normale d'une action destructrice.
« Messages »
Regroupe les couleurs des bandeaux d'alerte inline (information, avertissement, erreur) ainsi que celles des notifications système (toasts) correspondantes.
Pour chaque niveau (info/warning/error), vous réglez séparément :
- La couleur de bordure
- La couleur de fond et de texte du bandeau
- La couleur de fond et de texte de la notification associée — permet de renforcer visuellement la gravité d'un message.
« Fonds généraux »
Couleurs de fond globales de l'interface : couleur principale (accent du thème), fond général de la page, fond des champs de saisie (avec une variante si l'option « fond gris sur les champs » est activée), fond de la zone du logo et fond de la page de connexion.
« Texte »
Couleur du texte de base affiché dans le corps des pages, et couleur des liens hypertextes — les deux couleurs héritées du thème Eldy sous-jacent.
« Titres »
Couleurs des différents éléments de titre :
- Fond des barres de titre
- Texte du titre principal
- Texte des titres dans les tableaux et hors tableaux,
- Bordure supérieure des titres, et fond des filtres inactifs des widgets statistiques.
« Onglets »
Couleur de fond de l'onglet actif d'une fiche, et couleur du texte de cet onglet actif — permet de bien repérer l'onglet en cours de consultation.
« Lignes des tableaux »
Ensemble des couleurs des lignes de tableaux :
- Fond et texte par défaut
- Fond au survol
- Fond des lignes cochées
- Texte au survol, deux teintes de dégradé pour les lignes paires et deux pour les lignes impaires, et couleur des traits de séparation entre lignes.
« Lignes de total »
Couleur de fond et de texte de la ligne de total en pied de tableau (factures, commandes…), utilisée uniquement si l'option « identique à l'entête » est désactivée.
« Sélecteur de date »
Couleur de mise en évidence du jour courant et couleur du jour sélectionné dans le widget calendrier (jscalendar).
« Natures des tiers »
Couleurs de fond des étiquettes de nature affichées sur les fiches tiers (prospect, client, fournisseur, utilisateur interne), plus une couleur de texte commune à ces étiquettes.
« Adhérents »
Couleurs de fond des étiquettes adhérents (personne morale / personne physique) et couleur de texte commune à ces deux étiquettes, pour le module Adhérents.
« Tableau de bord / colonnes »
Couleur d'ombre portée des petites boîtes du Dashboard (si l'option est activée), deux couleurs de dégradé pour le fond des cartes kanban actives (applications/modules), et couleur de bordure de la colonne « action » figée des tableaux (visible uniquement si une colonne d'action sticky est activée).
« Montants »
Couleurs distinctes pour le montant restant à payer, le montant payé/soldé, et les liens marqués comme impayés — permet un repérage visuel rapide de l'état de paiement.
« Statuts (widgets) »
Cinq couleurs de badge de statut (succès, information, avertissement, danger, primaire), plus la couleur de la barre de progression et celle des éléments de timeline.
« Météo / vignettes »
Cinq niveaux de couleur pour l'indicateur « météo » du tableau de bord (du plus faible au plus fort niveau d'activité), et couleur du badge signalant qu'une mise à jour est disponible.
« Autocomplétions »
Couleur de fond et couleur de texte de la ligne mise en surbrillance lors d'une recherche avec auto-complétions (ex. sélection de produit ou de tiers).
« Multi-sélection (tags, catégories…) »
Deux paires fond/texte à ne pas confondre : Les catégories déjà cochées dans la liste déroulante de proposition, et les étiquettes déjà sélectionnées affichées directement dans le champ de saisie une fois validées.
Ratio du filtre d'inversion des couleurs : Curseur (0 à 100) appliquant un filtre CSS d'inversion partielle sur les icônes basées sur des images PNG — utile pour adapter des icônes claires à un thème sombre (le preset « Dark » le règle par exemple à 80).
7. ONGLET "TABLEAU DE BORD"
Tableau de bord
Personnalisation de la page d'accueil (Dashboard) de Dolibarr.
« Gestion des vignettes et des statistiques »
Le module Oblyon permet d’ajuster l’affichage du tableau de bord de Dolibarr en personnalisant les vignettes et les informations affichées. Cette configuration permet d’optimiser la lisibilité et de masquer les éléments inutiles selon les besoins de l’utilisateur.
- Activer/désactiver la vignette des éléments ouverts (a traiter ou en retard) sur le tableau de bord principal
- Désactiver le widget des statistiques globales (nombre d'éléments en base de données)
- Activer/désactiver individuellement les blocs par domaine : agenda, projets, clients, fournisseurs, contrats, banque, adhérents, notes de frais, conges payes, tickets, fabrication (MRP).
- Inverser les couleurs des icones et du fond des vignettes
- Uniformiser la largeur des vignettes sur le standard Dolibarr (280px) sinon la largeur s'adapte au contenu (minimum 260px)
« Couleurs »
Une couleur dédiée par type de vignette : météo, agenda, projet, propositions commerciales clients, commandes clients, factures clients, demandes de prix fournisseurs, commandes fournisseurs, factures fournisseurs, contrat, banque, adhérent, note de frais, conges payes, tickets, fabrication (MRP).
8. ONGLET "STYLE CSS"
CSS Personnalisés
Editeur de code CSS intègre (avec coloration syntaxique) permettant d'ajouter des règles de style additionnelles, au-delà de ce que proposent les onglets Couleurs/Menus/Options.
Le CSS saisi ici est injecté automatiquement à la fin de la feuille de style du thème, et s'applique donc en priorité sur les règles standard d'Oblyon.
A réserver a un usage avancé (connaissance CSS nécessaire) : Toute erreur de syntaxe reste sans conséquence sur le reste du thème, mais peut empêcher l'effet visuel attendu.
9. SAUVEGARDE ET RESTAURATION DES REGLAGES
Sauvegarde / Restauration
Chaque onglet de configuration propose en bas de page la section : "Sauvegarder / Restaurer l'ensemble des paramètres du module"
- Bouton "Sauvegarder" : enregistre l'intégralité des réglages actuels du module (couleurs, menus, options, Dashboard...) dans un fichier conserve cote serveur.
- Bouton "Restaurer" : recharge les réglages précédemment sauvegardes.
Après une restauration, rafraichir la page (touche F5) pour visualiser le résultat. Cette fonction est particulièrement utile :
- Avant de tester un nouveau thème de couleurs ou une modification importante.
- Avant une mise a jour du module - pour transférer une configuration testée vers une autre entité.