Custom CSS

Custom CSS

In this guide, you will find a list of the different class names that are used in Constellio's default stylesheet for public portal pages.

1. General Styles

public-portal-header: The header of all pages in the public portal.

public-portal-footer: The footer of the public portal.

public-portal-content-layout: Encompasses all content on portal pages except the header and footer.

v-window: Encompasses the styles of the filter window.

                v-window-header: The header of the filter window.

                v-window-contents: The contents of the filter window.

                               filters-upper-panel-layout: The part containing the filters.

                               filters-lower-panel-layout: The part containing the buttons.

                                               filters-window-save-button: the "Save" button in the filter window.

                                               filters-window-cancel-button: the "Cancel" button in the filters window.

public-portal-search-button: The "Search" button that appears on all pages of the public portal.

public-portal-search-field: The text field of the public portal search.

public-portal-filter-button: The "filter search" button that accompanies the search field.

2. Styles per page

2.1. Homepage

public-portal-home-page-main-layout: The general class of all content on the home page.

                homePage-title: The title of the home page.

                public-portal-home-page-searchBar-layout-desktop: Encompasses the search bar. This style applies if the screen width is greater than 800px.

                public-portal-home-page-searchBar-layout-mobile: This style affects the same component as the previous style, except that it overrides it if the screen width is less than 800px.

                public-portal-publicPortalSearchFormLayout-layout-mobile: for the "div" that contains the three search components. It applies when the screen width is less than 800px.

                 homePage-description: The style class for the description.

                 homePage-description-mobile: The style class for the description if the screen width is less than 800px.

2.2 Error page

public-portal-error-page-main-layout: the general class of all error page content, it contains the same child classes as the "public-portal-home-page-main-layout" class.

2.3 Error page if the portal invalidates

public-portal-invalid-page-main-layout: The general class of all the contents of the error page. If the portal is invalid, it contains the same child classes as the "public-portal-home-page-main-layout" class.

2.4 Home page with additional components

               public-portal-home-page-with-extra-layouts: The general class of all homepage content with additional components, it contains the same child classes as the "public-portal-home-page-main-layout" class, in addition to other classes specific to the added components.

                 pp-homePage-upperPart-Layout: The half of the page that contains the title, description, and search bar.

                 pp-homePage-extraLayouts: The other half that includes the added component(s) (such as "pinned documents").

                               pinned-documents-layout: The entire component of pinned documents.

                               document-carousel-main-layout: The carousel of document cards.

                               document-card-main-layout: The style of the cards contained in the carousel.

                               pp-frequent-searches-layout: The entire component of relevant searches.

                               pp-frequent-searches-table-layout: the "div" that contains the searches pinned to the home.

                               pp-frequent-search-layout— The style of each pinned search component.

2.5. Search results page

public-portal-searchResults-page-main-layout: The general class of the search results page's content.

                selected-facet-layout: The entire component that encompasses the filters selected for the current search.

               results-table-and-sort-layout— Groups the sorting component, the text component that indicates the number of results, the list of results, and the pagination components.

                                sortBy-layer: The sorting component for the search results.

                               count-label: the component that contains as text, the number of results available for the current search.

                               v-lazyloadingwrapper-loading— The component that appears in place of the list of results indicating that the results are being loaded.

                               viewer-results-table-listMode-thumbnail: The style of the thumbnail column.

                               viewer-results-table-listMode-searchResult: The style of the document column.

                                               document-search-result-title: The style of the document title.

                                               pp-searchResults-downloadButton: The style of the download button displayed for each search result.

                               paging-controls— Groups the pagination components at the bottom of the page.

                                               page-management-layout: The central component indicating the current page.

                                    previous-page-button: The button that allows navigation to the previous page of the results.            

                                               next-page-button: the button that navigates to the next page of results.

2.6. Document consultation page

public-portal-displayDocument-page-main-layout: The general class of content on a document's view page.

               display-document-lower-part: Groups all the components of the part below the search bar.

                               actions-bar-layout: groups the components of the document title bar that contains the back, download, and information buttons in addition to the text representing the title of the document being viewed.

                               component-with-collapsible-side-tab-panel: The component that contains the document display panel with the document information panel.

3. CSS Variables:

--pp-custom-bg-color: Secondary color of the background.

--pp-custom-primary-bg-color: The primary color of the background.

 --PP-Custom-Button-Color: Primary color.

--pp-custom-text-color: Secondary color.

--pp-custom-text-font: the text font.

--pp-custom-title-font: the font of titles.

--pp-custom-hyperlink-color: Hyperlink color.

--pp-custom-hyperlink-visited-color: Visited hyperlink color.

--pp-custom-hyperlink-hover-color: Hover hyperlink color.

4. Custom Language Selection Component

The language choice component, located at the header of the public portal, contains the values of the languages enabled in the collection of the portal in question. When selecting a language from the available choices, a Javascript function takes care of changing the value of the parameter "lg" in the current URL with the code of the new language (e.g. " lg=en") or add it with the right value if it doesn't exist. It should also be noted that the language chosen by default is that of the browser used.

It is possible to have your own language choice component that adapts to the same logic mentioned earlier. However, it is recommended to use the Javascript function " public_portal_change_language( languageCode)" where " languageCode" is the parameter that represents the code of the chosen language.