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

Basket Download Links¶

#basket-download-pdf-link: The link to download a PDF codebook for the basket
#basket-download-ddi32-link: The link to download DDI 3.2 for the basket
#basket-download-csv-link: The link to download a CSV file of data in the basket
#basket-download-spss-link: The link to download an SPSS .sav file of data in the basket

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:

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.
Edit the text in the .txt files for the plain text email format.
Edit the HTML in the .html files for HTML formatted email.