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

public-portal-header : l’entête de toutes les pages du portail public.

public-portal-footer : le bas de page du portail public.

public-portal-content-layout : englobe tout le contenu des pages du portail sauf l’entête et le bas de page.

v-window : englobe les styles de la fenêtre des filtres.

                v-window-header : l’entête de la fenêtre des filtres.

                v-window-contents : le contenu de la fenêtre des filtres.

                               filters-upper-panel-layout : la partie contenant les filtres.

                               filters-lower-panel-layout : la partie contenant les boutons.

                                               filters-window-save-button : le bouton “Enregistrer” de la fenêtre des filtres.

                                               filters-window-cancel-button : le bouton “Annuler” de la fenêtre des filtres.

public-portal-search-button : le bouton “Rechercher” qui apparait dans toutes les pages du portail public.

public-portal-search-field : le champ de texte de la recherche du portail public.

public-portal-filter-button : le bouton “filtrer la recherche“ qui accompagne le champ de recherche.

2. Styles par page

2.1. Page d’accueil

public-portal-home-page-main-layout : la classe générale de tout le contenu de la page d’accueil.

                homePage-title : le titre de la page d’accueil.

                public-portal-home-page-searchBar-layout-desktop: englobe la barre de recherche. Ce style s’applique si la largeur de l’écran est supérieure à 800px.

                public-portal-home-page-searchBar-layout-mobile: ce style affecte la même composante que le style précédent, sauf qu’il lui remplace si la largeur de l’écran est inférieure à 800px.

                public-portal-publicPortalSearchFormLayout-layout-mobile: pour le “div” qui contient les trois composantes de recherche. Il s’applique lorsque la largeur de l’écran est inférieure à 800px.

                 homePage-description : classe de style pour la description.

                 homePage-description-mobile : classe de style pour la description si la largeur de l’écran est inférieure à 800px.

2.2 Page d’erreur

public-portal-error-page-main-layout: la classe générale de tout le contenu de la page d’erreur, elle contient identiquement les mêmes classes enfants que la classe « public-portal-home-page-main-layout ».

2.3 Page d’erreur si le portail invalide

public-portal-invalid-page-main-layout : la classe générale de tout le contenu de la page d’erreur si le portail est invalide, elle contient identiquement les mêmes classes enfants que la classe « public-portal-home-page-main-layout ».

2.4 Page d’accueil avec des composantes additionnelles

                public-portal-home-page-with-extra-layouts : la classe générale de tout le contenu de la page d’accueil avec des composantes additionnelles , elle contient identiquement les mêmes classes enfants que la classe « public-portal-home-page-main-layout », en plus d’autres classes spécifiques aux composantes ajoutées.

                 pp-homePage-upperPart-Layout : la moitié de la page qui contient le titre, la description et la barre de recherche.

                 pp-homePage-extraLayouts : l’autre moitié qui englobe le/les composantes ajoutées (comme « les documents épinglés »).

                               pinned-documents-layout : la composante entière des documents épinglés.

                               document-carousel-main-layout : le carrousel des cartes de documents.

                               document-card-main-layout : style des cartes contenues dans le carrousel.

                               pp-frequent-searches-layout : la composante entière des recherches pertinentes.

                               pp-frequent-searches-table-layout : le “div” qui contient les recherches épinglées à l’accueil.

                               pp-frequent-search-layout : style de chaque composante de recherche épinglée.

2.5. Page des résultats de recherche

public-portal-searchResults-page-main-layout : 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.

                results-table-and-sort-layout : regroupe la composante de tri, la composante de texte qui indique le nombre de résultats, la liste des résultats et les composantes de pagination.

                                sortBy-layer : la composante de tri pour les résultats de recherche.

                                count-label : la composante qui contient comme texte, le nombre de résultats disponibles pour la recherche en cours.

                               v-lazyloadingwrapper-loading : la composante qui s’affiche à la place de la liste des résultats indiquant que le chargement des résultats est en cours.

                               viewer-results-table-listMode-thumbnail : style de la colonne des « thumbnail ».

                               viewer-results-table-listMode-searchResult : style de la colonne des documents.

                                               document-search-result-title : style du titre du document.

                                               pp-searchResults-downloadButton : style du bouton de téléchargement affiché pour chaque résultat de la recherche.

                               paging-controls : regroupe les composantes de pagination en bas de la page.

                                               page-management-layout : la composante centrale indiquant la page actuelle.

                                               previous-page-button : le bouton qui permet la navigation vers la page précédente des résultats.

                                               next-page-button : le bouton qui permet la navigation vers la page suivante des résultats.

2.6. Page de consultation d’un document

public-portal-displayDocument-page-main-layout : la classe générale du contenu de la page de consultation d’un document.

                display-document-lower-part : regroupe toutes les composantes de la partie en dessous de la barre de recherche.

                               actions-bar-layout : regroupe les composantes de la barre de titre du document qui contient les boutons de retour, de téléchargement et d’informations en plus du texte représentant le titre du document sujet de consultation.

                               component-with-collapsible-side-tab-panel: la composante qui contient le panneau d’affichage du document avec le panneau d’informations sur le document.

3. Variables CSS :

--pp-custom-bg-color: couleur secondaire de l’arrière-plan.

--pp-custom-primary-bg-color: couleur primaire de l’arrière-plan.

 --pp-custom-button-color: couleur primaire.

--pp-custom-text-color: couleur secondaire.

--pp-custom-text-font: la police de texte.

--pp-custom-title-font: la police des titres.

--pp-custom-hyperlink-color: couleur hyperlien.

--pp-custom-hyperlink-visited-color: couleur hyperlien visité.

--pp-custom-hyperlink-hover-color: couleur hyperlien de survol.

4. Composante de choix de langue personnalisée

La composante de choix de langue, se trouvant à l'entête du portail public, contient les valeurs des langues activées dans la collection du portail en question. Au moment de la sélection d'une langue parmi les choix disponibles, une fonction Javascript s'occupe de changer la valeur du paramètre "lg" dans l'URL courant avec le code de la nouvelle langue (p. ex. "lg=fr") ou bien l'ajouter avec la bonne valeur s'il n'existe pas. Il est aussi à souligner la langue choisie que par défaut est celle du navigateur utilisé.

Il est possible d'avoir sa propre composante de choix de langue qui s'adapte à la même logique mentionnée précédemment. Toutefois, on conseil d'utiliser la fonction Javascript "public_portal_change_language(languageCode)" où "languageCode" est le paramètre qui représente le code de la langue choisie.