Theming Guide

Front Office can be themed in two different ways, within the admin area the Theme Management page can be utilized to set colors and images used across a large part of the site; alternatively, custom CSS can be added as a local override on the Custom CSS tab (previously Z-Override).

Theming within the Front Office admin area has the advantage of being more robust across versions because theme settings (colors, images, and other options) will be applied to new areas in future versions and carried forward in an upgrade. By contrast, custom CSS, while more powerful, will be potentially more fragile and may need expert knowledge to bring them forward to new versions.

Custom CSS is beyond the scope of this document; this document will focus on what can be achieved with the identified theme options in the first tab of the Themes page within Front Office.

This articles covers the following topics

• The Administration Theme Page
• Page width and effects on design
• Theme Settings vs Page Elements
• Themeing Guidance

The Administration Theme Page

The Theme page can be accessed via Administration > Settings > Theme. It has the following tabs: Styles, Custom CSS, Custom Javascript, Menu, and Custom About Me.

Import/Export

This option provides a quick way to backup and restore a theme, or, to move settings between systems, such as from UAT to Production systems. Images are not exported, only their URL, so any uploaded images will need to be moved separately. This plain text copy and paste facility also allows quick editing, where color and other settings are known. NB any invalid values found on import are ignored.

Revert to Default

This option, available across the whole theme via the button at the top of the page, or on a setting-by-setting basis, will set all the theme properties back to the original defaults.

A Note on Multi-Tenant Systems

In a Front Office system that has been Multi-Tenant enabled, different tenants may have different theme settings, enabling each tenant to have unique branding. The main difference when editing a Tenant theme is that the ‘Revert to Default’ options will return the settings to the Service Provider settings.

Theme Settings

The bulk of the Theme page is taken up by the individual Theme Settings. Specific named settings will be referred to in italics, for example, Primary Color.

Types of Theme Settings

Color Pickers

Color Pickers allow the selection of the color of an element or set of elements.

The first tab provides a suggested palette to pick from; subsequent tabs provide different color models and the ability to paste in an HTML-style hex value to set a color.

Number Pickers

Number Pickers allow setting numerical sizes. These are used when setting the size of an element and are normally in pixel units.

Image Pickers

Image Pickers allow selection from a range of shipped images, or the ability to upload an image into Front Office. When uploading images, it is good practice to adhere to the recommended sizes, as this will help with page load times and make the theme more consistent across different browsers.

Other/Dropdowns

Other theme options, such as turning features on / off are presented as dropdowns.

Page width and effects on design

One of the most important single-theme properties is the Page Width option. It is important to consider this setting value before making too many changes to the other settings.

Width constraint allows the contents of Front Office to be limited to given widths, which makes designing images for use in a theme much easier and prevents the site from looking empty and stretched on large high-resolution monitors. There are three options:

Width 1024px

(An example of Front Office constrained to 1024 pixels)

The page width is set for a 1024-pixel wide screen (the actual content width is slightly lower; 1000 pixels to allow for vertical scroll bars). The banner will display across the full width of the screen.

This is the standard setting for most websites, as it allows for images to be created at a fixed width, assured that they should display the same across all browsers and tablets. Front Office will default to this width and it should only be changed with caution.

The content area of Front Office with this option set will not vary at all; this is the easiest setting to design for.

Width 1024px to 1366px

(An example of Front Office when allowed to expand to1366 pixels wide.)

The page width can adjust between 1024 pixels wide and 1366 pixels wide. This allows some flexibility for users with larger screens to make better use of the available space without the design challenges of a completely unconstrained site. It requires some consideration when creating images. Images that vary in width, such as those used in the service catalog carousel, need to be wide enough to fill a 1366 pixel screen, but still look good when cropped down for a 1024 pixel screen.

In the example below, a checkerboard background image has been applied to the category background. The green areas will always be visible, but the grey areas will be obscured on smaller screen sizes, as illustrated.

(Above a 1366-pixel width display vs. below the same image on a 1024-pixel width display, the grey area of the image is obscured, so care must be taken not to place important elements there.)

In practice, all images will need to be designed if this option is selected.

Width Unconstrained

(When the width is unconstrained, as shown here on a 2560 x 1440 screen, content may be stretched unpleasantly.)

When the width is set to unconstrain the content area can expand as wide as possible to fill the available space. This will almost certainly result in a poor experience on high-resolution screens because not only will images repeat or not cover whole areas, sentences and paragraphs will be very wide and difficult to read across wide spaces. This setting is not recommended for use except in exceptional circumstances.

Theme Settings vs. Page Elements

There are many options on the Theme page that apply to more than one area, so this document is not an exhaustive list of what options apply where, but rather a guide to setting good options that will work throughout Front Office.

For instance, the Theme page has a setting for Primary Color; this color is mainly used on the menu bar across the top of the page but is also used on popup windows and property boxes. These are all rolled into one setting to keep the number of options to a manageable level. This option is intended to be set to a color that is significant for the whole theme.

Often color settings are accompanied by a “Color X Text Color” setting, this is so that text can be set to be readable. When Images are used for areas that contain text, care should be taken that the text color is appropriate to be placed on that image but also that the “Color” and “Color Text Color” options still display correctly as some areas of the system may only use the Colors and not the image. In general, image settings are applied to one very specific area, but colors are used in several places.

Theming Guidance

This document will focus on the Front Office home page, which can be split into several areas.

Header

Relevant Theme Options: Header Background Image, Header Background Color, Header Text Color.

Height: 75 pixels.

Width: Matches the Page Width Constrained setting.

Any image specified as Header Background Image will be aligned to the top of the page and repeated horizontally across the page.

All main header settings also apply to the Logo area of the header.

