Custom Panel Classes

Custom panel classes can be added to visually style panels according to specific panel fields. For example, if you have a department field, you can assign different colours to panels depending on which department an employee belongs to. Custom panel classes can be used in conjuction with Project Themes and Panel Themes.

Adding Custom Panel Classes

1. Select any employee from the Staff List or from Employees Edit Mode to open their employee details form.
2. When the employee details form appears, click the Edit button.
3. At the bottom of the employee details form, select Edit Fields.
4. Select a field to edit. In the field properties make sure Panel Class is toggled on.

5. Go to Tools > Project > Project Settings, and click the edit icon next to the current theme.

6. In the CSS field, add classes to match the fieldname and value of the field, using the following format:

.[field name]_[value] {}

e.g.

.department_accounting { background-color:yellow!important; color:black!important; }

.department_it { background-color:orange!important; color:black!important; }

7. Click Save to confirm the changes. You may need to refresh the page before you see the new styles.