/
.Organization Theme Builder v1.5

.Organization Theme Builder v1.5

 

What is Theme Builder?

Theme Builder is a tool that allows you to control the color and style of the Smart Onboarding system.  Through the Theme Builder, System Administrators and Process Administrators are able to change the the color of webpage elements in order to match the company branding. Themes for users can be dependent on their Company, Department, Location, or Business Unit. Users who have multiple themes applied to their account are able to switch between themes to their liking. 

Who can access the Theme Builder?

System Administrators and Process Administrators are the two roles that are allowed to use the Theme Builder Function.

Role TypeAccess to Theme Builder
System Administrator(tick)
Process Administrator(tick)
Content Administrator(error)
HR Specialist(error)

HR Help Desk

(error)
E-Verify Specialist(error)
I-9 Specialist(error)

 

How do you access the Theme Builder?

You can access the Theme Builder from the Menu Icon.  Under Misc. Setup select Theme Builder.

Menu

 


How do you create a Theme?

The first step to Theme Builder is to create a new theme. You won't be able to modify the delivered theme, however, you are able to create as many themes as you wish.

To create a new theme, click on Add a New Value.

Theme Builder Page

 

 

Click on 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.

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

On the right-hand side, there is a preview. When you change any of the elements, it will change the preview, allowing you to visually understand 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 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 PreviewA preview of how the process will look once the selected changes are applied.

How does Theme Driver work?

The Theme Driver is what allows the Administrative Users to chose the criteria in 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 chose 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 chosing the attribute you wish to drive the theme for the users, create a Process Revisions in order to attach your newly created themes to the appropriate attributes.  For this example, we will be adding our new theme to a particular department.

Manage Revision

 

 

Under the attribute 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 new fields.  Default theme, Default Logo, and Mobile Logo.  The Default Theme will let you chose from your custom themes and apply that theme to the specific attribute.  Default Logo and Mobile Logo drive which logo that specific attribute will see both on the homepage, and in the top left corner of the navigavtion bar.  If these fields are left empty, they will use the default theme defined in Organization Management.  Note:  an attribute that has multiple 'parent' nodes will also be able to inherit their themes as well.  In the screenshot above, the Quality Assurance attribute will also be able to see the theme that was applied to Software Development and the ROOT node. 

 

 

 

 

Save the changes to the attribute and Apply the Process revision in order to apply the theme changes.

How do you apply a Theme?

To apply the theme, navigate to Organization Management through the Menu Icon. 

Menu

 

 

From the Organization Management Page, under Default theme, select the theme you wish to apply.

Organization Management Page

 

 

Select the theme you want to use from the list.

Look Up Default Theme Box

 

 

Click on Save.

Note: If this is the first time saving in Organization Management, you must fill out the fields that have aesterisks before them (also indicated by blue boxes below). To know more about these fields, see the Organization Management page.

 

 

 

Sign out for the changes to take place.

Configure Styles - Header

Item NameAccepted ValuesDescription
Header HeightInteger (in pixels)Changes the height of the top navigation bar
Header Background ColorHex Color FormatChanges the background color of the top navigation bar
Header Font ColorHex Color FormatChanges the font color of the top navigation bar
Primary Icon Hover ColorHex Color FormatChanges the font color of an item that is currently being hovered over on the top navigation bar

 

This is an example of what you can do with the Header Styles:

Configure Styles - Header

 

 

Configure Styles - Onboarding Navigation

Theme changes to the Onboarding Navigation will only affect what users will see when they are completing the onboarding process.  None of these style changes will be seen after they are done with this process.

 

Item NameAccepted ValuesDescription
Left Nav Background ColorHex Color FormatChanges the background color of the left onboarding navigation page
Transaction Details Font ColorHex Color FormatChanges the font color of the text on the left onboarding navigation page
Section Title Background HeaderHex Color FormatChanges the background color of the "Progress" and "Onboarding Tasks" section titles
Section Title Font ColorHex Color FormatChanges the font color of the "Progress" and "Onboarding Tasks" section titles
Selected Activity Background ColorHex Color FormatChanges the background color of the activity the user is currently working through
Selected Activity Font ColorHex Color FormatChanges the font color of the activity the user is currently working through
Left Nav Status ColorHex Color FormatChanges the color of the 'Lock' and 'Clock' icons on the left onboarding navigation page

 

This is an example of what you can do with onboarding navigation styles:

Configure Styles - Onboarding Navigation

 

 

Configure Styles - Form Controls

Theme changes to Form Controls will be seen all throughout the onboarding process.

 

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

 

this is an example of what you can do with Form Control styles:

Configure Styles - Form Controls

 

 

Configure Styles - Footer

heme changes to Footer will be seen all throughout the onboarding process.

 

Item NameAccepted ValuesDescription
Footer Background ColorHex Color FormatChanges the background color of the footer at the bottom of the page
Footer Font ColorHex Color FormatChanges the font color of the footer at the bottom of the page

 

this is an example of what you can do with Form Control styles:

Configure Styles - Footer

 

Configure Styles - Miscellaneous

Theme changes to Miscellaneous will be seen on the Login Screen.

 

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

 

 

 
 



© Smart ERP Solutions, Inc.