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.

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