---
title: Layout
description: "## Farben ## Individuelles CSS Hier können Farben definiert werden, die nicht in sonstigen Einstellungen auftauchen. Farben können als HEX-Wert oder als Name angegeben werden. Gültige Bezeichnungen finden sich z.B. bei [W3.org](https://www.w3.org/wiki/CSS/Properties/color/keywords) ### Notiz im Kalender / Warteliste *.chironotiz {…"
url: "https://chirocloud.de/wiki/layout/"
updated: "2026-04-28"
category: Administration / Basiskonfiguration
---

# Layout

## Farben

## Individuelles CSS

Hier können Farben definiert werden, die nicht in sonstigen Einstellungen auftauchen.
Farben können als HEX-Wert oder als Name angegeben werden. Gültige Bezeichnungen finden sich z.B. bei [W3.org](https://www.w3.org/wiki/CSS/Properties/color/keywords)

### Notiz im Kalender / Warteliste

*.chironotiz
{
background-color: red !important;
color:white;
}*

![image](https://chirocloud.de/wp-content/uploads/2023/03/image.png)

### icofont

Definiert die Farbe und Größe der Statuswerte.

*.icofont
{
color: #007fff !important;
font-size: 36pt !important;
}*

![image 1](https://chirocloud.de/wp-content/uploads/2023/03/image-1.png)

### Check-In (Farbe in der Warteliste)

![image](https://chirocloud.de/wp-content/uploads/2023/03/image-97.png)

Farbe direkt nach Check-In und 20+ Minuten nach Check-In. Standard: grün -> orange
*.calendarcheckedin
{ background-color:#1df21d !important; }*
*.calendarcheckedin20
{ background-color: #006400 !important; }*

Farbe nachdem die Behandlung begonnen wurde.
*.calendarbehandlungstart
{ background-color:LightSkyBlue !important; }
.calendarcheckedout*

Farbe nachdem die Behandlung beendet wurde. Standard: Dunkelgrün
*.calendarcheckedout
{ background-color: #FF3399 !important; }*

### Feiertagsfarbe

.calendarfeiertag
{
background-color: #ffa500;
}

### Ferienfarbe

.calendarferien
{
background-color: #fcf7ac;
}

### Urlaubsfarben

bi = Bildungsurlaub, ue = unentgeltlicher Urlaub

.calendarurlaub
{
background-color: #800075;
}
.calendarurlaubbi
{
background-color: #FF88FF;
}
.calendarurlaubue
{
background-color: #FF00FF;
}

### Farbe Krank

.calendarkrank
{
background-color: #bf0000;
}

### Farbe Arbeitszeit

.calendararbeitszeit
{
background-color: #a0ffa0;
}

### Farbe Arbeitszeiten (NP, online, online NP)

*.calendararbeitszeit.online
{
background-color: yellow;
}*

*.calendararbeitszeit.np
{
background-color: pink;
}*

*.calendararbeitszeit.online.np
{
background-color: blue;
}*

![image](https://chirocloud.de/wp-content/uploads/2023/03/image-76-1024x633.png)

### Arbeitszeit nach Behandlungsart einfärben

*.behandlungsartOffenesJustieren { background-color: pink; }*

Hinweise.

- der Eintrag muss unterhalb von .calendararbeitszeit { background-color: #a0ffa0; } stehen
- ggf. vorhandene Leerzeichen aus dem Namen der Behandlungsart hier löschen

![image](https://chirocloud.de/wp-content/uploads/2023/03/image-53-1024x962.png)

### Farbe Dokubeginn (Behandlungsdatum)

.listtable > tbody > tr > td.chirodokuheader
{
background-color: #c4fcfc;
color: black;
}
.listtable > tbody > tr > td.chirodokuheadergeloescht
{
background-color: #444444;
color: black;
}

### Überschriften

h3
{
color: darkblue;
}

### Farbe Standorte

.filiale
{
background-color: #DDDD22;
}

### Abstand Buttons

Je nach Tabletgröße machen hier Abstandsangaben Sinn. Betrifft die Einwilligung zur längeren Speicherung.

.einwilligungdatenspeichern .btn
{
padding:20px;
margin-right:20px;
margin-bottom:20px;
}

### Keine Folgetermin in Doku

Roter Kasten mit weißer Schrift:
*.chirokeinefolgetermine
{
background-color:red;
color:white;
padding:3px;
margin-bottom:1px;
}*

Schwarze Schrift:
.chirokeinefolgetermine
{
color:black;
}

### Termin am aktuellen Tag (Alle Termine)

.chiroterminheute TD
{
background-color: lightgreen;
}

### Terminkalender Onlineportal

.onlinedatumselected, .onlinedatumselected a
{
background-color: #00C000;
color: white !important;
}

.onlinedatumtermin, .onlinedatumtermin a
{
background-color: #E0FFE0;
color: black !important;
}

.datumheute
{
border:2px solid red;
color: black;
}

.datumvergangen
{
background-color: #F0F0F0;
color: black;
}

.datumzukunft
{
background-color: white;
color: black;
}

### Patient hat heute Geburtstag

#infogeburtstag { background-color:#f6adcd; font-weight:bold; }

### Abweichende Anrede

#infoansprache { background-color:#66B2B2; color:white; }

### Buttons: Behandlung beginnen / beenden

*.btn.behandlungstart
{
background-color: red !important;
}
.btn.behandlungende
{
background-color: blue !important;
}*

### [+Neuer Termin] / Blocktermine

Farbe anpassen:
*.calendarblocktermin .calendaritem
{ background-color: pink !important; }*

![image](https://chirocloud.de/wp-content/uploads/2023/03/image-96-1024x512.png)

![image](https://chirocloud.de/wp-content/uploads/2023/03/image-98-1024x509.png)