Thème aux couleurs centralisées

Présentation #

Le nouveau thème Skin « Auto » dans le dossier thèmes\BBSkinAuto permet de centraliser les couleurs de la partie Web.
La liste des couleurs nommées se trouve dans un fichier colors.css à la racine du Thème.
Environ 50 couleurs permettent de personnaliser l’ensemble des pages du portail web.

Portail Web – application #

Les zones d’application #

   Les textes et fond des tableaux de bord
   Le menu principal (et celui de la page Tableaux.aspx)
   Les popups (messages d'erreur ou popup des composants)
   Les couleurs des composants (textes, fond, entêtes,...) 
   Les couleurs spécifiques au composant TCD
   Et une liste de série de 10 couleurs supplémentaires pour les tuiles.

Remarques :

1. Ce Skin n’est pas compatible avec IE (11) mais seulement avec Edge, Chrome, Firefox.
2. Certains composants ne sont pas compatibles avec ces définitions de couleurs (StockChart, TreeMap)
3. Les couleurs des séries de certains composants sont définies dans des fichiers XML. On ne peut utiliser les constantes de couleurs dans ces fichiers :

• FlashChartcolor.xml
• FlashGaugecolor.xml
• FlashPiecolor.xml
• Mapcolor.xml
• TileColor.xml
• TreeMapcolor.xml

Contenu du fichier colors.css #

:root 
 --color-BBSkinAuto_PageBack: #FFFFFF; /*Fond des pages*/ 
--color-BBSkinAuto_BorderLine: #8727DB; /*Bordures et lignes*/ 

--color-BBSkinAuto_ErrorText: #FF0000; /*Messages erreur*/ 
--color-BBSkinAuto_LinkVisitedText: #1F1F1F; /*Lien Hypertextes*/ 
--color-BBSkinAuto_LinkText: #0000FF; 
--color-BBSkinAuto_LinkHoverText: #F9D957; 

--color-BBSkinAuto_MenuBack: #573EEF; /*Menu principal et sous menu (Board et Tableau) */ 
--color-BBSkinAuto_MenuText: #FFFFFF; 
--color-BBSkinAuto_MenuHoverBack: #F9D957; 
--color-BBSkinAuto_MenuHoverText: #FFFFFF; 
--color-BBSkinAuto_SubMenuBack: #8727DB; 
--color-BBSkinAuto_SubMenuText: #FFFFFF; 
--color-BBSkinAuto_SubMenuHoverBack: #F9D957; 
--color-BBSkinAuto_SubMenuHoverText: #3E0D81; 

--color-BBSkinAuto_PopupBack: #3E0D81; /*Popup*/ 
--color-BBSkinAuto_PopupText: #FFFFFF; 
--color-BBSkinAuto_HeaderBack: #8727DB; /*Entête Popup et Filtres des composants */ 
--color-BBSkinAuto_HeaderText: #FFFFFF; 
--color-BBSkinAuto_FooterBack: #8727DB; 
--color-BBSkinAuto_FooterText: #FFFFFF; 

--color-BBSkinAuto_CompsBack: #F0F0F0; /*Arrière plan des composants*/ 

--color-BBSkinAuto_CompsOddRowsBack: #CDB8FA; /*Couleur de fond des lignes impaires*/ 
--color-BBSkinAuto_CompsHeaderBack: #573EEF; /*Entête des composants*/ 
--color-BBSkinAuto_CompsHeaderHoverBack: #F9D957; 
--color-BBSkinAuto_CompsHeaderPressedBack: #A954F3; 
--color-BBSkinAuto_CompsHeaderText: #FFFFFF; 
--color-BBSkinAuto_CompsHeaderHoverText: #3E0D81; 

--color-BBSkinAuto_CompsHeaderTotalBack: #573EEF; /*TCD Totaux et soustotaux*/ 
--color-BBSkinAuto_CompsHeaderTotalText: #FFFFFF; 

--color-BBSkinAuto_CompsSubTotalHeaderBack: #8727DB; 
--color-BBSkinAuto_CompsSubTotalHeaderText: #FFFFFF; 
--color-BBSkinAuto_CompsSubTotalBack: #8727DB; 
--color-BBSkinAuto_CompsSubTotalText: #FFFFFF; 

--color-BBSkinAuto_CompsHeaderGrandTotalBack: #8727DB; 
--color-BBSkinAuto_CompsHeaderGrandTotalText: #FFFFFF; 
--color-BBSkinAuto_CompsGrandTotalBack: #8727DB; 
--color-BBSkinAuto_CompsGrandTotalText: #FFFFFF; 

--color-BBSkinAuto_CompsText: #3E0D81; /*Texte principaux dans les composants */ 
--color-BBSkinAuto_CompsText2: #c41313; /*#F9D957; Texte secondaires (messages, audio Week-Number*/ 
--color-BBSkinAuto_CompsSelectedText: #000000; /*Texte de la sélection courante*/ 
--color-BBSkinAuto_CompsSelectedBack: #F9D957; 
--color-BBSkinAuto_CompsDisabledBack: #5f5b5b; /*Option désactivée*/ 
--color-BBSkinAuto_CompsDisabledText: #707070; 

--color-BBSkinAuto_Serie1: #573EEF; /*Bleu*/ 
--color-BBSkinAuto_Serie2: #3E0D81; /*Bleu fonçé*/ 
--color-BBSkinAuto_Serie3: #8727DB; /*Violet*/ 
--color-BBSkinAuto_Serie4: #A954F3; /*Violet Clair*/ 
--color-BBSkinAuto_Serie5: #CDB8FA; /*Glycine*/ 
--color-BBSkinAuto_Serie6: #FF997F; /*Saumon*/ 
--color-BBSkinAuto_Serie7: #F9D957; /*Jaune*/ 
--color-BBSkinAuto_Serie8: #99E5E8; /*Turquoise*/ 
--color-BBSkinAuto_Serie9: #FF0000; /*Rouge*/ 
--color-BBSkinAuto_Serie10: #8727DB; /*Orange*/

Exemples visuels #

Si l’on applique cette définition des couleurs :

--color-BBSkinAuto_Serie1: #573EEF; /*Bleu*/ 
--color-BBSkinAuto_Serie2: #3E0D81; /*Bleu fonçé*/ 
--color-BBSkinAuto_Serie3: #8727DB; /*Violet*/ 
--color-BBSkinAuto_Serie4: #A954F3; /*Violet Clair*/ 
--color-BBSkinAuto_Serie5: #CDB8FA; /*Glycine*/ 
--color-BBSkinAuto_Serie6: #FF997F; /*Saumon*/ 
--color-BBSkinAuto_Serie7: #F9D957; /*Jaune*/ 
--color-BBSkinAuto_Serie8: #99E5E8; /*Turquoise*/ 
--color-BBSkinAuto_Serie9: #FF0000; /*Rouge*/ 
--color-BBSkinAuto_Serie10: #8727DB; /*Orange*/

On a l’affichage suivant :

Et si l’on remplace les valeurs par celles-ci :

--color-BBSkinAuto_Serie1: 						#8eaff7; 	
--color-BBSkinAuto_Serie2: 						#b6f508; 	
--color-BBSkinAuto_Serie3: 						#20cf5b; 	
--color-BBSkinAuto_Serie4: 						#d83bbe; 	
--color-BBSkinAuto_Serie5: 						#CDB8FA; 	
--color-BBSkinAuto_Serie6: 						#32ce2d; 	
--color-BBSkinAuto_Serie7: 						#F9D957; 	
--color-BBSkinAuto_Serie8: 						#99E5E8; 	
--color-BBSkinAuto_Serie9: 						#FF0000; 	
--color-BBSkinAuto_Serie10: 						#e9710f; 

On obtient l’affichage suivant :