Portal Design Themes
About Portal Design Themes
JICS includes a feature that lets you choose from among different “themes” that control the look and feel of the site.
A theme is essentially a strategy for controlling the aesthetics of the site. In most cases this is done by overlaying the base product with the theme’s own cascading style sheet (CSS) and, optionally, the theme’s own images and JavaScript. It is also possible for an individual theme to disable the base JICS style (as defined in StylesSiteStyle.css, which is stored in \Portal\UI\Common). It is not possible to disable a feature’s own CSS or to disable Custom.css. (stored in \Portal\ClientConfig\HtmlContent).
In JICS 9.2.x and higher, you can choose from three prepackaged themes: Atlantica (the default), Pacifica, and Indio.
You can manage themes through the Site Manager > Portal design themes screen. You can preview each theme before applying it. When you apply a theme, all users will see the change (not just the person making the change).
The Site Manager > Portal design themes screen also includes instructions and tools for designing and uploading your own theme. You do this by creating a CSS file and an XML file, along with (optionally) other elements, then completing a few other required steps. For more details on this, click the What is a theme? link.
 |
Note that if you have multiple web servers in a load-balanced configuration, and you change from one theme to another, it may take up to five minutes for the change to be honored by all servers.
Customizing a Theme
Customizations You Can Make to a Theme
On the Site Manager > Portal design themes screen, in the Basic theme modifications section, you can upload a logo to use as the masthead image for your site and change the colors used in your portal’s design theme.
For navigation and backgrounds, you can specify the following colors:
Primary – color of the menu bar, text in the sidebar menu, feature borders, and various other text and icons
Secondary – color of the sidebar menu’s background and the shading applied to a menu option when you hover over it
Accent – color of buttons, the admin bar, submenus in the sidebar, and various other text
Fills & borders – background color of the sidebar menu and items such as resources when viewed in a card layout, shading for certain text, feature borders, certain buttons and button borders, background color of popup windows, shading in rows of tables, and other elements of the user interface
You can also specify the following colors for text that appears throughout the portal:
Body text – color of the on-screen text that appears on most pages of the portal
Text links – color of text hyperlinks
When you enter a hexadecimal color value in one of these fields, that color will override the default color used in the theme currently applied to the portal.
Log in to the portal as a member of the Administrators role.
Click the user icon and select Site Manager.
The Site Manager page displays with the Site Settings tab selected.
Click the Portal design themes tab.
The Portal design themes screen displays.
In the list of themes, under the Other themes heading, locate the theme you wish to use.
Click Activate theme.
In the confirmation dialog that displays, click OK.
Log in to the portal as a member of the Administrators role.
Click the user icon and select Site Manager.
The system displays the Site Manager screen, with the Site Settings tab selected.
Click the Portal design themes tab.
The Portal design themes screen displays.
In the Basic theme modifications section of the page, click Add logo.
An Open dialog displays.
Navigate to the logo file and select it.
The logo uploads and displays in the Basic theme modifications section.
Click Save and update.
The logo displays as the masthead image for your portal.
Log in to the portal as a member of the Administrators role.
Click the user icon and select Site Manager.
The system displays the Site Manager screen, with the Site Settings tab selected.
Click the Portal design themes tab.
The Portal design themes screen displays.
In the Basic theme modifications section of the page, under Navigation & backgrounds, enter hexadecimal values for one or more of the following colors:
Primary
Secondary
Accent
Fills & borders
In the Basic theme modifications section of the page, under Text, enter hexadecimal values for either or both of the following colors:
Body text
Text links
The colors are applied to the portal.