Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

...

Theme Builder is a tool that allows you to control the colors and styles used in the Smart Onboarding system.  Through Theme Builder, System Administrators and Process Administrators can change the color of web page elements in order to match their company branding. Themes for users can be dependent on their Company, Department, Location, or Business Unit. 

Who can access the Theme Builder page?

System Administrators and Process Administrators are the two roles that can access Theme Builder.

...

Users with the System Administrator or Process Administrator roles can access the Theme Builder page.

How do you access the Theme Builder page?

You can access Theme Builder from the Menu Icon. Click Theme Builder under Organization Managementthe menu icon on the left. Click on the "Theme Builder" link under Organization Management from the navigation menu.

Menu



How do you create a Theme?

The first step to Theme Builder is to create a new theme. You cannot modify the delivered theme, but you can create as many themes as you wish.

To create a new theme, click on the "Add a New Value" button on the Theme Builder page. 

Theme Builder Page



Click the "Add" button.

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.

Under Configure Styles, click on the different elements' names or arrows and customize the colors of your theme.

...

Item #Item NameDescription
1DescriptionRequired for all themes.  This description is what appears when you select a theme from a search bar.
2Configure StylesAllows you to select the individual elements on the page that you wish to configure. The elements are grouped.
3Live Header and Form Controls PreviewA preview of how the process will look once the selected changes are applied.


How does the Theme Driver work?

The Theme Driver allows Administrative Users to choose the criteria with which the new theme will be displayed.  Themes for users can be driven by their Company, Department, Location, or Business Unit.  It may make sense for an organization to have a different theme for users depending on their Location attribute, in which case you can have custom themes for each Location.

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 the 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  

In this example, we are adding our new theme to a particular department.

...

Under the attribute for which you wish to apply a theme, select the the "Manage Attributes" icon to the right of the attribute.

...

Under Revision Attributes, at the bottom of the page there are three fields - 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 Default Logo and Mobile Logo lets you choose the homepage logo for that department.  If (Note: Default Logo and Mobile Logo are the images added in your system through Content Revision. For instructions on adding images in your system, please click here)

If these fields are left empty, the default theme, default logo and mobile logo defined in Organization Management is considered. Note:  An attribute that has multiple 'parent' nodes can inherit their themes as well.  If theme/logo is not specified in the Revision Attribute and the parent node has them defined, then the attribute will inherit theme/logo from their parent nodes. In the above example, the Quality Assurance attribute can have the theme that was applied to Software Development and the ROOT node if it is not defined in the Revision Attributes.

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 up from organization the 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 uses the theme defined in the Attribute Revision and logo from the Organization Management.

Revision Attributes



Save the changes made 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 the Organization Management?

To apply the theme from Organization Management, click on the Menu icon Click on the menu icon on the left and navigate to the Organization Management link in left the navigation menu.

Menu



From the Organization Management Page, under Default Theme, select the default theme you wish to apply. Click on the Default Theme lookup icon.

...

Select the theme you want to use from the list.

Default Theme Look Up



Click SaveClick "Save" on the Organization Management page.

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.

Default Theme, default logo and mobile logo are picked from the immediate parent of candidate's attribute id (company/department) if candidate's attribute (company/department) does not have it; And they are picked from org management Organization Management level if they are not found in the whole hierarchy of attributes.

...

Item NameAccepted ValuesDescription
Primary Font ColorHex Color FormatChanges the primary font color. This also changes the color of Icons that appear throughout the onboarding system
Processing Image ColorHex Color FormatChanges the color of the spinning icon that appears when a page is loading
Link Font ColorHex Color FormatChanges the color of a hyperlink from the tradition blue to whatever you would like
Button Font ColorHex Color FormatChanges the font color of a button that is not currently being hovered over
Button Background ColorHex Color FormatChanges the background color of a button that is not currently being hovered over
Button Border ColorHex Color FormatChanges the border color of a button that is not currently being hovered over
Button Hover Font ColorHex Color FormatChanges the font color of a button that is currently being hovered over
Button Hover Background ColorHex Color FormatChanges the background color of a button that is currently being hovered over
Button Hover Border ColorHex Color FormatChanges the border color of a button that is currently being hovered over

...

Item NameAccepted ValuesDescription
Login Page Left Panel Background ColorHex Color FormatChanges the background color of the left panel on the login page
Login Page Left Panel Font ColorHex Color FormatChanges the font color of the left panel on the login page
Login Page Logo PaddingInteger (in pixels)Adds padding to the logo on the login page
Login page Logo background ColorHex Color FormatChanges the background color of the logo on the login page
Login Page Logo WidthInteger (in pixels)Changes the width of the logo on the login page



Image RemovedImage Added



The login page with the above values in the Miscellaneous section looks like below:


Image RemovedImage Added



i) When 'Login Page Left Panel Background Color' is modified:


Image RemovedImage Added



The background color of the left panel on the login page changes as shown below:


Image RemovedImage Added



When 'Login Page Left Panel Background Color' field is left blank, the following error message shows on the page:


Image RemovedImage Added



ii) When 'Login Page Left Panel Font Color' is modified:

Image Removed

Image Added



The font color of the left panel on the login page changes as shown below:


Image RemovedImage Added



iii) When 'Login Page Logo Padding' is modified:


Image RemovedImage Added



The padding to the logo on the login page changes:


Image RemovedImage Added



iv) When 'Login page Logo background Color' is modified:


Image RemovedImage Added



The background color of the logo on the login page changes as shown below:


Image RemovedImage Added



v) When 'Login Page Logo Width' is modified:


Image RemovedImage Added



The width of the logo on the login page changes as given below:


Image RemovedImage Added



Can users have multiple themes?

...

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 the "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 the "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 Click "Save".

Change Theme on Revision Attributes page


...

On the Attribute Revision page, click 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 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 Pagehomepage. These changes are visible to all users that belong to that Company.

...

You will notice the second theme changes are applied to your Home Pagehomepage.




If you wish to switch back to your default theme, click on the "My Organization [ Current ]" link in the list.


Image RemovedImage Added