View Categories

Procédure de création d’un thème

Table des matières

🗂 Comprendre la structure des thèmes #

Dans Web/resources/themes, chaque sous-dossier correspond à un thème (ex. BBBlue, BBGreen).
Un dossier de thème contient :

  • 📁 Sous-dossiers de composants (CardView, GridView, etc.)
  • 🎨 colors.css : jeu de couleurs principal.
  • 🖼 StudioSkin.png (60×60) : icône utilisée dans Mes préférences et le Studio.
  • 🖼 skin.png : image interne (optionnelle).
  • 📄 skin.xml : métadonnées (nom, description, visibilité…).

🌐 Visualiser et gérer depuis le portail Web #

  1. Se connecter au portail → Mes Préférences.
  2. En bas de page, section Thème graphique :
    • Chaque thème affiché correspond à un dossier.
    • Thème par défaut : icône /web/resources/themes/SkinSession.png.
    • Thème manquant (présent dans le référentiel mais pas en dossier) : /web/resources/themes/SkinMissing.png.
  3. Bouton Recharger (visible en bas à droite pour les admins Web) :

🛠 Créer un nouveau thème avec PowerShell #

  1. Se connecter au serveur BiBOARD.
  2. Ouvrir PowerShell et naviguer :
  3. cd « ..\Web\resources \themes »
  4. Ouvrir le fichier BBFunc_NewSkin.ps1
  5. Renseigner la ligne BBFunc_NewSkin avec les bons paramaètres – exemple : BBFunc_NewSkin « BBBlue » « ClientSkinBlue« ;
    • BBBlue : thème source à copier.
    • ClientSkinBlue : nom du nouveau dossier thème.
  6. Enregistrer le fichier
  7. Quitter l’éditeur de fichier
  8. Exécuter le script de duplication :
  9. .\BiBOARD_NewSkin.ps1
  10. Message affiché :
    Votre nouveau thème BiBOARD basé sur BBBlue a été généré dans ClientSkinBlue.
    N’oubliez pas de personnaliser : Skin.xml, StudioSkin.png, colors.css.

📌Note :
Créer plusieurs thèmes en une fois :

  • dupliquer la ligne BBFunc_NewSkin avec d’autres noms.

🎨 Personnaliser le nouveau thème #

a) Icône du thème

  • Remplacer StudioSkin.png par l’image souhaitée (PNG 60×60).
  • Optionnel : mettre à jour aussi skin.png.

b) Fichier skin.xml
Exemple minimal :

<Skin
  Name="ClientSkinBlue"
  Description="Thème personnalisé pour Client X"
  VisibleStudio="true"
  VisibleWeb="true">
</Skin>
  • Name / Description : texte affiché dans Studio et Mes Préférences.
  • VisibleStudio : masque/affiche dans le Studio.
  • VisibleWeb : masque/affiche dans Mes Préférences (toujours visible par un admin).

c) Jeu de couleurs

  • Ouvrer colors.css et adapter les variables ou classes pour correspondre à votre charte graphique.
  • Vous pouvez copier des sections de colors.css d’autres thèmes comme BBGreen pour gagner du temps.

d) Dossiers de composants

  • Si besoin d’un style spécifique pour un composant (ex. GridView), remplacer ou modifier uniquement les fichiers de ce sous-dossier.

🔄 Charger et tester le thème #

  1. Dans Mes Préférences, cliquer sur Recharger.
  2. Sélectionner votre nouveau thème.
  3. Vérifier :
  • L’icône et le nom apparaissent correctement.
  • Les couleurs et styles sont appliqués dans les différents composants.

✏ Modifier un thème existant #

  1. Ouvrer son dossier dans Web/resources/themes.
  2. Ajuster :
    • StudioSkin.png pour changer l’icône.
    • skin.xml pour modifier visibilité, nom, description.
    • colors.css ou sous-dossiers pour adapter les couleurs ou styles.
  3. Cliquer sur Recharger pour appliquer sans redémarrage.

⚠ Bonnes pratiques #

  • Sauvegarder toujours le dossier original avant toute modification.
  • Respecter les droits NTFS : compte IIS doit lire les fichiers (IIS_IUSRS ou équivalent).
  • Maintenir une nomenclature claire : ex. ClientNom_Couleur.
  • Tester en environnement de préproduction avant une mise en PROD.
  • Si un thème disparaît ou affiche l’icône manquante, vérifier le nom du dossier et skin.xml.

Retour en haut