Themes

What are Themes?

The Themes functionality allows Portal Administrators to easily change the combination of colors and fonts to customize the look of their portal. This can be done on a universal level for all users throughout your organization, or specific themes can be customized for different domains used within your portal's user community.

There are a variety of areas of your portal that can be thematically customized at your discretion:

  • The Common area, which covers fonts and colors used for text and links throughout the portal
  • The Header area, which covers the size of the header on each portal page, as well as the size of a logo image, and color & font of text used there
  • The Navigation elements, which cover the fonts and colors used in the active and inactive settings of the navigation bar, the drop-down menus, and the breadcrumb links
  • The Widgets, which covers the fonts, sizes, colors, and borders for each widget, as well as 4 customizable color scheme choices for widgets
  • The Dashboard Directory, which covers the colors used in text, outlines, and gridlines for Dashboard listing
  • The Accordion Menu widget, which addresses the colors used for various active and inactive backgrounds and text for accordion headers
  • The Search Results and Other Pages section, which covers the font, color, and size of document titles, content source vendor names, links (active and visited), bookmark & tag information, etc.
  • The Headline Widgets section, where you can manage the fonts and colors of the titles, sources, and dates of headline content
  • The Buttons and Icons section, where you can manage the fonts, size, and colors of various buttons and icons used throughout the portal
  • The Portal Footer with Copyright Info area, where you can add background image, logo, and copyright text
  • The Portal Email Branding elements, which covers the fonts, size, and colors used in emails sent from the portal


Go to Admin UI >> more >> Themes, which will open the Themes page and a listing of any existing themes. You will also see the New Theme button.

 

Create a Theme

Click on the New Theme button, which opens the New Theme page, where you can set the name of the theme, and a description of it. You must also select a parent theme – either the generic theme, or an existing theme.

  • The parent theme allows you to "inherit" all of the settings from that theme onto your newly created theme. All of the fonts, colors, sizes, weights, and images of your parent theme are automatically transferred to your new theme.
  • Then, you may change any of these settings to conform to the design of your new theme. Any settings that you choose not to update will maintain the parent theme's original inherited settings.


Similarly, you may create another New Theme, using the theme you recently created as its parent. This newest theme will initially list the inherited settings from your previously created theme, but you can then change any of those settings in your newest theme.


IMPORTANT NOTE: Any change made to a setting in a parent theme will carry through to all of the inherited settings of its child themes. Before making any changes to the settings of a theme, be aware of any other themes using inherited settings from that parent theme.


Click Save, and you will be redirected back to the Themes page, and the new theme will now be listed there.

 

Activate a Theme

Identify the theme you wish to activate on the Themes page. On the far right of each theme, you will see four control links (see image at top of this page). The top link will Activate (or Deactivate) that theme for all users.

 

Edit a Theme

Identify the theme you wish to Edit on the Themes page. On the far right of each theme, you will see four control links (see image at top of page). Clicking the Edit link opens the Theme Details page, where you may change the theme’s details (name, parent, and description).


Delete a Theme

Identify the theme you wish to delete on the Themes page. On the far right of each theme, you will see four control links (see image at top of page). Clicking the bottom link (Delete) will remove that theme from the portal.

Deleting a universal theme will revert the portal back to its generic default, unless another custom theme is activated to replace it. Deleted themes remain stored, in the event that they are deleted accidentally.

However, if the theme in question is assigned to a specific domain, then simply deleting the theme here will NOT remove the theme from that specific domain. Themes assigned to specific domains must be managed on the Domain Details page. Click here for more information on domains & themes.

Modify Themes

Modify a Theme

Identify the theme you wish to modify on the Themes page. On the far right of each theme, you will see four control links (see image at top of page). Clicking on the Settings link will open the Theme Settings page, where you can modify the appearance (font style, font size, and colors) of the portal user’s interface.

The following sections can be modified:

Custom Named Styles

To match your portal's colors exactly to your organization's branded colors, you can use hex codes. Once you've identified the color codes that you need, you may then designate names to the colors, making them more personal and easy to remember.


 

  • Change an existing name by clicking on the name link.
  • Change an existing hex code by clicking on the code link.
  • Delete an existing Custom Style by clicking the X to the right of the name.
  • Add an additional Custom Style by clicking the + to the right of the name.

 

