---
title: "Dispatch Panel Styling"
canonical: "https://help.fieldbuddy.com/space/FBDOCS/6127321094/Dispatch%20Panel%20Styling"
format: markdown
---
The look of the Dispatch Panel can be customised with a Static Resource called DPCSS. This file is a CSS ([https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS)) file with custom CSS styles that is loaded into Dispatch Panel.

For a step-by-step how-to guide, see [https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/5242650667](https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/5242650667).

When defining new styles in the DPCSS file, keep in mind that it’s a CSS that gets loaded into the application globally and if your specified rules are not specific enough, they can affect how other part of the app look as well ([https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity)). We recommend to be as specific as possible.

To help you out, here’s the selectors that can be used to target specific parts off the event block:

- All events:
  - `.b-sch-event.sch-event`
- Absences:
  - `.sch-event-absence`
- Appointments:
  - `:not(.sch-event-absence)`
- Block in hovered tooltips:
  - `.sch-event-body`
- Blocks in the planning section:
  - `:not(.sch-event-body)`

Combine these selectors without using spaces to select which parts to affect. Some examples:

- Targeting absences
  - `.b-sch-event.sch-event.sch-event-absence`
- Targeting events with the DP_Style of purple
  - `.b-sch-event.sch-event.purple`
- Targetting appointment hovers with the DP_Style of red
  - `.b-sch-event.sch-event:not(.sch-event-absence).sch-event-body.red`

If you want to override how text looks on these appointments in regards to size,  
  you need to be a little more precise by adding a space and the following selector:

`.sch-event-details`

The complete selector could look like this:  
`.b-sch-event.sch-event.sch-event-absence .sch-event-details`

When customizing looks only for light or dark theme, make sure to prepend one of the following selectors with a space to the block selector:

- Light mode:
  - `body.b-theme-light`
- Dark mode:
  - `body.b-theme-dark`

For example to target an absence in dark mode would be:  
`body.b-theme-dark .b-sch-event.sch-event.sch-event-absence`

> ⚠️ This CSS file will be applied to the page, meaning it can unintentionally change the look of other elements on the page. Make sure to precisely define the CSS selectors. You can use the short guide at the beginning of the example DPCSS file as help.

> 📝 Older DPCSS stylings must be adjusted for dark mode, since some colours show up differently on a dark background. Be wary of any custom styles containing opacity, or the “transparent” colour. Making an appointment translucent will make it appear lighter in light mode and darker in dark mode. This can cause the text on the appointment to be illegible.

Here’s an example of a DPCSS.css static resource:

<details>
<summary>DPCSS</summary>

