---
title: "How to create a custom theme in FieldBuddy Dispatch Panel V2?"
canonical: "https://help.fieldbuddy.com/space/FBDOCS/5242421274/How%20to%20create%20a%20custom%20theme%20in%20FieldBuddy%20Dispatch%20Panel%20V2%3F"
format: markdown
---
The FieldBuddy Dispatch Panel allows you to personalize the visual appearance of appointments using themes. Some themes come built-in to the Dispatch Panel but more can be added to tailor it to your needs. This guide explains how to define and apply a custom theme using Salesforce formula fields and a static CSS resource.

---

## 📜 Understanding the components

Before theming, it's important to understand how styling works:

- Appointments in the Dispatch Panel are based on the `FIELDBUDDY__Resource_Assignment__c` Salesforce record.
- Each appointment block references the fields on the Salesforce record which can be used to apply CSS classes to it.
- The CSS style rules are stored in a **Static Resource** called `DPCSS`.
- These combined affect how each appointment appears visually (e.g., background color, border, text style, etc.).

---

## \uD83D\uDCD8 Steps to create a Custom Theme

A custom theme can be based on any field on the Appointment object. This means you could use a field that is already present or create a new field/formula based on your own custom data.

Afterwards the DPCSS static file should be extended to contain CSS rules for the values present in these fields.

Last step is to specify the field to be used as a Custom Theme in the [https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/5365268532](https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/5365268532) → [Setup Dispatch Panel](https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/6091046921) → [Setup Custom theme](https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/6091046921/Dispatch+Panel+Settings#Custom-Theme-Settings).

### 1. (Optional) Create a custom Formula Field that will contain the styling classes of the theme

Create a custom Formula formula field with type text on the `Resource Assignment` object.  
For example,

```apex
IF(
  ISPICKVAL(FIELDBUDDY__Work_Order__r.FIELDBUDDY__Priority__c, "HIGH"),
  "custom-red",
  "custom-blue"
)
```

This formula applies either the `custom-red` or `custom-blue` class depending on work order priority.

If the resulting text contains spaces, they will get added as multiple CSS classes to the appointment block. So for example with the result being `"custom-red flashing"` both the custom-red and flashing will be applied as classes to the element.

### 2: Modify the DPCSS Static Resource

1. Go to **Salesforce Setup > Static Resources**. ([https://help.salesforce.com/s/articleView?id=platform.pages_static_resources_edit.htm&type=5](https://help.salesforce.com/s/articleView?id=platform.pages_static_resources_edit.htm&type=5))
2. Locate and download the static resource named `DPCSS`. If it does not exist, create a new Static Resource called DPCSS and use the example from here as a base: [https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/6127321094](https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/6127321094)
3. Add your custom CSS styles to the file in the bottom:
4. Return to **Static Resources** in Salesforce.
5. Click **Edit** on the `DPCSS` resource.
6. Upload your modified `DPCSS.css` file.
7. Save the changes.

---

### 3. Activate the theme in Configuration Panel

1. Navigate to the [https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/5365268532](https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/5365268532) → [Setup Dispatch Panel](https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/6091046921) → [Setup Custom theme](https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/6091046921/Dispatch+Panel+Settings#Custom-Theme-Settings).
2. Pick the chosen field in the picklist and click Save

---

### 4. Test the Theme

- Open the Dispatch Panel.
- In the User settings in the top right, select Themes and choose the newly added theme. ([https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/6004506631/Menu+Section#Theme](https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/6004506631/Menu+Section#Theme))
- Find relevant appointments in the schedule to verify that the new style has been applied.
  - You can also use your browser’s *Inspect Element* tool to confirm the correct classes are in use.

---

## :fieldbuddy: Best Practices

- Always back up your formula and static resource before editing.
- Avoid using spaces when combining CSS class names.
- Be as specific as possible in your CSS selectors.
- Use [Chrome DevTools](https://developer.chrome.com/docs/devtools/inspect-mode) to test and debug styles.

---

## 🧾 References

- [Salesforce: Formula Fields](https://trailhead.salesforce.com/content/learn/modules/point_click_business_logic/formula_fields)
- [CSS Basics (MDN)](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Getting_started)
- [Inspect Element - Chrome DevTools](https://developer.chrome.com/docs/devtools/inspect-mode)

## \uD83D\uDCCB Related articles


> Macro (contentbylabel)