Common

This section allows Portal Administrators to set the standard text and link font sizes, as well as colors for text throughout the portal interface.

  • Typography

The default fonts are set as

  1. Primary font: Open Sans
  2. Secondary font: Verdana,
  3. Tertiary font: sans-serif

Administrators may use these three fonts, as well as ArialOpen Sans LightTahoma, and SegoeUI.

Please note that only three font options are allowed at any one time, and that the third font option is only used if the first two cannot be found.

  • Divider

This refers to the dividing bar seen on popup windows used for emailing or bookmarking documents. Color can be customized to your choice.

 

Header

The Header section allows Administrators to set a logo in the top left corner of the portal, as well as to set the background color, font, font size, and font color of the portal’s name in the top right corner.

 

Navigation

The Navigation section allows Administrators to manage the font, font size, and font color of the Navigation Bar, as well as the background color of the Navigation menu and its associated fallout menus and glyphicons.

 

Widget

The Widget section allows Administrators to manage the Widget headers color options, the format of the header type (upper case, lower case, capitalized), as well as the font size and color of the Widget header text and glyphicons.

 

Dashboard Directory

The Dashboard Directory section allows Administrators to manage the font color, weight, and size, as well as the color of the directory's tile outline and gridline.

  1. This section allows you to set the font size and weight for your Dashboard and Directory tiles, as well as set default images.

  2. This section allows you to set the size, position, and opacity level for images used as tiles. For Size, choose between Auto, Contain, or Cover
    • Auto is the default setting, and will display the image in its original size.  
    • Contain will allow you to space the image within the tile, and justify it right, left, or center.  
    • Cover will fit the image into the entire tile, even if it has to stretch the image or cut a little bit off one of the edges. 

      With "contain" option, if aspect ration of selected image is different from our tile aspect ration, you may end up with image having white space margins on left/right or top/bottom. 

      If you need the tiles to look best on Retina displays (Mac OS users), then you should double the size of the image. On Retina it will be shown in its real size. On regular displays it will be shown in half size, but usually resizing down doesn’t give as many blur or artifacts when resizing up.

      For Opacity, you can choose any setting between 0.1 (like a watermark) to 1.0 (a clear, sharp image). 

  3. This section is for the default tile style, where you can set the font and background colors, determine whether to display the tile's name, and choose the default for displaying icons or background images for dashboards, and for displaying thumbnails, icons, or background images for directories.

  4. These sections are for alternate tile stylewhere you can set the font and background colors, determine whether to display the tile's name, and choose the default for displaying icons or background images for dashboards, and for displaying thumbnails, icons, or background images for directories.

 

Accordion Menu

The Accordion Menu section allows Administrators to manage the font color and background color for up to four separate headers, each with a separate color for active and inactive status.

 

Search Results and Other Pages

The Search Results and Other Pages section allows Administrators to manage the font, color, and size of document titles, content source vendor names, links (active and visited), bookmark & tag information, etc.

 

Buttons and Icons

The Buttons and Icons section allows Administrators to manage the colors, size, and fonts of various buttons and icons used throughout the portal.

 

 

Chips

Chips are small framed labels, used to highlight important information. The Chips section allows Administrators to manage the colors, size, and fonts of various chips used throughout the portal.  

 

Portal Footer with Copyright Info

The copyright content can be presented as an image, as text, or as a combination of both. However, using an image and text together will require careful editing to ensure that the image box size does not interfere with content fields and drop-downs.


Some basic HTML styling, such as bold or italics, can be set to the footer text:

 

Portal Email Branding

Use this feature to align the presentation of portal-sent emails with the rest of the organization's visual branding, regarding colors and fonts.

Themes for Domains

Domains

The Domain component of the Themes functionality allows Administrators to design and apply themes to specific domains. There is a limit of 1 theme per domain.

Go to Admin UI >> Domains (page) >> New Domain (button) >> Domain Details (page)


An inactive theme can be applied to a specific domain, which would then override the current active theme for users within that domain. Even if a theme applied to a specific domain is deleted, it will be in use for users in that domain, unless the Administrator specifically applies a new theme on the Domain Details page.