---
title: "Dispatch Panel Custom Styling changes from 1.146.0"
canonical: "https://help.fieldbuddy.com/space/FBDOCS/blog/5339480086/Dispatch%20Panel%20Custom%20Styling%20changes%20from%201.146.0"
format: markdown
---
With the recent release of Dispatch Panel ([1.146.0](https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/5333123073)) we have updated performance of Dispatch Panel, as well as adjusted a way how Dispatch Panel is rendered. 

As a result, there could be an impact of a custom CSS customisations applied for certain scenarios.

> ✅ If DPCSS was not changed from default TSO template - then only absences might be affected. Check in the bottom for the fixed version of DPCSS

## Background styling might be affected

Example of an impact - background color for appointments (or absences) is set to empty for a default theme, while it works fine on hover

Check examples below

![image](media://696fb143-6296-4ed5-848c-6f52c8cd999b)

> ℹ️ This is only applicable if **background** property is being used. background-color will work fine

In order to fix this – it would be necessary to apply fixes to DPCSS for those styles

It can be done in multiple ways:

- Add extra class for the classes that describes the events (.b-sch-event.sch-event). For example (before / after)

- Use word !important to enforce the style for background (less recommended)

## Font Awesome Icons conflict

Second point of impact – Font Awesome. Since given release, we have finally introduced Font Awesome Pro 6, so you could refer all of their icons in your custom css if you want. But it also means that if there is a DPCSS that includes Font Awesome of previous version – it might cause conflicts in layout. Therefore if there is a FontAwesome referred in DPCSS – this one should be removed. Usually this is at the top line of DPCSS  
Example  


```
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
```


More helpful materials

- How to adjust Styling Dispatch Panel - [https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/4768595969](https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/4768595969)
- DPCSS - & static resource - [https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/4933582857](https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/4933582857)
- Release notes DP 1.146.0 - [https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/5333123073](https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/5333123073)
- Reference CSS from default template

<details>
<summary>DPCSS</summary>

```
.flowruntimeBody {
    min-height: 33vh;
}

.closed {
    opacity: 0.3;
}

.inprogress {
    border-width: 2px;
    border-style: solid;
    border-color: rgb(255, 153, 128, 1) !important;
}

.red {
    border-color: rgb(230, 202, 195);
    background: rgba(252, 0, 0, 0.5);
    color: rgb(145, 56, 34);
}

.blue {
    border-color: rgb(195, 214, 230);
    background: rgb(0, 185, 252, 0.5);
    color: rgb(2, 100, 176);
}

.darkblue {
    border-color: rgb(195, 214, 230);
    background: rgb(63, 122, 186, 0.5);
    color: rgb(2, 100, 176);
}

.green {
    border-color: rgb(195, 228, 230);
    background: rgba(78, 244, 66, 0.5);
    color: rgb(20, 154, 158);
}

.gray {
    border-color: rgb(217, 217, 217);
    background: rgba(230, 230, 230, 0.5);
    color: rgb(89, 89, 89);
}

.orange {
    border-color: rgb(230, 195, 210);
    background: rgba(252, 143, 0, 0.5);
    color: rgb(173, 6, 80);
}

.yellow {
    border-color: rgb(230, 225, 195);
    background: rgba(244, 241, 66, 0.5);
    color: rgb(175, 153, 3);
}
.purple {
    border-color: rgb(207, 195, 230);
    background: rgba(173, 128, 255, 0.5);
    color: rgb(63, 0, 179);
}

.b-sch-event.sch-event.vacation, .b-sch-event.sch-event.verlof {
  color: darkslateblue;
  font-size:16px;
  border: 1px solid darkslateblue;
  background: 
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 20px,
    #F0F0F0  20px,
    #F0F0F0  40px
  );
}

.b-sch-event.sch-event.appointment, .b-sch-event.sch-event.afspraak {
  color: darkgreen;
  font-size:16px;
  border: 1px solid darkgreen;
  background: 
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    #E9E9E9  10px,
    #E9E9E9  20px
  );
}
.b-sch-event.sch-event.ziek, .b-sch-event.sch-event.sick {
  color: darkred;
  font-size: 16px;
  border: 2px solid darkred;
  background: 
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    #E1C1C1  10px,
    #E1C1C1  20px
  );
}

.b-sch-event.sch-event.other, .b-sch-event.sch-event.overige {
  color: darkcyan;
  font-size:16px;
  border: 2px solid darkcyan;
  background: 
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    #F1F1F1  10px,
    #F1F1F1  20px
  );
}
.dashed {
    border-width: 3.5px;
    border-style: dashed;
    border-color: #3E3E3E;
}
.sch-event.sch-event-search-result {
  background: rgba(255, 153, 128, 0.9);
  color: black !important;
  box-shadow: 0 0 20px red;
  border-color: red;
}
.sch-event.sch-event-search-result-highlight {
  background: rgba(255, 153, 128, 0.9);
  color: black !important;
  border-color: red;
  box-shadow: 0 0 20px red;
}
.x-window-blue-window .x-btn-default-small {
    background: #1979ca !important;
    border-radius: unset !important;
}

.x-btn-default-small {
    background-color: #87939f !important;
    background:  #87939f !important;
    border-radius: 0 !important;
}

.x-btn-default-toolbar-small {
    padding: 2px 2px 2px 2px !important;
    border-width: 1px !important;
    border-style: solid !important;
    background-color: transparent !important;
    border: 0 !important;
    background: transparent !important;
}

.x-btn-default-toolbar-small-menu-active, .x-btn-default-toolbar-small-pressed {
    border-color: #505050 !important;
    background-image: none;
    background-color: #505050 !important;
}

.x-btn-default-toolbar-small-over {
  border-color: dimgrey !important;
  background-image: none !important;
  background-color: dimgrey !important;
}
```
</details>