- Impression
- SombreClair
- PDF
Guide pour personnaliser son portail public
CSS personnalisé
Vous trouverez dans ce guide une liste des différents noms de classes qui sont utilisées dans la feuille de style par défaut de Constellio pour les pages du portail public.
À noter:
Des tabulations sont utilisées pour illustrer la hiérarchie et les relations Parent-Enfant(s) entre les différentes classes de style.
1. Styles généraux
header : l’entête de toutes les pages du portail public.
footer : le bas de page du portail public.
main-content : englobe tout le contenu des pages du portail sauf l’entête et le bas de page.
MuiDialog-paper : englobe les styles de la fenêtre des filtres.
MuiDialogTitle-root : l’entête de la fenêtre des filtres.
MuiDialogContent-root : le contenu de la fenêtre des filtres.
facet-selection-list : la partie contenant les filtres.
facet-selection : un filtre et ses valeurs
facet-value-selection-list : la liste des valeurs pour un filtre
facet-value-selection : une valeur de filtre
MuiDialogActions-root : la partie contenant les boutons “Appliquer” et “Annuler”.
search-bar : L’ensemble du champs de recherche, du bouton “Rechercher” et du bouton “Filtrer”
search-field : la barre de recherche et le bouton “Rechercher” sans le bouton de filtre
facet-filter-button : le bouton de filtre
2. Styles par page
2.1. Page d’accueil
home-page : la classe générale de tout le contenu de la page d’accueil.
public-portal-title : le titre de la page d’accueil.
public-portal-welcome-message : classe de style pour la description.
pinned-search-button-list : La liste des recherches épinglées
MuiTypography-h3 : Le libellé des recherches épinglées
pinned-search-button : le bouton d’une recherche épinglée
pinned-document-card-list : La liste des documents pertinents
MuiTypography-h3 : Le libellé des documents pertinents
pinned-document-card : Un document pertinent
pinned-document-card-image : l’image du document pertinent
pinned-document-card-content : le titre du document pertinent
2.2 Page d’erreur
error-page: la classe générale de tout le contenu de la page d’erreur
MuiTypography-h2: Le titre du portail public
MuiTypography-body1 : Le message d’erreur
2.3 Page d’erreur si le portail invalide
error-page : la classe générale de tout le contenu de la page d’erreur.
MuiAlert-message : la classe qui contient le message d’erreur
2.4. Page des résultats de recherche
search-page : la classe générale du contenu de la page des résultats de recherche.
selected-facet-layout : la composante entière qui englobe les filtres sélectionnés pour la recherche en cours.
search-results : la composante affichant les résultats de recherche
MuiTypography-body1 : la composante qui contient comme texte, le nombre de résultats disponibles pour la recherche en cours.
sort-select : la composante de tri
thumbnail : style de la colonne des « thumbnail ».
metadatas : style de la colonne des documents.
download : style de la colonne du bouton de téléchargement
pagination : style pour le composant de pagination dans le bas des résultats de recherche
pagination-previous-button : le bouton qui permet la navigation vers la page précédente des résultats.
pagination-next-button : le bouton qui permet la navigation vers la page suivante des résultats.
2.5. Page de consultation d’un document
document-page : la classe générale du contenu de la page de consultation d’un document.
document-bar-content : panneau qui contient les contrôles commes le bouton retour, le bouton télécharger et la bascule du panneau des métadonnées
document-inner-container : regroupe toutes les composantes de la partie en dessous de la barre de titre.
document-viewer-container : Visualisateur de document
document-drawer : panneau rétractable des métadonnées
list-metadata-scrollable-panel : liste des métadonnées
display-metadata-container : Titre et valeur d’une métadonnée
display-metadata-label : Titre de la métadonnée
display-metadata-value : Valeur de la métadonnée