A top bar override (IFrame) can be set in the Settings tab; the height of the top frame can be set here also: Top Bar IFrame height.

Logo

Relevant Theme Options: Header Logo Image.

Width: 350 pixels, recommended maximum.

Height: 75 pixels, maximum.

The logo is aligned to the top left corner of the page. While the logo can be wider than 350 pixels, it will start overrunning the rest of the elements past this size.

Page Outer

Relevant Theme Options: Page outer color, Page outer background image, Make pages transparent when supported, Color for text on page background.

The outer page area can be set to a color or a background. When ‘Make pages transparent when supported’ is enabled the page outer color or background will be displayed behind the page content

If enabling transparency, the ‘Color for text on page background’ must be set to a color that contrasts well with the whole of the background, no matter whether it is a color or image.

Menu

Relevant Theme Options: Primary Color, Primary Text Color, Menu Bar background image, Menu Bar
basket icon

Width: Matches the Page Width Constrained setting.

Height: 27 pixels

The Menu bar is displayed by default as a solid color with text. If adding a Menu Bar background image care should be taken that the Primary Color and Primary Text Color settings still complement each other because they will be used in other areas of the system without the Menu Bar background image.

The menu can be hidden entirely in the Theme, Settings tab.

Title Area

Relevant Theme Options: Title Area Background Color, Title Area Background Image, Title Area Text Color.

Width: Matches the Page Width Constrained setting.

Height: 35 to 70 pixels. 

The title area content varies on a page-by-page basis. Typically, it is 35 pixels high, but it can expand to up to 70 pixels on certain pages.

(A Larger page title containing Product Rating information during the request process, which can be up to 70 pixels tall.)

Any image set as the Title Area Background Image will be repeated across the top edge of the title area. Any vertical space not covered by the image will show the Title Area Background Color.

(Here the page title has been given a background color and a white gradient image applied, the text has also been switched to white.)

Themed Panels

Relevant Theme Options: Themed panel background color, Themed panel text color, Themed panel heading color, Themed panel border color, Themed panel border radius, Themed panel bullet image

Width: varies.

Height: varies.

Themed Panels are primarily used in the Service Catalog but can be seen in other areas too, for instance, the login page.

Themed Panels do not include any image settings, so their variable size is less of a consideration at this stage. When creating content for the Service Catalog, images can be added to individual panels, but that is beyond the scope of this document.

Color

The four-color options for Themed Panels (Themed panel background color, Themed panel text color, Themed panel heading color, Themed panel border color) are self-explanatory. If no border is required, then the border should be set to the same color as the background.

(A plain Panel using different colors for each element. )

(By setting Border Color to match the background we remove the border.)

The border on Themed Panels is 1 pixel wide.

Border Radius

There are 3 selectable levels of Border Radius.

Small will just remove the very tips of corners and can be used to slightly soften a sharp themed panel. Medium will noticeably round the edges, and Large will create a larger corner.

(From left to right, Small, Medium, and Large Border Radius.)

Carousel

Relevant Theme Options: Secondary Color, Secondary Text Color, Carousel Background Image, Themed panel border radius, Highlight Color.

The Carousel is made up of either two menus (one on each side) or a single menu (on one side) and a content area. Secondary Color and Secondary Text Color is applied to the menu(s) and provides a small border to the top and bottom of the carousel. The Highlight Color is used for the menu item currently selected. Themed panel border radius and Themed panel drop shadow are both applied to the carousel.

Highlight Color

Highlight Color requires special consideration; it is used in many places across Front Office to pick a menu item out or to draw the eye to an action the user should take. There is no setting for text on top of the highlight color, but it needs to contrast well with white.

(A Highlight Color of red contrasts with a green carousel and allows its white text to be clear and readable.)

Carousel Background Image

Width: 180 or 360 pixels.

Height: 250 pixels.

The Carousel Background Image is displayed behind the left and right menus of the carousel. The image is displayed twice behind each menu, left-aligned on the left, and right-aligned on the right. It is also repeated vertically. This means that if you specify an image with a width of 180 pixels it will display on both sides, if you use an image of 360 pixels only half of the image will display on each side. For example, the following image has different effects on each half:

On setting this as the Carousels background, it appears there are different backgrounds for each of the
Carousels menus:

Content Width

While the content of a carousel cannot be given a background image, the Page Width Constrained setting has a significant effect on images set there within the Service Catalog. When selecting images, the following widths may be useful.

Request Summary Milestones

Relevant Theme Settings: Secondary Color, Secondary Text, Subdued Color, Subdues Text Color, Success Color, Warning Color, Failure Color.

Secondary color and text are applied to active or completed milestones in the Request Summary.
Subdued color and text are applied to inactive milestones. Success, Warning, and Failure colors are
used in both the milestones and on the approval page.

Buttons

Relevant Theme Settings: Button background color, Button text color, Button border radius, Highlight
Color

Width: Variable.

Height: 27 pixels or 54 pixels.

Button theming applies across all the Front Office site. Care should be taken not to leave buttons in an unreadable state. For reference, the “Revert to Default” button is the middle button at the top right of the Theme page.

Button Colors

Buttons have two colors that can be set: Button background color and Button text color. As you would expect, they need to be kept readable with good contrast between them.

The background color will be darkened slightly as a user ‘presses’ a button.

Highlight Color

Highlight Color is a theme-wide setting that also affects buttons. To draw attention to a particularly important button on a page it will be displayed with the Highlight Color as its background.

This means that these highlighted buttons will ignore button background images and have white text, as white is always used against the Highlight Color.

(An orange Highlight Color picks out this Submit Request button from other buttons. )

Border Radius

Button Border Radius may also be applied to buttons, from none, small, medium, or large.

(From left to right: none, small, medium, and large button border radius.)