Using Skins in the Self Service Portal
You can create multiple Skins for your vFire Self Service portal to display the logo, colors, fonts, and other distinctive brand features of your organization or various departments without having to manipulate HTML or CSS.
You can:
- Create multiple skins, so that you can display different systems differently
- Create and configure vFire Self Service submit and review screens
- Rebrand the vFire Self Service portal template page (banner, menu bar, navigation bar, headings, text format)
- Change the font, color, and style of screen widgets, buttons, and the menu panel
Menu items in the My Options menu pane can be hidden, added to, and reordered in Self Service Portal My Options in System Admin.
Creating a Skin
Two skins are provided with vFire Core: Default and Classic. Additional skins can be created. All skins can have their fonts, colors, banners, and widget styles redesigned.
Before you start
To work with Self Service portal skins using the Designer, you must have Designer selected in your General Access Security Role.
To maintain an audit trail of changes made to screens, forms and message templates, Designer must be selected in the Auditing window.
-
Display the Designer window if it is not already visible on screen.
Select
and then Admin.
From the submenu, select Designer.
This window consists of three tabs. They display different views:
Find a Screen Can be used to search for and work with specific screens, forms or message templates, as well as create new in-house screens View screens Displays details of currently selected screens and is used to modify screens Skins Enables you to create and modify skins for your vFire Self Service Portal(s) - Make the Skins tab uppermost
.
- Select the skin you want to clone from using the Skin drop down list in the top right corner of the window
.
- Press
at the bottom of the main pane.
- Enter a name for your new skin and press
.
- The new skin appears in the drop down list in the top right hand corner of the window and is ready to be redesigned.
- To rename the skin press
at the bottom of the main pane, enter the new name and press
.
- To delete the skin press
at the bottom of the main pane, enter the new name and press
.
If your system has multiple portal systems, you can apply a different skin to each one in Self Service Portal Systems in System Admin.
Redesigning a Skin
Before you start
You must have Designer selected in your General Access Security Role.
To maintain an audit trail of changes made to screens, forms and message templates, Designer must be selected in the Auditing window.
-
Display the Designer window if it is not already visible on screen.
Select
and then Admin.
From the submenu, select Designer.
This window consists of three tabs. They display different views:
Find a Screen Can be used to search for and work with specific screens, forms or message templates, as well as create new in-house screens View screens Displays details of currently selected screens and is used to modify screens Skins Enables you to create and modify skins for your vFire Self Service Portal(s) - Make the Skins tab uppermost
.
- Ensure that you are working on the correct skin by selecting from the drop down list in the top right corner of the window
.
- In the main part of the window, the Self Service Portal Template tab is uppermost
, and displays a preview of the skin and all of its elements.
- Select the element you want to modify, such as Global Font, Headings, Page Header, My Options, Widgets, and so on.
- Beneath the list of elements, you can see a list of styles you may edit for the selected element. For example:
- for Global Font, you can edit the Font Family, Font Color and Font Size
- for Page Header, you can edit the banner image, banner background, image alignment, and so on
- for All Widgets, you can edit Header Font family, color, size, and text spacing
- for Table Widgets, you can edit alternate row striping, and border, header, font, background, and row color
Use caution when selecting the largest available font sizes. On small browser windows, the largest font sizes may result in text truncating, wrapping, or displaying poorly.
- Select the new styles, using the drop down lists. To upload a new banner image, see the section below.
- Select
to view the changes.
- Select
at the bottom of the main pane to apply the changes, or
to revert to the original skin design. Key in the change reasons if prompted to do so.
Widget headers use the Lato font by default. However, Internet Explorer's default security settings prevent fonts from being downloaded, so the Lato font will appear as Arial unless the default setting in Internet Explorer is changed. This limitation does not extend to other browsers.
Uploading an Image for the Banner
By default, the Self Service portal banner displays the vFire logo but you can replace this with your own logo.
Before you start
You must have Designer selected in your General Access Security Role.
The image must be in a supported format. Designer supports JPEG, GIF, PNG, BMP and TIFF file formats.
To maintain an audit trail of changes made to screens, forms and message templates, Designer must be selected in the Auditing window.
-
Display the Designer window if it is not already visible on screen.
Select
and then Admin.
From the submenu, select Designer.
This window consists of three tabs. They display different views:
Find a Screen Can be used to search for and work with specific screens, forms or message templates, as well as create new in-house screens View screens Displays details of currently selected screens and is used to modify screens Skins Enables you to create and modify skins for your vFire Self Service Portal(s) - Make the Skins tab uppermost
.
- Ensure that you are working on the correct skin by selecting from the drop down list in the top right hand corner of the window
.
- In the main part of the window, the Self Service Portal Template tab is uppermost
, and displays a preview of the skin and all of its elements.
- Select Page Header in the list box
and complete the details, selecting
to preview the effect after each change:
- Select
to view the changes.
- Select
at the bottom of the main pane to apply the changes, or
to revert to the original portal template. Key in the change reasons if prompted to do so.
Banner Background Color | Select the color for the background from the drop down list |
Banner Minimum Height | Select the minimum height for the banner. If the image height and padding is larger than the selected value, the banner will automatically expand to accommodate. |
Banner Image Padding | Select the number of pixels to add as padding for the image. The image is centered within the padding. |
Show Main Image | Choose whether to show or hide the banner |
Main Image Alignment | Choose whether you want the logo to appear on the left or right hand side of the banner |
Banner Main Image | Select ![]() Select Open to see the name of the file in the field. |
Displaying the Self Service Portal Template History
Before you start
To view the history of changes to the Self Service portal using the Designer, you must have Designer selected in your General Access Security Role.
To maintain an audit trail of changes made to screens, forms and message templates, Designer must be selected in the Auditing window.
You can display the history of changes to the Self Service portal template, which will record the dates of changes, the nature of the change, and the analyst who made the changes.
-
Display the Designer window if it is not already visible on screen.
Select
and then Admin.
From the submenu, select Designer.
This window consists of three tabs. They display different views:
Find a Screen Can be used to search for and work with specific screens, forms or message templates, as well as create new in-house screens View screens Displays details of currently selected screens and is used to modify screens Skins Enables you to create and modify skins for your vFire Self Service Portal(s) - Make the Skins tab uppermost
.
- In the main panel, the Self Service Portal Template tab is uppermost. Select the Self Service Portal Template History.
- A list of changes is displayed, along with the name of the Analyst and the date of the changes. To see more details on any of the changes, click on the arrow to the left of their name
.
- If you wish to export the history to an Excel file for reporting or auditing purposes, select
at the bottom of the window and specify the file location in the Save As dialog box.