---
title: "DPCSS & Static Resource"
canonical: "https://help.fieldbuddy.com/space/FBDOCS/4933582857/DPCSS%20%26%20Static%20Resource"
format: markdown
---
> ℹ️ DPCSS = Dispatch Panel Cascading Style Sheets

> ⚠️ This guide is for Dispatch Panel v1. For a newer version of the guide, see [https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/5242650667](https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/5242650667)

What are Cascading Style Sheets (CSS) – it is a style sheet language that allows to change user interface of the elements on web application. A good explanation and even a playground can be found [here](https://www.w3schools.com/css/css_intro.asp).

In simple words, CSS describe rules which can be applied to certain element on the web page, and change its properties, like position, color etc.  
All the CSS classes which can be referenced in the DP Style formula field are stored in the Static Resource called DPCSS:

![image](media://87289a67-a495-4dc7-a715-8b41957c78d1)

Example of Static Resource: 

```
.closed {
    opacity: 0.3;
}

.inprogress {
    border-width: 2px;
    border-style: solid;
    border-color: rgb(255, 153, 128, 1) !important;
}
.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);
}
.vacation, .verlof {
  color: #443d1e;
  font-size:16px;
  border-color: #404040;
  border-width: 1px;
  background: 
  repeating-linear-gradient(
  45deg,
  transparent,
  transparent 10px,
  #FFEB9B  10px,
  #FFEB9B  20px
  ) !important;
}
.other, .overige {
  color: #203342;
  font-size:16px;
  border-color: #404040;
  border-width: 1px;
  background: 
  repeating-linear-gradient(
  45deg,
  transparent,
  transparent 10px,
  #80c7ff  10px,
  #80c7ff  20px
  ) !important;
}
.dashed {
    border-width: 3.5px;
    border-style: dashed;
    border-color: #3E3E3E;
}

```

Full Static Resource CSS file:

# How to change the DPCSS?

1. Navigate to **Setup **> **Custom Code** > **Static Resources**, navigate to **‘DPCSS’ **and download the file. Save that file as **DPCSS.css** on your computer
2. Adjust DPCSS to contain your preferences. You can also add more styles to it. For example:
3. Update your static resource - click Update and upload new file
4. Check if DP works as expected

## Hints

> ℹ️ 1. Always save separately formula value of DP Style and original static resource before changing those. In case of any typos/mistakes – you can revert it back
> ℹ️ 2. You can add DP Style to page layout or list view of Resource Unit Assignments. That will help checking if the formula evaluates to what it is expected to be.
> ℹ️ 3. You can use chrome “Inspect” action to see why your style is not working as expected