Theme and Styles#

Adding Styles, Header, Footers, and favicon#

When using the default template, additional content and CSS styles can be provided without replacing the entire template. This may be a simpler approach to customization if only minor tweaks are required. To specify a theme, perform the following steps.

  • Enter a theme name in the Admin - Site Information.

  • Create a folder with the same name in PortalDir\wwwroot\theme\themeName.

  • Inside that folder, create a file named themeName.css. This CSS file will be included on all pages.

  • If a file named header.html or a UI language specific header.en-US.html is included in the theme directory, those contents will be included at the top of every page.

  • If a file named footer.html or a UI language specific footer.en-US.html is included in the theme directory, those contents will be included at the bottom of every page.

  • If a file named favicon.png or favicon.ico is included in the theme directory, that file will be used as the favicon for each Colectica Portal page.

CSS Selectors#

The content displayed by the Portal is tagged with html ids and css classes. These can be used as selectors in CSS to customize how the Portal is displayed. These selectors can be seen in the html using your browser’s developer tools.

Common CSS tasks include hiding elements on the page, changing colors and fonts, positioning elements, element sizes, and adding images.

The following CSS classes and identifiers may be useful when creating custom style sheets. This is just a sample of a few of the commonly used selectors, you can use your browser to see everything that is available on each page type.

Item Page Properties#

Each property displayed on an item page is rendered as a row with the classes .property-label for the property name and .property-value for its value.

Item Page Download Links#

#download-pdf-link

The link to download a PDF of the item

#download-ddi33-link

The link to download DDI 3.3 representing the item

#download-ddi32-link

The link to download DDI 3.2 representing the item

#download-ddi31-link

The link to download DDI 3.1 representing the item

#download-json-link

The link to download JSON representing the item

Search Page#

#search-facets-container

The bar containing the search facets

Miscellaneous#

#site-nav-links

The main navigation links

#personal-nav-links

The basket, language, help, and user links on the right of the navigation bar

.home-hero

The introductory banner on the home page

Home Page Layout#

A theme can replace the standard home page layout by providing a file named home.json in the theme directory. The file describes the blocks of the home page in the order they appear. Contact Colectica for the format of this file.

Email Notification Templates#

Note

Default email message themes are shipped in the Colectica Portal’s \Config.dist\EmailTemplates\Design folder.

To customize these designs:

  1. Move the email theme files from the distribution’s \Config.dist\EmailTemplates\Design folder to the Portal’s \Config\EmailTemplates\Design folder in the install location.

  2. Edit the text in the .txt files for the plain text email format.

  3. Edit the HTML in the .html files for HTML formatted email.

Note

The theme templates contain tokens that will be replaced with text by the Portal. These tokens start with an @ symbol and must be preserved within your changes.