ApplikationAdmin ApplicationThemes

From Pro 9 Wiki
Jump to navigation Jump to search

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
Retrieved from "http://wiki.proopti.com/Pro9/index.php?title=ApplikationAdmin_ApplicationThemes&oldid=12820"