Portal Theming Guide

The look and feel of Portal interface can be customized according to certain themes. The Portal Interface is available presently in two themes:

  1. Default - default
  2. Kenya - ke

A subset of the CSS styles have been extracted into CSS variables. The variables are defined in vars.css files. A vars.css file is available for each theme and contains the styles specific to that theme. vars.css and the images used in a theme are present in the src/css/themes/<theme> folder. In order to apply a theme, edit the file .env. Change the value of the REACT_APP_THEME variable to the code of the required theme. For eg., to select the Default theme, the .env file should read:

REACT_APP_THEME=default

The env.development file overrides the .env file in development mode. In order to change the theme during development, modifying env.development alone will do.

The background, foreground colors for the text content in the top bar, section and footer areas , buttons and other UI controls, logos etc., are customizable.

Default theme

Default theme

Kenya theme

Kenya theme

Customizable CSS properties

Variable Affected DOM Images
--overrides-h-color Font color of headings other than the branding area
--overrides-h-color
--font-1 General font-family excluding headings
--font-1
--font-2 Font family of headings including the branding area
--font-2
--font-2
--font-3 Font family in the auto-suggest area
--font-3
--font-small-heading, --react-tabs-tab-font Font family in the sidebar field headings, tabs respectively.
--font-small-heading-tabs
--main-col-position Position of the main content column - left or right
--content-grey-rule-bg-color Horizontal divider line color
--content-grey-rule-bg-color
--content-text-block-color, --content-a-hover-color Links color and hover color
--content-a-hover-color
--content-button-bg-color, --content-button-color Button colors in the main content column
--content-button
--content-tab-pane-bg-color Background color of the tab pane
--content-search-result-bg-color, --content-search-result-box-shadow, --content-search-result-color, --content-search-result-h1-color Styles the main content column(Figure shows the region in yellow) in the search pages.
--content-search-result
--home-wbutton-bg-color Background color of the buttons in the header and content area
--home-wbutton
--footer-bg-color, --footer-color Text and background color for region marked in red in the figure.
--footer-color
--footer-a-color Text color of links(marked in red in the figure) in the footer.
--footer-a-color
--footer-submit-bg, --footer-submit-color Colors of the form button in the footer.
--footer-submit
--footer-social-bg-color, --footer-social-color, --social-img-bg Background, text color in the social media region of footer.
--footer-submit
--pagecontentcolumn-color Text color in the CMS pages.
--content
--paginator-li-bg-color: Page item background
--paginator-li-border-color: page item border color
--paginator-li-color: Page item text color
--paginator
--reacttabs-bg-color: Tab background
--reacttabs-color: Tab text color
--reacttabs-selected-bg-color: Selected tab background color
--reacttabs-selected-color: Selected tab text color
--reacttabs-border: Tab border
--reacttabs-border-radius: Tab border radius
--reacttabs-bg-image: Tab background image (separator)
--reacttabs-hover-bg-color: Hovered tab background color
--reacttabs-hover-color: Hovered tab text color
--reacttabs-selected-border: Selected tab border
--reacttab-panel-border: React tab panel border
--tabs
--section-bg-color, --section-color Background and text color of the main content and sidebar container; Version text background color(shown in yellow in the figure); Background and text color of document page download links
--section
--section-1
--section-flex-dir Determines the order of the main content and sidebar in the layout. "row" and "row-reverse" values can be used to alter the position of the main columns.
--sidebar-col-position Position of the sidebar column. Assign values 'left' or 'right' based on the position of the main content column.
--sidebar-bg-color - Background color of the sidebar (region in yellow in the figure)
--sidebar-box-shadow - Shadow of the sidebar.
--sidebar-border-radius - Border radius of the sidebar.
--sidebar
--sidebar-a-color Links text color in the sidebar region
--sidebar-a-color
--sidebar-small-heading-color - Text color of the filter headings(shown in yellow in the figure)
--sidebar-small-heading-bg - Background color of the filter headings
--sidebar-small-heading
--topbar-bg - Background color of the top bar (shown in yellow in the figure)
--topbar-box-shadow - Shadow of the top bar.
--topbar-bg
--topbar-submit-button-bg-color Background color of the site search submit button in the top bar
--topbar-submit-button-bg-color
--logo-img-top - Brand logo in the top bar
--logo-img-height, --logo-img-width - Dimensions of the logo image on the topbar
--logo-color - Text color of the first line of heading in the branding area
--navbrand-top-margin - Top margin of the nav-brand. Can align with top line of language switcher or search bar.
--logo
--heading-above-search
--second-header-row-display 		There are two types of layouts:
  • Heading above search in a second header row
  • Heading alongside search in the same row inside .nav-brand
The .logotype element containing both first and second headings is added in two places. The display property is used to show whichever is appropriate for the layout
--heading-above-search
--logo
--logotype-h1-bg
--logotype-h1-height
--logo-h1-font-size
--logotype-h1-lineht
--logotype-h1-font 		Styles of the first heading h1
--logotype-h1-1
--logotype-h1-2
--logo-h2-font-size
--logo-h2-mleft 		Styles of the second heading h1 - font size, left margin
--logo-h2
--logo-h2-2
--logo-img-float-994
--navbrand-mtop-994
--navbrand-display-994
 Below 994px screen width, the header row is rearranged. The logo, and the headings are centered above the search box.
--sidebar-left-margin-767
--sidebar-right-margin-767
--navbrand-float-767
 Below 767px screen width, the sidebar is hidden by default. It can be brought up using the burger menu button. The layout can either have the sidebar at the left or right. So clicking on the burger menu button, should bring it up from the right or left side and hide it by sliding it onto the same side. This property is used to set the side from which the sidebar swipes in and out.
--languageswitcher-bg-color - Background color of the language switch upon hover(red)
--languageswitcher-highlight-bg-color - Background color of the current language(yellow).
--lang-switch-font-size -Font size of text in language switcher
--language-switcher
--sidebar-left-margin, --sidebar-right-margin The sidebar is collpsed by default on smaller screens and revealed using the burger menu button. Based on the position of the sidebar in the large screen, set left or right margin to 0px. The sidebar is attached to the side with zero margin. To which side the sidebar gets attached determines the swipe direction to close the sidebar.
--sidebar-margin