Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[sci3wh]

Hallo,
ich habe mit einem CSS Code den Hintergrund in einem Widget geändert.
Leider bezieht sich der Code nicht nur auf das Widget sondern auf den gesamten Editor.
Was muss ich einstellen, damit der Code nur für das Widget angewendet wird?
Hier der CSS Code:

table, th, td {
border-collapse: collapse;
padding: .3em .5em;
}

table {
margin-left: 1em;}

th, caption {
background-color: #666;
color: #fff;
border: thin solid #666;
}

td {
background-image: linear-gradient(#a1a1a1, #d1d1a1);
border-left: thin solid #666;
border-right: thin solid #666;
}

tfoot {
border-bottom: thin solid #666;
}

caption {
font-size: 1.5em;
border-radius: .5em .5em 0 0;
padding: .5em 0 0 0
}

/* 3. und 4. Spalte rechtsbündig */
td:nth-of-type(3), td:nth-of-type(4) {
text-align: right;
}

[OliverIO]

@sci3wh sagte in CSS Code nur auf Widget beschränken:

table, th, td {
border-collapse: collapse;
padding: .3em .5em;
}

Da gibt es 2 Möglichkeiten
Entweder du schreibst die jeweilige widgetid davor

#w00100 table, th, td {
border-collapse: collapse;
padding: .3em .5em;
}

Du musst den selektor aber für jedes Widget jeweils wiederholen

Oder du definierst deine css Anweisungen mit einem Klassennamen, denn du im Editor dann im Feld css Klasse bei allen betroffenen Widgets einträgsteinträgst

.cssklassenname table, th, td {
border-collapse: collapse;
padding: .3em .5em;
}

[sci3wh]

@oliverio
Vielen Dank für die schnelle Antwort.
Funktioniert echt gut. Ich nehme die Widget ID