Theme and Styles

Custom Templates

The default master template used by Colectica Portal can be replaced with a custom template. To create a custom template, copy the following file and give it a new file name in the same directory: PortalDir\Views\Templates\Barebones.cshtml.

Edit the file to contain the HTML layout and links to CSS and Javascript files as desired. Any CSS or Javascript resources can be placed in the PortalDir\wwwroot\themes\themeName directory, and will be served as static content with the path /themes/themeName/fileName.

When editing the template file, the following lines are required:

  • @Html.Partial(“~/Views/Templates/Parts/_CoreStyles.cshtml”)
  • @RenderSection(“styles”, required: false)
  • @Html.RenderResources(PageResourceType.CSS)
  • @RenderSection(“headScripts”, required: false)
  • @Html.Partial(“~/Views/Templates/Parts/_CoreScripts.cshtml”)
  • @RenderSection(“scripts”, required: false)
  • @Html.RenderResources(PageResourceType.JavaScript)
  • @Html.Partial(“~/Views/Templates/Parts/_EndBodyContent.cshtml”)”

Once your template is complete, it can be selected from the Admin - Site Information page.

Adding Styles

When using the default template, additional 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 an additional CSS file to be loaded, enter a theme name in the Admin - Site Information. The theme name should correspond to a CSS file in the following location: PortalDir\wwwroot\theme\themeName\themeName.css.

Useful CSS Selectors

The following CSS classes and identifiers may be useful when creating custom style sheets.

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