Styles CSS

Modifié par Aurelie Bertrand le 2024/09/11 10:39


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 :

 .breadcrumnImg { 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, #dashboard_viewer et #dashboard_mobile  permettent de différencier le tableau de bord en mode édition, du tableau de bord en mode consultation "Desktop" et du tableau de bord en mode consultation "Mobile" .