Theme & Customization

The shipped ‘Front Office’ theme can be adjusted in this page, both by editing the colors used, as well as some of the images and styles. A ‘revert to default’ option allows any customized color change to be reset to the base Front Office theme.

The chosen theme selections can be saved/utilized across different sites by using the simple, block copy/paste, plain text import/export facility. Please note that this facility only imports/exports references to images: the actual image must be present on the new site, in your Images folder.

Editable aspects:

• Site-Wide
  •  Page width
  • Page outer color (when page width constrained)
  • Page outer background image
  • Make pages transparent when supported
  • Color for text on page background (should be black unless using transparency)
• Header:
  • Header height (in px; 0 hides header)
  • Header logo (max size 300x75px; left aligned; no repeat)
  • Header background image (repeated horizontally; max height 75px)
  • Header background color
  • Header text color
  • Top Bar IFrame height (in px)
• Colors:
  • Primary color (used in menu bar and other color blocks)
  • Primary text color (text color used on top of the primary color)
  • Secondary color (used in graphical controls, such as service catalog carousel and
    progress controls)
  • Secondary text color (text color used on top of the secondary color)
  • Highlight color (to emphasize text/elements – must be visible on white)
  • Subdued color (used in graphical controls, such as progress controls, to grey out areas)
  • Subdued text color (used on top of subdued color)
  • Success color (to show success, normally a shade of green)
  • Attention color (to warn/emphasize something in progress, normally a shade of
    orange)
  • Failure color (to show failure, normally a shade of red)
• Menu:
  • Menu bar background image (repeated; max height 27px)
  • Cart image (left aligned; no repeat; max size 350x75px)
• Page:
  • Title background-color
  • Title area background image
  • Title area text color
• Buttons:
  • Button background-color
  • Button text color
  • Button border-radius
• Service Catalog / Bundle elements:
  • Themed panel background color (themed panel used in service catalog, bundle, and
    login page)
  • Themed panel text color
  • Themed panel heading color
  • Themed panel border-color
  • Themed panel margin, size in px (recommended between 0 - 6)
  • Themed panel border-radius
  • Themed panel bullet image (max size 16x16px)
  • Carousel Background Image
• Notices:
  • Information message background-color
  • Information message text color
  • Alert message background-color
  • Alert message text color

All changes made here are retained post version upgrade.

Further explanations and tips can be found in the Front Office Theming Guide.

This article covers the following topics:

• Themes & Stylesheets: Advanced Use

• Custom JavaScript
• Menu
• Custom About Me

Themes & Stylesheets: Advanced Use

If the Theme page does not support the desired presentation, additional changes can be made via the Custom CSS tab. This will override the styles defined in the Biomni.css.

Certain features, e.g., the ‘Forgotten Password’ link on the login page, belong to a separate class and can therefore be hidden if required.

Any customizations made as Custom.CSS should be reviewed on upgrade to a new version, as new features may require further adjustment.

Custom JavaScript

This allows the creation of custom global JavaScript. Field values for all request field types are accessible via the JavaScript API. All Front Office pages are uniquely identifiable, which aids integration. The Custom JavaScript is outputted to the page before any Request Type custom JavaScript.

Menu

This tab allows the menu area contents to be specified, including the top bar replacement menu (IFrame) URL, and display of the Request List and Inbox.

Custom About Me

This section allows custom tabs to be added to the About Me page.