Service Panel uses a Google's material design library, laid on top of the bootstrap UI framework. The colors, logo, and icons used within Service Panel are fully customizable. The overall layout and input look and feel is inherited from the design frameworks.
Advanced customization is possible, but requires modifications to layout templates and stylesheets. However, for most scenarios the built-in theme customization is sufficient.
Navigate to Settings -> Service Panel -> Theme to configure the look and feel of Service Panel.
If this is the first time configuring service panel, press the "Save" icon to initialize Service Panel Settings. If this step is skipped an error will occur when the logo is uploaded.
Click Upload Logo to choose a custom logo for Service Panel.
The chosen logo file may be a .PNG, .GIF, or .JPG format, and must be no more than 100KB in size. When viewed on service panel the logo will be displayed 52px high, and up to 250px wide. The recommended logo size is a minimum of 104px in height, and proportional width to allow for proper appearance on high resolution displays.
Service Panel also allows seven theme colors to be customized. These colors control things like the main layout colors, loading and other icons, and info and alert messages.
It is not necessary to override all colors. For example, you may choose to override just the primary color and leave all others as default.
To override a color, press the "+ New" button under Theme Colors. Choose from the dropdown which color is being specified, then enter the hexadecimal value (including hashmark).
The available colors are:
- Primary – The main color used for menu bars, link, icons, etc. (default blue)
- Secondary – Alternate color used for loader bars and other smaller UI elements. (default yellow)
- Accent – Accent color for input elements (default bright yellow)
- Error – Color for error alerts, messages, and validation errors (default red)
- Info – Color for informational alerts and messages (default blue)
- Success – Color for success alerts and messages (default green)
- Warning – Color for warning alerts and messages (default orange)
In addition to their use within the underlying design framework, all named theme colors may be used to customize the color of icons, text, and input elements on service forms.
For convenience, the theme help prompt includes a link to the Material Design color palette. It is not required that you choose colors from this palette, but it provides helpful guidelines for designing a theme. You may use the Material Theme editor to help ensure that the selected Primary/Secondary/Accent colors meet accessibility guidelines.
The final two theme settings are:
Application Title: Control the name of the application that is added to the header. Default is "Service Panel". This field may also be set to an empty string if only a logo is desired.
Dark Theme: Optional checkbox to switch the theme to a light text on dark boxes mode. Choosing dark theme will require selecting lighter primary and secondary colors to obtain sufficient contrast.