> For the complete documentation index, see [llms.txt](https://lt-studios.gitbook.io/lt-studios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lt-studios.gitbook.io/lt-studios/assets/editor/user-guide/how-to-edit-create-menus/manual-configuration/styling-datasets.md).

# Styling Datasets

#### ⚠️ **Note**

If you’re unsure about any step in this guide, it’s better to pause and ask for clarification rather than continue and risk breaking your setup. Taking your time now will save debugging later.

#### **Version Requirement**

This feature is available from version 1.5.0+ only.\
Versions below 1.5.0 are deprecated and will no longer be supported after May 1st, 2026. We strongly recommend updating to the latest version.

### **Getting Started**

There are two main approaches to styling your menus:

1. Copy styles from an existing menu (e.g., `police`, `ambulance`) and modify them
2. Create your styles from scratch

The recommended approach is to **start from an existing menu**, then adjust it to your needs.

Navigate to `server/config.lua`:

### **Example Setup**

Start by copying a `styles` section from an existing menu into your own:

```lua
['your_cool_menu'] = {
  main = {
    label = "My cool menu",
    color = "#FFFFFF",

    data = {
      [1] = 'image',
      [2] = 'name',
      [3] = 'callsign',
      [4] = 'radio'
    },

    ...

    styles = {
      [1] = nil,
      [2] = nil,

      [3] = {
        {
          min = 20,
          max = 30,
          style = {
            font_weight = "bold",
            background_color = "#10a9ef",
            color = "white"
          }
        },
        {
          min = 30,
          max = 40,
          style = {
            font_weight = "bold",
            background_color = "#2e54d1",
            color = "white"
          }
        },
        {
          min = 90,
          max = 100,
          style = {
            font_weight = "bold",
            background_color = "#AB1150",
            color = "white"
          }
        },
        {
          prefix = "A",
          style = {
            font_weight = "bold",
            background_color = "#11ab6c",
            color = "white"
          }
        },
        {
          prefix = "DELTA",
          style = {
            font_weight = "bold",
            background_color = "#FF9700",
            color = "white"
          }
        },
        {
          prefix = "OMEGA",
          style = {
            font_weight = "bold",
            background_color = "#EF5610",
            color = "white"
          }
        },
        {
          prefix = "PD",
          style = {
            font_weight = "bold",
            background_color = "#DE212A",
            color = "white"
          }
        }
      },

      [4] = {
        DynamicStyles.talkingOverRadio,
      }
    },

    ...
  }
}
```

### **Important**

The index of each dataset **must match across all related tables**.

For example:

* `data[3] = 'callsign'`
* `styles[3]` → applies styling to `callsign`

If the indices don’t match, styles will not apply correctly.

### **How Styling Works**

Each dataset can have multiple styling rules:

* **min / max** → Applies style based on numeric range (`min` - inclusive, `max` - exclusive)
* **prefix** → Applies style if value starts with a string
* **DynamicStyles** → Applies real-time styles (e.g., radio activity), modifiable in `server/utils.lua`.

### **Approved Style Rules**

When defining styles for menu datasets, only certain CSS-like rules are allowed. These rules are validated to ensure consistency and prevent breaking the menu layout.

**Note**: If you know nothing about color codes, just use [this](https://htmlcolorcodes.com/) website.

The currently approved style properties are:

<table><thead><tr><th width="189">Rule Key (Lua)</th><th>Description / Equivalent CSS Property</th></tr></thead><tbody><tr><td><code>background_color</code></td><td><code>backgroundColor</code> – sets the background color of the dataset cell</td></tr><tr><td><code>color</code></td><td><code>color</code> – sets the text color</td></tr><tr><td><code>border_color</code></td><td><code>borderColor</code> – sets the color of the border (requires <code>border</code> to be defined)</td></tr><tr><td><code>border</code></td><td><code>border</code> – defines the full border style (width, style, color)</td></tr><tr><td><code>box_shadow</code></td><td><code>boxShadow</code> – adds shadow effects to the dataset cell</td></tr><tr><td><code>outline</code></td><td><code>outline</code> – sets the outline around the dataset cell</td></tr><tr><td><code>font_weight</code></td><td><code>fontWeight</code> – sets the text weight (e.g., <code>"bold"</code>, <code>"normal", 500, 700</code>)</td></tr></tbody></table>

### **Next Steps**

Once your base is set:

* Go dataset by dataset
* Add or modify styling rules
* Adjust colors, weights, and conditions to match your design