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 is included in the theme directory, those contents will be included at the top of every page.

  • If a file named footer.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 Tabs

All tabs on item pages have identifiers with the pattern #item-tab-{title}, where {title} is the text of the tab in lower case, with spaces replaced by hyphens. For example, on the question item page, the Parameters tab is identified by #item-tab-parameters.

Item Page Properties

All property names (e.g., “Name”, “Label”, “Description”) have classes with the pattern .property-{title}, where {title} is the text of the property in lower case, with spaces replaced by hyphens. For example, on the variable item page, the Dataset property can be referenced by .property-dataset.

Item Page Sidebar

.sidebar-nav #appears-within-tab

The “Appears Within” section of the sidebar

.sidebar-nav #information-tab

The “Information” section of the sidebar

.sidebar-nav #history-tab

The “History” section of the sidebar

.sidebar-nav #download-tab

The “Downloads” section of the sidebar

#download-pdf-link

The link to download a PDF of 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

Miscellaneous

.question-external-aid-indicator

The icon that indicates a question has one or more external aids

.no-results

Applied on search facet options for which no results would return

Email Notification Templates

Note

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

To customize these designs:

  1. Move the email theme files from the distribution’s \Config-dist\EmailTemplates-dist\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.