```css
/*
  Combine these selectors together to target what you want specifically.
  If you're using the DP_Style property, append the classes from there to these selectors to target them specifically.

  ! DO NOT USE SPACES WHEN COMBINING THESE SELECTORS. THEY NEED TO BE TOGETHER.

  You can find more information about how to adjust the styling and theme here:
  https://help.fieldbuddy.com/space/FBDOCS/5242650667/How+to+modify+the+data+or+style+in+an+Appointment+block+in+the+FieldBuddy+Dispatch+Panel+V2%3F
  https://help.fieldbuddy.com/space/FBDOCS/5242421274/How+to+create+a+custom+theme+in+FieldBuddy+Dispatch+Panel+V2%3F

  All events:
    .b-sch-event.sch-event
  
  Absences:
    .sch-event-absence

  Appointments:
    :not(.sch-event-absence)

  Specifically hovered blocks:
    .sch-event-body

  Specifically event blocks:
    :not(.sch-event-body)

  Examples:
    - Targeting absences
      .b-sch-event.sch-event.sch-event-absence
    - Targeting events with the DP_Style of purple
      .b-sch-event.sch-event.purple
    - Targeting appointment hovers with the DP_Style of red
      .b-sch-event.sch-event:not(.sch-event-absence).sch-event-body.red

  If you want to override how text looks on these appointments in regards to size,
  you need to be a little more precise by adding a space and the following selector:

  .sch-event-details

  The complete selector could look like this:
    .b-sch-event.sch-event.sch-event-absence .sch-event-details

  When customizing looks only for light or dark theme, make sure to prepend one of the following selectors with a space to the block selector:

  Light mode:
    body.b-theme-light

  Dark mode:
    body.b-theme-dark

  For example to target an absence in dark mode would be:
    body.b-theme-dark .b-sch-event.sch-event.sch-event-absence
*/

.b-sch-event.sch-event.red {
  border-color: rgb(254, 222, 216);
  background: rgb(254, 184, 171);
  color: rgb(142, 3, 15);
}

.b-sch-event.sch-event.blue {
  border-color: rgb(216, 230, 254);
  background: rgb(170, 203, 255);
  color: rgb(1, 68, 134);
}

.b-sch-event.sch-event.darkblue {
  border-color: rgb(224, 229, 248);
  background: rgb(190, 199, 246);
  color: rgb(47, 44, 183);
}

.b-sch-event.sch-event.green {
  border-color: rgb(205, 239, 196);
  background: rgb(145, 219, 139);
  color: rgb(25, 78, 49);
}

.b-sch-event.sch-event.gray {
  border-color: rgb(229, 229, 229);
  background: rgb(201, 201, 201);
  color: rgb(68, 68, 68);
}

.b-sch-event.sch-event.orange {
  border-color: rgb(254, 223, 208);
  background: rgb(255, 186, 144);
  color: rgb(95, 62, 2);
}

.b-sch-event.sch-event.yellow {
  border-color: rgb(249, 227, 182);
  background: rgb(252, 192, 3);
  color: rgb(111, 52, 0);
}

.b-sch-event.sch-event.purple {
  border-color: rgb(236, 225, 249);
  background: rgb(215, 191, 242);
  color: rgb(90, 27, 169);
}

.b-sch-event.sch-event.dashed {
  border-width: 3.5px;
  border-style: dashed;
  border-color: rgb(68, 68, 68);
}

.b-sch-event.sch-event.closed {
  opacity: 0.3;
}

body.b-theme-dark .b-sch-event.sch-event.closed {
  opacity: 0.6;
}

.b-sch-event.sch-event.inprogress {
  border-width: 2px;
  border-style: solid;
  border-color: rgb(254, 147, 57) !important;
}

.b-sch-event.sch-event.sch-event-absence.vacation,
.b-sch-event.sch-event.sch-event-absence.verlof {
  color: rgb(5, 98, 138);
  border: 2px solid rgb(5, 98, 138);
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgb(234, 245, 254) 10px,
    rgb(234, 245, 254) 20px
  );
}

body.b-theme-dark .b-sch-event.sch-event.sch-event-absence.vacation,
body.b-theme-dark .b-sch-event.sch-event.sch-event-absence.verlof {
  color: rgb(3, 59, 83);
  border: 2px solid rgb(3, 59, 83);
  background: repeating-linear-gradient(
    45deg,
    rgba(187, 223, 252, 0.7),
    rgba(187, 223, 252, 0.7) 10px,
    rgb(187, 223, 252) 10px,
    rgb(187, 223, 252) 20px
  );
}

.b-sch-event.sch-event.sch-event-absence.appointment,
.b-sch-event.sch-event.sch-event-absence.afspraak {
  color: rgb(57, 101, 71);
  border: 2px solid rgb(57, 101, 71);
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgb(235, 247, 230) 10px,
    rgb(235, 247, 230) 20px
  );
}

body.b-theme-dark .b-sch-event.sch-event.sch-event-absence.appointment,
body.b-theme-dark .b-sch-event.sch-event.sch-event-absence.afspraak {
  color: rgb(34, 61, 43);
  border: 2px solid rgb(34, 61, 43);
  background: repeating-linear-gradient(
    45deg,
    rgba(206, 235, 194, 0.7),
    rgba(206, 235, 194, 0.7) 10px,
    rgb(206, 235, 194) 10px,
    rgb(206, 235, 194) 20px
  );
}

.b-sch-event.sch-event.sch-event-absence.ziek,
.b-sch-event.sch-event.sch-event-absence.sick {
  color: rgb(186, 5, 23);
  border: 2px solid rgb(186, 5, 23);
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgb(254, 241, 238) 10px,
    rgb(254, 241, 238) 20px
  );
}

body.b-theme-dark .b-sch-event.sch-event.sch-event-absence.ziek,
body.b-theme-dark .b-sch-event.sch-event.sch-event-absence.sick {
  color: rgb(112, 3, 14);
  border: 2px solid rgb(112, 3, 14);
  background: repeating-linear-gradient(
    45deg,
    rgba(251, 203, 192, 0.7),
    rgba(251, 203, 192, 0.7) 10px,
    rgb(251, 203, 192) 10px,
    rgb(251, 203, 192) 20px
  );
}

.b-sch-event.sch-event.sch-event-absence.other,
.b-sch-event.sch-event.sch-event-absence.overige {
  color: rgb(5, 103, 100);
  border: 2px solid rgb(5, 103, 100);
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgb(222, 249, 243) 10px,
    rgb(222, 249, 243) 20px
  );
}

body.b-theme-dark .b-sch-event.sch-event.sch-event-absence.other,
body.b-theme-dark .b-sch-event.sch-event.sch-event-absence.overige {
  color: rgb(3, 62, 60);
  border: 2px solid rgb(3, 62, 60);
  background: repeating-linear-gradient(
    45deg,
    rgba(182, 242, 228, 0.7),
    rgba(182, 242, 228, 0.7) 10px,
    rgb(182, 242, 228) 10px,
    rgb(182, 242, 228) 20px
  );
}

```
</details>

More how to change it can be found here – [https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/4933582857](https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/4933582857)