---
title: Procédure de création d’un thème
description: "## **🗂** ****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.…"
url: "https://wiki.biboard.fr/wiki/procedure-de-creation/"
updated: "2025-09-17"
category: Guide utilisateur / Studio / En savoir plus
---

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

## **🗂** ****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**

- **Sauvegarde**r 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.