Styles CSS
- Bannière
- Barre de filtres
- Onglets
- Portlets
- Fil d’ariane
- Slicers verticaux / horizontaux
- Filtres
- Commentaires
- Curseurs (slicers et variables)
- Chargement
- Migration des styles CSS (avant 2017R2 vers 2017R2 et plus)
Voici la liste non exhaustive des classes CSS permettant de customiser l’aspect visuel du tableau de bord.
Bannière
.topPanel
Description : Change l’aspect visuel de la bannière (bordure, fond d’écran).
Exemple :
.topPanel { background-color : #f1f1f1; border : 1px solid black; }
.logoTopPanel
Description : Change le logo de la bannière.
Exemple :
.logoTopPanel { background: url (mon_logo.png) no-repeat; }
.userLabel
Description : Change le texte représentant le nom de l’utilisateur (couleur, police).
Exemple :
.userLabel { font-family : ‘Open Sans’ ; color : black; }
.topPanelIconLabelPanel_Label
Description : Change le menu à droite de la bannière.
Exemple :
.topPanelIconLabelPanel_Label { font-family : ‘Open Sans’; color : black; }
Barre de filtres
#interactBar
Description : Change le div contenant les boîte de filtres.
Exemple :
.interactBar { background-color : #f1f1f1; }
.selHierTitleDiv
Description : Change le titre de la boîte de filtres.
Exemple :
.selHierTitleDiv { background-color : #d5d7da; border-radius : 4px; }
.selHierTitleDivWhite
Description : Change le titre de la boîte de filtres au survol de la souris.
Exemple :
.selHierTitleDivWhite { background-color : #009fa6; color : white; }
Onglets
.dd-tab-bar
Description : Change la barre contenant la liste des onglets.
Exemple :
.dd-tab-bar { background-color : #f1f1f1; border-bottom: 1px solid #f1f1f1; }
.dd-tab-header
Description : Change l’onglet.
Exemple :
.dd-tab-header { background-color : #f1f1f1 !important; border-right: 1px solid #cccccc; }
.dd-tab-header-selected
Description : Change l’onglet sélectionné.
Exemple :
.dd-tab-header-selected { background-color : #009fa6 !important; color : white !important; }
.dd-tab-header-text
Description : Change le texte de l’onglet.
Exemple :
.dd-tab-header-text { font-family : ‘Open Sans’ !important; font-size : 13px !important; }
Portlets
.portlet
Description : Change la portlet.
Exemple :
.portlet { border : 1px solid #d0d0d0 !important; }
.portlet-header
Description : Change l’en-tête de la portlet.
Exemple :
.portlet-header { background-color : #eeeeee !important; border-bottom : 1px solid #d0d0d0 !important; }
.portlet-header-text
Description : Change le texte de l’en-tête de la portlet.
Exemple :
.portlet-header-text { color : #6d6d6d !important; font-size : 16px !important; font-family : ‘Open Sans’ !important; }
.portlet-content
Description : Change le contenu de la portlet.
Exemple :
.portlet-content { background-color : white !important; }
.x-tool-maximize, .x-tool-gear, .x-tool-help, .x-tool-restore, .x-tool-alert, .x-tool-comment
Description : Change les icônes s’affichant dans l’en-tête de la portlet.
Exemple :
.x-tool-maximize { background-image : url(mon_icone.png) !important; }
Fil d’ariane
.breadcrumbImg
Description : Change l’image de réinitialisation du fil d’ariane.
Exemple :
.breadcrumbImg { background-image : url(mon_image.png !important; }
.unclickablebreadcrumb, .clickablebreadcrumb
Description : Change le texte du fil d’ariane.
Exemple :
.unclickablebreadcrumb, .clickablebreadcrumb { color : #6d6d6d !important; }
Slicers verticaux / horizontaux
.tdMemberActive, .spanMemberActive
Description : Change le membre du slicer ayant des valeurs.
Exemple :
.tdMemberActive { background-color: #d5d7da !important; border-radius : 5px !important; color : black !important; }
.tdMemberInactive, .spanMemberInactive
Description : Change le membre du slicer n’ayant pas de valeurs.
Exemple :
.tdMemberInactive { background-color: white !important; color : gray !important; }
.tdMemberSelected, .spanMemberSelected
Description : Change le membre sélectionné du slicer.
Exemple :
.tdMembeSelected { background-color: #009fa6 !important; border-radius : 3px !important; color : white !important; }
Filtres
.trHeaderFilter
Description : Change l’en-tête de l’objet Filtre.
Exemple :
.trHeaderFilter { background-color: #d5d7da !important; }
.tdFilter
Description : Change le contenu de l’objet Filtre.
Exemple :
.tdFilter { background-color: #f1f1f1 !important; }
.tdFilterImage
Description : Change l’image de suppression d’un filtre.
Exemple :
tdFilterImage { background: url(mon_image.png) no-repeat #009fa6 !important; }
Commentaires
.comments
Description : Change l’objet Commentaire.
Exemple :
.comments { background-color: #f1f1f1 !important; }
.commentsDisplayAll
Description : Change le bouton permettant l’affichage de tous les commentaires.
Exemple :
.commentsDisplayAll { color : #ffffff !important; background-color: #009fa6 !important; }
.commentsFilter
Description : Change l’image permettant d’appliquer la sélection d’un commentaire.
Exemple :
.commentsFilter { background: url(mon_icone.png) !important; }
.commentsEdit
Description : Change l’image permettant d’éditer un commentaire.
Exemple :
.commentsEdit { background: url(mon_icone.png) !important; }
.commentsRemove
Description : Change l’image permettant de supprimer un commentaire.
Exemple :
.commentsRemove { background: url(mon_icone.png) !important; }
.commentsDate
Description : Change la date du commentaire.
Exemple :
.commentsDate { font-family : ‘Open Sans’ !important; color : black !important; }
.commentsUser
Description : Change l’utilisateur du commentaire.
Exemple :
.commentsUser { font-family : ‘Open Sans’ !important; color : black !important; }
.commentsContent
Description : Change le contenu du commentaire.
Exemple :
.commentsContent { font-family : ‘Open Sans’ !important; color : black !important; }
Curseurs (slicers et variables)
.ui-widget-header
Description : Change la barre du curseur en mode intervalle.
Exemple :
.ui-widget-header { background: #009fa6 50% 50% repeat-x !important; }
.ui-widget-content
Description : Change la barre du curseur.
Exemple :
.ui-widget-content { background: #009fa6 50% 50% repeat-x !important; }
Chargement
.dd-progress-bar
Description : Change le fond de la barre de chargement total de la page.
Exemple :
.dd-progress-bar { background-color: white; }
.dd-progress-bar-content
Description : Change le fond de la barre de chargement qui augmente.
Exemple :
.dd-progress-bar-content { background: blue; }
.loading
Description : Change l’affichage du Chargement des objets de type graphiques.
Exemple :
.loading { border : 1px solid #d4d4d4 !important; }
.loadingImg
Description : Change l’image du Chargement des objets de type graphiques.
Exemple :
.loadingImg { background: url(mon_image.png) no-repeat !important; }
.loadingTxt
Description : Change le texte du Chargement des objets de type graphiques.
Exemple :
.loadingTxt { font-family : ‘Open Sans’ !important; }
Les sélecteurs CSS #dashboard_editor et #dashboard_viewer permettent de différencier le tableau de bord en mode édition du tableau de bord en mode consultation.
Migration des styles CSS (avant 2017R2 vers 2017R2 et plus)
Suite à un changement de technologie pour la réalisation du tableau de bord, certaines classes CSS (ne provenant pas de DigDash) ne sont pas compatibles, voici une liste de classes CSS non compatibles avec leurs classes équivalentes :
- #viewportPanel doit être remplacé par #dashboard_viewer
- .x-tab-strip-inner, .x-tab-left, .x-tab-right doivent être remplacé par .dd-tab-header
- .x-tab-strip-active .x-tab-strip-inner, .x-tab-strip-active .x-tab-left, .x-tab-strip-active .x-tab-right doivent être remplacé par .dd-tab-header-selected
- .x-tab-strip span.x-tab-strip-text doivent être remplacé par .dd-tab-header-text
- .x-panel doit être remplacé par .portlet
- .x-panel-header doit être remplacé par .portlet-header
- .x-panel-bwrap, .x-abs-layout-item, .x-panel-body doivent être remplacé par .portlet-content