Custom Field Styling with CSS

Learn how to apply custom styles to field values across the application using CSS. This allows you to create visual indicators like status badges, progress bars, or specially formatted text, ensuring a consistent look in list, card, and kanban views.

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.

CSS in setup_style.css:

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 */
}

Example 3: 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 */
}