GLPI/Personnalisation de l'interface, version 10.0.x

Il est possible de personnaliser l'interface de GLPI en passant par le paramétrage des entités. La personnalisation se fait par du CSS.

Extension

Une extension existe pour personnaliser notamment les logos ; nécessite GLPI-Network :

• https://plugins.glpi-project.org/#/plugin/branding
• https://services.glpi-network.com/documentation/1565/file/README.md

Documentation :

• https://glpi-plugins.readthedocs.io/fr/latest/branding/index.html

En résumé :

• logo, coin haut à gauche : 100 x 55 pixels ;
• logo, coin haut à gauche, menu compacte : 40 x 40 pixels ;
• logo, favicon : 16 x 16 or 32 x 32 pixels ;
• logo, page de connexion : 220 x 130 pixels ;
• logo, arrière-plan de page : dépend de la taille habituel des écrans utilisés.

Personnalisation des logos de l'interface principale

Personnaliser l'entité racine pour que les logos GLPI soient changés.

Une amélioration possible, pour pouvoir gérer les mises à jour de GLPI sans faire référence aux dossiers spécifiques au coeur de GLPI :

• avoir un dépôt des images sur le serveur web, mais accessible par l'application GLPI ;
• pour un usage de GLPI en tant que moteur principal d'application (GSI, GMC, Gima...), utiliser le nouveau dossier config du dossier ...\plugins\
  • ...\www\Gima\plugins\config\
  • ...\www\GMC\plugins\config\
  • ...\www\GSI\plugins\config\
  • ...\www\GLPI\plugins\config\

/*
Nom           : CSSGLP010
Description   : personnalisation de l'interface de GLPI
Usage         : utilisation de code CSS pour personnalier l'interface de GLPI
Particularité : le dossier ...\www\glpi18\plugins\config\ doit existr, avec les fichiers image souhaités
Auteur        : Ph. Page
Version       : 1.0
Révisions     :
    - 1.0 (12/02/2025) : Ph. Page, création du script
*/

/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */
/* Logo, personnalisation                                                                                                                  */
/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/* logo, coin haut à gauche, menu développé (logo principal) : 100 x 55 pixels ; */
/*.page .glpi-logo { background: url("../plugins/config/logo-GLPI-100-white.png") no-repeat !important; height: 55px; width: 100px; }*/
.page .glpi-logo { background: url("../plugins/config/logo-GLPI-100-white.png") no-repeat !important; height: 55px; width: 100px; }

/* logo, coin haut à gauche, menu compact : 40 x 40 pixels */
body.navbar-collapsed .navbar-brand .glpi-logo { background: url("../plugins/config/logo-G-100-white.png") no-repeat !important; background-size: contain; width: 50px !important; height: 50px !important; }

/* logo, favicon : 16 x 16 or 32 x 32 pixels
<link rel="shortcut icon" type="images/x-icon" href="/glpi10/plugins/favicon.ico">
*/

/* logo, page de connexion : 220 x 130 pixels */

/* logo, arrière-plan de page : dépend de la taille habituel des écrans utilisés. */

/* logo, tableau de bord en plein écran ; valeur par défaut : logo-GLPI-100-black.png ; logo-GLPI-100-grey*/
.dashboard.fullscreen .glpi_logo, .dashboard.embed .glpi_logo { background: url("../plugins/config/logo-GLPI-100-black.png") no-repeat; }

Personnalisation de la taille des listes

/* Pour réduire la taille des caractères des tableaux (liste des éléments d'inventaire) */
main {
   /* valeur d'origine : font-size: 100%; */
   font-size: 90%;
}

Réduction de la hauteur de la barre d'outils des listes

Pas concluant au 27/02/2024

/* Pour réduire la marge haut et bas de la barre avec le bouton "Actions" */
.card-header {
   /* valeur d'origine : padding: 1rem 1.25rem; */
    padding: .3rem 1.25rem;
}

•