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.

How to Add Custom Panel Classes

  1. Select any employee from Staff List or from 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 list field such as 'department' to edit, then from the top toolbar, select the Edit button.

Note - Panels are typically applied to list types but can be applied to other types.

5. Check Panel Class, then click Save.

6. Open the Sidebar Menu.

7. Select Tools > Project > Edit Styles.

8. Add classes to the Edit Styles Field to match the fieldname and value of the field, using the following format.

.[field name]_[value] {}


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

These styles will display a yellow panel for 'department=accounting' and an orange panel for department=it.

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

Note - Styles can also be manually added to the ProjectStyles.CSS file (C:\Program Files (x86)\StaffMap 3\[Project]\ProjectStyles.css