How It Works

The system automatically wraps each field's value in a <span> tag with special data-* attributes. You can target these attributes in your setup_style.css file to apply specific styles.

The basic structure looks like this:

<span data-field-value-for="field_name" data-field-value="raw_value">Formatted Value</span>

• data-field-value-for="field_name": Targets all values of a specific field (e.g., "city", "status").
• data-field-value="raw_value": Contains the raw, unformatted value from the database. This is perfect for creating rules based on the actual data.

Example 1: Simple Field Styling (City Sign)

Let's style a field named ort (city) to look like a German town sign. This style will apply to the field regardless of its value.

span[data-field-value-for="ort"] {
    background-color: #FFC107; /* Traffic yellow */
    color: #000 !important;
    border: 2px solid #000;
    border-radius: 8px;
    font-weight: bold;
    padding: 0.2rem 0.5rem;
    min-width: 150px;
    display: inline-block;
    text-align: center;
}

Example 2: Value-Dependent Badges (Status Field)

Here, we'll style a field named bearbeitungsstatus (processing status) based on its specific text value. This is ideal for creating status labels.

CSS in setup_style.css:

/* 1. Base style for all status badges */
span[data-field-value-for="bearbeitungsstatus"] {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 0.85em;
    font-weight: 700;
    border-radius: 0.375rem;
    color: #fff !important;
}

/* 2. Specific colors for each value */
span[data-field-value-for="bearbeitungsstatus"][data-field-value="Neu"] {
    background-color: #dc3545; /* Red */
}

span[data-field-value-for="bearbeitungsstatus"][data-field-value="In Arbeit"] {
    background-color: #6c757d; /* Gray */
}

span[data-field-value-for="bearbeitungsstatus"][data-field-value="Erledigt"] {
    background-color: #198754; /* Green */
}

Result:

Neu In Arbeit Erledigt

Example 3: Value-Dependent Progress Bar (Priority)

For a numeric field like prioritaet (priority), we can change the width and color of a bar. We use the attribute selector [data-field-value^="..."] which means "value starts with...". This reliably catches numbers like `3` and `3.00`.

CSS in setup_style.css:

/* Base style for the bar container */
span[data-field-value-for="prioritaet"] {
    display: block;
    border-radius: 4px;
    text-align: left;
    color: #fff !important;
    font-weight: bold;
    padding: 0.1rem 0.5rem;
    min-height: 1.5em;
    background-color: #e9ecef; /* The "empty" part of the bar */
}

/* Specific rules for each value (color and width) */
span[data-field-value-for="prioritaet"][data-field-value^="1"] { width: 20%; background-color: #ffc107; color: #000 !important; }
span[data-field-value-for="prioritaet"][data-field-value^="2"] { width: 40%; background-color: #fd7e14; }
span[data-field-value-for="prioritaet"][data-field-value^="3"] { width: 60%; background-color: #dc3545; }
span[data-field-value-for="prioritaet"][data-field-value^="4"] { width: 80%; background-color: #d63384; }
span[data-field-value-for="prioritaet"][data-field-value^="5"] { width: 100%; background-color: #6f42c1; }

Result:

Priority 1:

Priority 3:

Example 4: Styling Positive & Negative Numbers

You can easily style numbers based on their sign. This is perfect for currency fields showing profit or loss. We use the attribute selector [data-field-value^="-"] to check if the value starts with a minus sign.

CSS in setup_style.css:

/* Base style for the amount field */
span[data-field-value-for="betrag"] {
  display: inline-block;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  color: #fff !important;
  font-weight: bold;
  min-width: 80px;
  text-align: center;
}

/* Negative (< 0): value starts with a minus sign */
span[data-field-value-for="betrag"][data-field-value^="-"] {
  background-color: #c0392b; /* Red */
}

/* Positive or zero (>= 0): value does NOT start with a minus sign */
span[data-field-value-for="betrag"]:not([data-field-value^="-"]) {
  background-color: #27ae60; /* Green */
}

Result:

-150,00 € 300,00 €

Example 5: Star Rating for Numeric Fields

You can even create more complex visual representations like a star rating for a numeric field (e.g., a field named bewertung with values from 1 to 5).

CSS in setup_style.css:

          /*
 * Stellt ein Zahlenfeld 'bewertung' (Werte 1–5) als Sterne-Rating dar.
 */

span[data-field-value-for="bewertung"] {
  display: inline-block;
  position: relative;
  font-size: 1.5rem; /* Größe der Sterne */
  color: #e9ecef;    /* Farbe der leeren Sterne */
  text-indent: -9999px; /* Zahlenwert ausblenden */
  width: 6em;        /* Breite für 5 Sterne */
  height: 1.2em;
}

/* Leere Sterne */
span[data-field-value-for="bewertung"]::before {
  content: "★★★★★";
  position: absolute;
  left: 0;
  top: 0;
  text-indent: 0;
}

/* Gefüllte Sterne */
span[data-field-value-for="bewertung"]::after {
  content: "★★★★★";
  position: absolute;
  left: 0;
  top: 0;
  color: #ffc107; /* Gelb für gefüllte Sterne */
  text-indent: 0;
  overflow: hidden;
}

/* 1–5 Sterne füllen */
span[data-field-value-for="bewertung"][data-field-value="1"],
span[data-field-value-for="bewertung"][data-field-value="1.00"]::after { width: 20%; }

span[data-field-value-for="bewertung"][data-field-value="2"],
span[data-field-value-for="bewertung"][data-field-value="2.00"]::after { width: 40%; }

span[data-field-value-for="bewertung"][data-field-value="3"],
span[data-field-value-for="bewertung"][data-field-value="3.00"]::after { width: 60%; }

span[data-field-value-for="bewertung"][data-field-value="4"],
span[data-field-value-for="bewertung"][data-field-value="4.00"]::after { width: 80%; }

span[data-field-value-for="bewertung"][data-field-value="5"],
span[data-field-value-for="bewertung"][data-field-value="5.00"]::after { width: 100%; }
}

Result for a value of "5":