| Table of Contents |
|---|
...
| Role Type | Access to Theme Builder |
|---|---|
| System Administrator |  |
| Process Administrator | |
...
How do you access Theme Builder?
You can access Theme Builder from the Menu Icon. Click Theme Builder under Organization Management.
| Menu | |
|---|---|
| |
How do you create a Theme?
...
To create a new theme, click on Add a New Value.
| Theme Builder Page | |
|---|---|
|
Click Add.
| Theme Builder Page |
|---|
|
The Description field is required for all themes. This description is what appears when you select a theme from a search bar.
...
On the right-hand side, there is a preview. When you change any of the elements, it will change the preview, allowing you to see what it will look like, as well as guiding you through the customization process. You can hover over icons in order to see how the colors will change when a user hovers over icons.
| Theme Builder Page |
|---|
|
| Item # | Item Name | Description |
|---|---|---|
| 1 | Description | Required for all themes. This description is what appears when you select a theme from a search bar. |
| 2 | Configure Styles | Allows you to select the individual elements on the page that you wish to configure. The elements are grouped. |
| 3 | Live Preview | A preview of how the process will look once the selected changes are applied. |
How does Theme Driver work?
...
To change the Theme Driver, navigate to Organization Management through the Menu icon.
| Menu |
|---|
|
From the Organization Management page, Administrative Users are able to choose the 'Driver' for the theme. The driver is an attribute that will be used to apply different themes to certain users based on their driver attribute. If you wish to provide different themes depending on the Department of the user, you would select Department as your theme driver.
| Organization Management |
|---|
|
...
After choosing the attribute you wish to drive the theme for the users, create an Attribute Revision in order to attach your newly created themes to the appropriate attributes. In this example, we are adding our new theme to a particular department.
| Manage Revision |
|---|
|
Under the attribute for which you wish to apply a theme, select the Manage Attributes icon to the right of the attribute.
| Manage Department Attribute |
|---|
|
...
Under Revision Attributes, at the bottom of the page there are three fields. Default - Default Theme, Default Logo, and Mobile Logo. The Default Theme lets you choose from your custom themes and apply that theme to the specific attribute. Default Logo and Mobile Logo drive which logo that specific attribute is seen on the homepage, and in the top left corner of the navigation bar. If these fields are left empty, the default theme, logo and mobile logo defined in Organization Management is used. Note: An attribute that has multiple 'parent' nodes can inherit their themes as well. In the screenshot above, the Quality Assurance attribute can see the theme that was applied to Software Development and the ROOT node.
If any of the theme, logo and mobile logo are not defined in the whole hierarchy of the attributes (attribute and parent nodes), then they are picked from organization Management. For instance, if a theme is defined for a specific company attribute and logo is not defined, and then the invitation is created choosing that company attribute, the candidate's process picks up the theme defined in the Attribute Revision and logo from the Organization Management.
| Revision Attributes |
|---|
|
Save the changes to the attribute and apply the Attribute Revision in order to apply the theme changes.
| Revision Attributes Page | |
|---|---|
|
How do you apply a Theme from Organization Management?
To apply the theme from Organization Management, click on the Menu icon and navigate to Organization Management through the Menu icon. link in left navigation.
| Menu |
|---|
|
...
From the Organization Management Page, under Default Theme, select the theme you wish to apply. Click on the Default Theme lookup icon.
| Organization Management Page |
|---|
|
...
Select the theme you want to use from the list.
| Default Theme Look Up |
|---|
|
Click Save.
Note: If this is the first time saving in Organization Management, you must fill out the fields that have asterisks before them (also indicated by blue boxes below). To know more about these fields, see the Organization Management page.
Theme, logo and mobile logo are picked from the immediate parent of candidate's attribute id (company) if candidate's attribute is (company) does not have it; And they are picked from org management level if they are not found in the whole hierarchy of attributes.
| Organization Management |
|---|
|
...
How to configure theme styles?
Depending on the requirement different styles can be configured using the theme builder. Let's take a look at configuring each step.
Header
| Item Name | Accepted Values | Description |
|---|---|---|
| Header Height | Integer (in pixels) | Changes the height of the top navigation bar |
| Header Background Color | Hex Color Format | Changes the background color of the top navigation bar |
| Header Font Color | Hex Color Format | Changes the font color of the top navigation bar |
| Primary Icon Hover Color | Hex Color Format | Changes the font color of an item that is currently being hovered over on the top navigation bar |
Below is an example of what you can do with the Header Styles:
| Header |
|---|
|
Onboarding Navigation
Theme changes to the Onboarding Navigation affect what users see when they are completing the onboarding process.
| Item Name | Accepted Values | Description |
|---|---|---|
| Left Nav Background Color | Hex Color Format | Changes the background color of the left onboarding navigation page |
| Transaction Details Font Color | Hex Color Format | Changes the font color of the text on the left onboarding navigation page |
| Section Title Background Header | Hex Color Format | Changes the background color of the "Progress" and "Onboarding Tasks" section titles |
| Section Title Font Color | Hex Color Format | Changes the font color of the "Progress" and "Onboarding Tasks" section titles |
| Selected Activity Background Color | Hex Color Format | Changes the background color of the activity the user is currently working through |
| Selected Activity Font Color | Hex Color Format | Changes the font color of the activity the user is currently working through |
| Left Nav Status Color | Hex Color Format | Changes the color of the 'Lock' and 'Clock' icons on the left onboarding navigation page |
...
Below is an example of what you can do with onboarding navigation styles:
| Onboarding Navigation |
|---|
|
Form Controls
Theme changes to Form Controls are seen throughout the onboarding process.
| Item Name | Accepted Values | Description |
|---|---|---|
| Primary Font Color | Hex Color Format | Changes the primary font color. This also changes the color of Icons that appear throughout the onboarding system |
| Processing Image Color | Hex Color Format | Changes the color of the spinning icon that appears when a page is loading |
| Link Font Color | Hex Color Format | Changes the color of a hyperlink from the tradition blue to whatever you would like |
| Button Font Color | Hex Color Format | Changes the font color of a button that is not currently being hovered over |
| Button Background Color | Hex Color Format | Changes the background color of a button that is not currently being hovered over |
| Button Border Color | Hex Color Format | Changes the border color of a button that is not currently being hovered over |
| Button Hover Font Color | Hex Color Format | Changes the font color of a button that is currently being hovered over |
| Button Hover Background Color | Hex Color Format | Changes the background color of a button that is currently being hovered over |
| Button Hover Border Color | Hex Color Format | Changes the border color of a button that is currently being hovered over |
Below is an example of what you can do with Form Control styles:
| Form Controls |
|---|
|
Footer
Theme changes to Footer are seen throughout the onboarding process.
| Item Name | Accepted Values | Description |
|---|---|---|
| Footer Background Color | Hex Color Format | Changes the background color of the footer at the bottom of the page |
| Footer Font Color | Hex Color Format | Changes the font color of the footer at the bottom of the page |
...
Below is an example of what you can do with Footer styles:
| Footer | |
|---|---|
| |
Miscellaneous
Theme changes to Miscellaneous are seen on the Login Screen.
| Item Name | Accepted Values | Description |
|---|---|---|
| Login Logo Padding | Integer (in pixels) | Adds padding to the logo on the login page |
| Login Logo Background Color | Hex Color Format | Changes the background color of the logo on the login page |
| Login Logo Width | Integer (in pixels) | Changes the width of the logo on the login page |
...
Can users have multiple themes?
...
Users who have multiple themes applied to their account are able to switch between themes. Below example shows two different themes with different color and configuration styles. To differentiate, different descriptions are entered for each theme.
| Example - First Theme |
|---|
|
...
| Example - Second Theme |
|---|
|
...
In the Organization Management, specify Company as the Theme Driver and click Save.
|
Create an Attribute Revision to attach your newly created themes to the Company attribute. Select a value under Company attribute and click on Manage Attributes icon.
| Manage Attribute - Company = 'Research' |
|---|
|
...
Under Revision Attributes, click on the lookup icon of the Default Theme and choose one of your custom themes. Click Save.
| Change Theme on Revision Attributes page | |
|---|---|
|
Similarly, select another value under Company attribute and click on Manage Attributes icon.
| Manage Attribute - Company = 'Retail' |
|---|
|
...
Under Revision Attributes, click on the lookup icon of the Default Theme and choose your second custom theme. Click Save.
| Change Theme on Revision Attributes page |
|---|
|
...
On the Attribute Revision page, click Return to Manage Revision and apply the Attribute Revision.
...
After you log in, click on your user name on the top right corner of the navigation bar. You will notice Switch Theme option added to the drop-down list. Select Switch Theme from the list.
| Menu |
|---|
|
This will display the list of themes that you have created including the default that is currently in use. The default theme is displayed as My Organization [ Current ].
| Switch Theme |
|---|
|
...
Choose a theme from the list to switch to that theme.
...
|
You will notice the selected theme changes are applied to your Home Page. These changes are visible to all users that belong to that Company.
|
...
Similarly, switch to the other theme in the list.
...
|
You will notice the second theme changes are applied to your Home Page.
|
...
If you wish to switch back to your default theme, click on the My Organization link in the list.
...
|
...