Theme

Learn more about ‘Theme‘ in ‘Adminstration‘

Theme – Logo

Steps

1. Navigate to the ‘Workbar’ and select the cog icon (Administration) 
2. You will be directed to the ‘Administration’ screen  
3. Select the ‘Theme‘ dropdown on the ‘LHS‘ (Left Hand Side)
4. Select the ‘Logo‘ tab
5. Select the ‘Image‘ that you would like to display in your ‘Workbar‘
6. Select the ‘Image‘ that you would like to display in your ‘Login Screen‘
7. Select the ‘Image‘ that you would like to display for your ‘Favicon‘
   

   Theme – Logo

Theme – Colours

Steps

1. Navigate to the ‘Workbar’ and select the cog icon (Administration) 
2. You will be directed to the ‘Administration’ screen  
3. Select the ‘Theme‘ dropdown on the ‘LHS‘ (Left Hand Side)
4. Select the ‘Colours‘ tab
5. Select the ‘Colour Scheme‘ of the existing ones you’ve already created
6. Configure a new ‘Colour Scheme‘:
   1. Input the ‘Colour Scheme Name‘
   2. Input the different ‘Colours‘ you want
   3. Choose to import a ‘Colour Scheme‘
7. Select ‘Save‘ or ‘Export Styles
   

   Theme – Colours

    

Theme – Fonts

Steps

1. Navigate to the ‘Workbar’ and select the cog icon (Administration) 
2. You will be directed to the ‘Administration’ screen  
3. Select the ‘Theme‘ dropdown on the ‘LHS‘ (Left Hand Side)
4. Select the ‘Fonts‘ tab
5. Input the following for the ‘Headings‘:
   1. Font family
   2. Font weight 
   3. Font size
6. Input the following for ‘Body‘:
   1. Font family
   2. Font weight 
   3. Font size
7. Select the ‘Font face‘ tab
8. Input the following:
   1. CSS font family
   2. Font style
   3. Font weight
   4. Add file
9. Add another item if required
10. Select ‘Save‘

Theme – Fonts

Theme – UI Styles

Steps

1. Navigate to the ‘Workbar’ and select the cog icon (Administration) 
2. You will be directed to the ‘Administration’ screen  
3. Select the ‘Theme‘ dropdown on the ‘LHS‘ (Left Hand Side)
4. Select the ‘UI Styles‘ tab
5. Select the ‘Elevation‘ and ‘Border-radius‘ you would like
6. Below you will be able to view the styles in ‘Real time‘
7. Select ‘Save‘

Theme – UI Styles

Theme – Footer

Steps

1. Navigate to the ‘Workbar’ and select the cog icon (Administration) 
2. You will be directed to the ‘Administration’ screen  
3. Select the ‘Theme‘ dropdown on the ‘LHS‘ (Left Hand Side)
4. Select the ‘Footer‘ tab
5. Select the ‘Add Footer‘ button
6. Here you will be presented with the ‘WYSIWYG‘ to configure your footer
   For more guidance on using the WYSIWYG options and Layout plugin
7. Once you have configured the ‘Footer‘ select whether or not to ‘Display footer‘
8. Select ‘Save‘

Theme – Footer

Theme – Widget Theme

Steps

1. Navigate to the ‘Workbar’ and select the cog icon (Administration) 
2. You will be directed to the ‘Administration’ screen  
3. Select the ‘Theme‘ dropdown on the ‘LHS‘ (Left Hand Side)
4. Select the ‘Widget Theme‘ tab
5. Select the relevant checkbox for whether the border colour appears at the top or bottom of the ‘pane title’
6. Select the ‘Border colour’ and ‘Border width‘
7. Input the widget title ‘Font weight‘ and ‘Colour‘
8. Add the ‘Card elevation‘ and ‘Border radius‘
9. Choose to ‘Export styles’ if you would like
10. Alternatively chose to ‘Import style‘
11. Select ‘Save‘
    

    Theme – Widget Theme

     

Theme – Phone Apps

Steps

1. Navigate to the ‘Workbar’ and select the cog icon (Administration) 
2. You will be directed to the ‘Administration’ screen  
3. Select the ‘Theme‘ dropdown on the ‘LHS‘ (Left Hand Side)
4. Select the ‘Phone Apps‘ tab
5. Select the ‘PWA Home Screen Icon‘ tab
6. Here you will be required to add your company ‘logos‘
7. Add the ‘large‘ size logo – 512px X 512px
8. Add the ‘medium‘ size logo – 192px X 192px
9. Add the ‘small‘ size logo – 144px X 144x
10. Add the ‘SVG‘ logo
11. Select ‘Save‘
    

    Theme – Phone Apps

Theme – Wallpaper

Steps

1. Navigate to the ‘Workbar’ and select the cog icon (Administration) 
2. You will be directed to the ‘Administration’ screen  
3. Select the ‘Theme‘ dropdown on the ‘LHS‘ (Left Hand Side)
4. Select the ‘Wallpaper‘ tab
5. Add the ‘Workbar and main menu image‘
6. Note: follow the best practise guide for the best result
7. Add the ‘Background image‘
8. Note: follow the best practise guide for the best result
9. Select ‘Save‘
   

   Theme – Wallpaper

    

Steps

1. Navigate to the ‘Workbar’ and select the cog icon (Administration) 
2. You will be directed to the ‘Administration’ screen  
3. Select the ‘Theme‘ dropdown on the ‘LHS‘ (Left Hand Side)
4. Select the ‘Widget Theme‘ tab
5. Select the relevant ‘Checkboxes’ 
6. Input the relevant ‘Border Width’ and ‘Border Colour’
7. Input the ‘Font Weight’ and ‘Font Colour’ for ‘Widget title font’
8. Select the ‘Elevation‘ and ‘Border-radius‘ you would like
9. Below you will be able to view the styles in ‘Real time‘
10. Select ‘Save‘

Theme – Widget Theme

Steps

1. Navigate to the ‘Workbar’ and select the cog icon (Administration) 
2. You will be directed to the ‘Administration’ screen  
3. Select the ‘Theme‘ dropdown on the ‘LHS‘ (Left Hand Side)
4. Select the ‘Phone Apps‘ tab
5. TBC

Steps

1. Navigate to the ‘Workbar’ and select the cog icon (Administration) 
2. You will be directed to the ‘Administration’ screen  
3. Select the ‘Theme‘ dropdown on the ‘LHS‘ (Left Hand Side)
4. Select the ‘Wallpaper‘ tab
5. Add the ‘Image’ you would like to display for the ‘Workbar‘ and ‘Main Menu‘
6. Add the ‘Image’ you would like to display for the ‘Background image‘
7. Select ‘Save‘

Theme – Wallpaper

Wallpaper sample files:

Workbar

Background

Footer