ApplikationAdmin ApplicationThemes

Application Theme

Application branding is an option to add a new common theme or multiple themes available to choose from on user level. Option possible to brand logo, font (style & size) and colors.

Under my account -> themes it is possible for the user to select application theme, please contact Servicedesk to activate the theme panel.

How to - Show Application Theme

1. Click the role Application Maintenance
2. Click Custom configuration > Application Theme

   • The view application theme is shown

How to - Create a New Application Theme

1. Select new theme in the drop-down list current theme
2. Enter a theme name
3. Copy settings from another application theme or select - blank -

   • Use e.g. when you want to create a new theme with a minor change from an existing theme

4. Check the default theme box if you want to set the theme as default

   • The default theme is applied to all users that don´t have a personal theme the next time they logon to Pro 9

5. Select settings for logo, buttons, top toolbar, controls, grid, text and sidebar, description below
6. Click save

Note: The maximum logo size is 215*30 px (the default logo size is 60*22 px)

How to - Edit Application Themes

1. Select theme to edit in the drop-down list current theme
2. Change the theme name if needed
3. Copy settings from another application theme if needed
4. Check/uncheck the default theme box if needed

   • The default theme is applied to all users that don´t have a personal theme the next time they logon to Pro 9

5. Edit settings for logo, buttons, top toolbar, controls, grid, text and sidebar if needed, description below
6. Click save

How to - Edit Top Toolbar

1. Select logo file name with company logo

   • Click choose file to select a file from your local computer

2. Select top toolbar background color

   • Select in chart

   - or -

   • Add a color code

3. Select top toolbar title text color

   • Select in chart

   - or -

   • Add a color code

4. Select top toolbar icons color

   • Select in chart

   - or -

   • Add a color code

How to - Edit Sidebar

1. Select sidebar background color

   • Select in chart

   - or -

   • Add a color code

2. Select extended sidebar background color

   • Select in chart

   - or -

   • Add a color code

3. Select my favorite sidebar background color

   • Select in chart

   - or -

   • Add a color code

4. Select sidebar text color

   • Select in chart

   - or -

   • Add a color code

5. Select extended sidebar text color

   • Select in chart

   - or -

   • Add a color code

6. Select favorite extended sidebar text color

   • Select in chart

   - or -

   • Add a color code

7. Select sidebar text font in the drop-down list
8. Select sidebar icons color

   • Select in chart

   - or -

   • Add a color code

9. Select sidebar top icons color

   • Select in chart

   - or -

   • Add a color code

10. Select sidebar dividers/borders color

    • Select in chart

    - or -

    • Add a color code

11. Select sidebar footer background color

    • Select in chart

    - or -

    • Add a color code

12. Select sidebar footer text color

    • Select in chart

    - or -

    • Add a color code

How to - Edit Menu

1. Dropdown menu
   1. Select dropdown menu color

      • Select in chart

      - or -

      • Add a color code

   2. Select toolbar Icons menu color

      • Select in chart

      - or -

      • Add a color code

   3. Select toolbar icons menu label color

      • Select in chart

      - or -

      • Add a color code

   4. Select action drop background color

      • Select in chart

      - or -

      • Add a color code

   5. Select action drop hover text color

      • Select in chart

      - or -

      • Add a color code

   6. Select action drop sub menu color

      • Select in chart

      - or -

      • Add a color code

2. Search
   1. Select filter menu background color

      • Select in chart

      - or -

      • Add a color code

   2. Select search labels text color

      • Select in chart

      - or -

      • Add a color code

   3. Select search menu borders color

      • Select in chart

      - or -

      • Add a color code

   4. Select search menu text color

      • Select in chart

      - or -

      • Add a color code

How to - Edit Activity Panel

1. Select header background color

   • Select in chart

   - or -

   • Add a color code

2. Select header text/icons color

   • Select in chart

   - or -

   • Add a color code

3. Select active-tab underline color

   • Select in chart

   - or -

   • Add a color code

4. Select background color

   • Select in chart

   - or -

   • Add a color code

5. Select expanded background color

   • Select in chart

   - or -

   • Add a color code

6. Select dividers color

   • Select in chart

   - or -

   • Add a color code

7. Select activity Icons color

   • Select in chart

   - or -

   • Add a color code

How to - Edit Controls

1. Buttons
   1. Select button background color

      • Select in chart

      - or -

      • Add a color code

   2. Select button hover color

      • Select in chart

      - or -

      • Add a color code

   3. Select button text color

      • Select in chart

      - or -

      • Add a color code

2. Back to top
   1. Select back to top icon color

      • Select in chart

      - or -

      • Add a color code

   2. Select back to top icon hover color

      • Select in chart

      - or -

      • Add a color code

   3. Select back to top icon background color

      • Select in chart

      - or -

      • Add a color code

3. Two lists
   1. Select two lists background color

      • Select in chart

      - or -

      • Add a color code

   2. Select two lists text color

      • Select in chart

      - or -

      • Add a color code

4. Tabs
   1. Select active tab underline color

      • Select in chart

      - or -

      • Add a color code

   2. Select active tab text color

      • Select in chart

      - or -

      • Add a color code

   3. Select in-active tab text color

      • Select in chart

      - or -

      • Add a color code

5. Dropdown list
   1. Select dropdown list background color

      • Select in chart

      - or -

      • Add a color code

   2. Select dropdown list text color

      • Select in chart

      - or -

      • Add a color code

6. Textbox
   1. Select textbox input text color

      • Select in chart

      - or -

      • Add a color code

   2. Select textbox background color

      • Select in chart

      - or -

      • Add a color code

   3. Select textbox borders color

      • Select in chart

      - or -

      • Add a color code

   4. Select textbox focused borders color

      • Select in chart

      - or -

      • Add a color code

7. Checkbox
   1. Select checkbox borders color

      • Select in chart

      - or -

      • Add a color code

   2. Select checkbox checked sign color

      • Select in chart

      - or -

      • Add a color code

8. Others
   1. Select datepicker background color

      • Select in chart

      - or -

      • Add a color code

   2. Select information text color

      • Select in chart

      - or -

      • Add a color code

   3. Select information text background color

      • Select in chart

      - or -

      • Add a color code

   4. Select copy to clipboard icon color

      • Select in chart

      - or -

      • Add a color code

How to - Edit Grid

1. Select paging text color

   • Select in chart

   - or -

   • Add a color code

2. Select main body background color

   • Select in chart

   - or -

   • Add a color code

3. Select grid odd rows color

   • Select in chart

   - or -

   • Add a color code

4. Select grid top/bottom borders color

   • Select in chart

   - or -

   • Add a color code

5. Select grid sub panel borders color

   • Select in chart

   - or -

   • Add a color code

How to - Edit Text

1. Select heading color text color

   • Select in chart

   - or -

   • Add a color code

2. Select application body font in drop-down list
3. Select heading text style

   • None - Default heading text style capitalize is selected
   • Uppercase - If you want uppercase letters in heading text style
   • Lowercase - If you want lowercase letters in heading text style
   • Capitalize - If you want first letter in heading text style to be uppercase followed by lowercase letters

4. Select link color color

   • Select in chart

   - or -

   • Add a color code

5. Select link focused color

   • Select in chart

   - or -

   • Add a color code

6. Select descriptive text color

   • Select in chart

   - or -

   • Add a color code

7. Select label color color

   • Select in chart

   - or -

   • Add a color code