<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[openligadb css Aufrischung]]></title><description><![CDATA[<p dir="auto">Ich habe mal eine KI gefagt ob das und das möglich ist. Das kam dabei raus.<br />
<img src="/assets/uploads/files/1788042999226-scrennformy.jpg" alt="scrennformy.jpg" class=" img-fluid img-markdown" /></p>
<p dir="auto">Zappen zu den anderen Runden funktioniert.....bei toren klickt man auf das ergebniss und die torergebnisse werden angezeigt.....also quasi im Arccordioneffekt<br />
Übrigens ich hatte vergessen das ist der DFB-Pokal 2026</p>
]]></description><link>https://forum.iobroker.net/topic/85256/openligadb-css-aufrischung</link><generator>RSS for Node</generator><lastBuildDate>Sun, 30 Aug 2026 04:48:21 GMT</lastBuildDate><atom:link href="https://forum.iobroker.net/topic/85256.rss" rel="self" type="application/rss+xml"/><pubDate>Sat, 29 Aug 2026 22:38:38 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to openligadb css Aufrischung on Sun, 30 Aug 2026 03:16:59 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/matze55" aria-label="Profile: matze55">@<bdi>matze55</bdi></a></p>
<p dir="auto">da man es designmäßig es nie allen recht machen kann, mache ich meine widget meist mit einem gewissen grunddesign.<br />
darüber hinaus definiere ich css klassen über die dann jeder da noch was dazu definieren kann.</p>
<p dir="auto">diese css klassen sind hier bspw am gameday beschrieben.</p>
<p dir="auto"><a href="https://github.com/oweitman/ioBroker.openligadb#games-of-gameday-v2" rel="nofollow ugc">https://github.com/oweitman/ioBroker.openligadb#games-of-gameday-v2</a></p>
<p dir="auto">wenn da noch was fehlt, dann gerne hier oder im eigentlichen support thread kommentieren. ich mache die dann gerne design neutral dazu, so das ihr euer gewünschtes design hinbekommt</p>
<p dir="auto">wenn man sich mit css klassen nicht so gut auskennt,<br />
empfehle ich den html code eines widgets mit den webdeveloper tools zu kopieren. da sind die vorgegebenen css regeln mit enthalten.<br />
diese der ki zu ngeben und sie zu bitten, entweder einfach diese hübsch zu machen oder genauere regeln der ki vorzugeben.<br />
evtl noch den tip den html code nicht zu verändern, sondern nur css regeln auszugeben die evtl vorhandene css regeln überschreiben.</p>
<p dir="auto">ich mache mal ein einfaches schnelles beispiel:</p>
<p dir="auto">hier mein prompt mit dem aktuellen html</p>
<pre><code>kannst du mir für den folgenden html code css regeln definieren, so das er etwas ansprechender aussieht

&lt;div
    class="vis-widget vis-tpl-openligadb-OLiDB GameDay v2"
    style="
        overflow: visible;
        width: 327px;
        height: 355px;
        left: 21px;
        top: 112px;
        font-size: x-small;
    "
    id="w00030"
&gt;
    &lt;style&gt;
        #w00030 .oldb-icon {
            max-height: 25px;
            max-width: 25px;
        }
        #w00030 .oldb-tdicon {
            width: 25px;
        }
        #w00030 .oldb-tt {
            width: 100%;
        }
        #w00030 .oldb-tt td {
            white-space: nowrap;
        }
        #w00030 .oldb-wrap {
            white-space: normal !important;
        }
        #w00030 .oldb-goal {
            white-space: nowrap;
            display: inline-block;
        }
        #w00030 .oldb-full {
            width: 50%;
        }
        #w00030 .oldb-center {
            text-align: center;
        }
        #w00030 .oldb-right {
            text-align: right;
        }
        #w00030 .oldb-left {
            text-align: left;
        }
        #w00030 .oldb-datetime {
            font-weight: bold;
        }
    &lt;/style&gt;
    &lt;table class="oldb-tt"&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;td class="oldb-right oldb-datetime" colspan="3"&gt;08/28&lt;/td&gt;
                &lt;td class="" /&gt;
                &lt;td class="oldb-left oldb-datetime" colspan="3"&gt;08:30 PM&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td class="oldb-right oldb-full"&gt;FC Bayern München&lt;/td&gt;
                &lt;td class="oldb-center oldb-tdicon"&gt;
                    &lt;img
                        class="oldb-icon"
                        src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Logo_FC_Bayern_M%C3%BCnchen_%282002%E2%80%932017%29.svg"
                    /&gt;
                &lt;/td&gt;
                &lt;td class="oldb-center"&gt;5&lt;/td&gt;
                &lt;td class="oldb-center"&gt;:&lt;/td&gt;
                &lt;td class="oldb-center"&gt;1&lt;/td&gt;
                &lt;td class="oldb-center oldb-tdicon"&gt;
                    &lt;img
                        class="oldb-center oldb-icon"
                        src="https://i.imgur.com/v0tkpNx.png"
                    /&gt;
                &lt;/td&gt;
                &lt;td class="oldb-left oldb-full"&gt;VfB Stuttgart&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td class="oldb-right oldb-datetime" colspan="3"&gt;08/29&lt;/td&gt;
                &lt;td class="" /&gt;
                &lt;td class="oldb-left oldb-datetime" colspan="3"&gt;03:30 PM&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td class="oldb-right oldb-full"&gt;RB Leipzig&lt;/td&gt;
                &lt;td class="oldb-center oldb-tdicon"&gt;
                    &lt;img
                        class="oldb-icon"
                        src="https://i.imgur.com/Rpwsjz1.png"
                    /&gt;
                &lt;/td&gt;
                &lt;td class="oldb-center"&gt;3&lt;/td&gt;
                &lt;td class="oldb-center"&gt;:&lt;/td&gt;
                &lt;td class="oldb-center"&gt;0&lt;/td&gt;
                &lt;td class="oldb-center oldb-tdicon"&gt;
                    &lt;img
                        class="oldb-center oldb-icon"
                        src="https://i.imgur.com/KSIk0Eu.png"
                    /&gt;
                &lt;/td&gt;
                &lt;td class="oldb-left oldb-full"&gt;Borussia Mönchengladbach&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td class="oldb-right oldb-full"&gt;1. FSV Mainz 05&lt;/td&gt;
                &lt;td class="oldb-center oldb-tdicon"&gt;
                    &lt;img
                        class="oldb-icon"
                        src="https://upload.wikimedia.org/wikipedia/commons/9/9e/Logo_Mainz_05.svg"
                    /&gt;
                &lt;/td&gt;
                &lt;td class="oldb-center"&gt;0&lt;/td&gt;
                &lt;td class="oldb-center"&gt;:&lt;/td&gt;
                &lt;td class="oldb-center"&gt;0&lt;/td&gt;
                &lt;td class="oldb-center oldb-tdicon"&gt;
                    &lt;img
                        class="oldb-center oldb-icon"
                        src="https://upload.wikimedia.org/wikipedia/commons/e/e3/SC_Paderborn_07_Logo.svg"
                    /&gt;
                &lt;/td&gt;
                &lt;td class="oldb-left oldb-full"&gt;SC Paderborn 07&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td class="oldb-right oldb-full"&gt;1. FC Union Berlin&lt;/td&gt;
                &lt;td class="oldb-center oldb-tdicon"&gt;
                    &lt;img
                        class="oldb-icon"
                        src="https://assets.dfb.de/uploads/000/018/232/small_union-Berlin.jpg"
                    /&gt;
                &lt;/td&gt;
                &lt;td class="oldb-center"&gt;3&lt;/td&gt;
                &lt;td class="oldb-center"&gt;:&lt;/td&gt;
                &lt;td class="oldb-center"&gt;3&lt;/td&gt;
                &lt;td class="oldb-center oldb-tdicon"&gt;
                    &lt;img
                        class="oldb-center oldb-icon"
                        src="https://i.imgur.com/X8NFkOb.png"
                    /&gt;
                &lt;/td&gt;
                &lt;td class="oldb-left oldb-full"&gt;Eintracht Frankfurt&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td class="oldb-right oldb-full"&gt;1. FC Köln&lt;/td&gt;
                &lt;td class="oldb-center oldb-tdicon"&gt;
                    &lt;img
                        class="oldb-icon"
                        src="https://upload.wikimedia.org/wikipedia/commons/0/01/1._FC_Koeln_Logo_2014%E2%80%93.svg"
                    /&gt;
                &lt;/td&gt;
                &lt;td class="oldb-center"&gt;3&lt;/td&gt;
                &lt;td class="oldb-center"&gt;:&lt;/td&gt;
                &lt;td class="oldb-center"&gt;2&lt;/td&gt;
                &lt;td class="oldb-center oldb-tdicon"&gt;
                    &lt;img
                        class="oldb-center oldb-icon"
                        src="https://i.imgur.com/gF0PfEl.png"
                    /&gt;
                &lt;/td&gt;
                &lt;td class="oldb-left oldb-full"&gt;TSG Hoffenheim&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td class="oldb-right oldb-full"&gt;SV 07 Elversberg&lt;/td&gt;
                &lt;td class="oldb-center oldb-tdicon"&gt;
                    &lt;img
                        class="oldb-icon"
                        src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/SV_Elversberg_Logo.svg/500px-SV_Elversberg_Logo.svg.png"
                    /&gt;
                &lt;/td&gt;
                &lt;td class="oldb-center"&gt;3&lt;/td&gt;
                &lt;td class="oldb-center"&gt;:&lt;/td&gt;
                &lt;td class="oldb-center"&gt;2&lt;/td&gt;
                &lt;td class="oldb-center oldb-tdicon"&gt;
                    &lt;img
                        class="oldb-center oldb-icon"
                        src="https://www.bundesliga-reisefuehrer.de/sites/default/files/B04_Standard_Logo_RGB.png"
                    /&gt;
                &lt;/td&gt;
                &lt;td class="oldb-left oldb-full"&gt;Bayer 04 Leverkusen&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td class="oldb-right oldb-datetime" colspan="3"&gt;08/29&lt;/td&gt;
                &lt;td class="" /&gt;
                &lt;td class="oldb-left oldb-datetime" colspan="3"&gt;06:30 PM&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td class="oldb-right oldb-full"&gt;Borussia Dortmund&lt;/td&gt;
                &lt;td class="oldb-center oldb-tdicon"&gt;
                    &lt;img
                        class="oldb-icon"
                        src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Borussia_Dortmund_logo.svg/960px-Borussia_Dortmund_logo.svg.png"
                    /&gt;
                &lt;/td&gt;
                &lt;td class="oldb-center"&gt;2&lt;/td&gt;
                &lt;td class="oldb-center"&gt;:&lt;/td&gt;
                &lt;td class="oldb-center"&gt;0&lt;/td&gt;
                &lt;td class="oldb-center oldb-tdicon"&gt;
                    &lt;img
                        class="oldb-center oldb-icon"
                        src="https://upload.wikimedia.org/wikipedia/commons/f/f7/Hamburger_SV_logo.svg"
                    /&gt;
                &lt;/td&gt;
                &lt;td class="oldb-left oldb-full"&gt;Hamburger SV&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr class="todaygameheader"&gt;
                &lt;td class="oldb-right oldb-datetime" colspan="3"&gt;08/30&lt;/td&gt;
                &lt;td class="" /&gt;
                &lt;td class="oldb-left oldb-datetime" colspan="3"&gt;03:30 PM&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr class="todaygame"&gt;
                &lt;td class="oldb-right oldb-full"&gt;SC Freiburg&lt;/td&gt;
                &lt;td class="oldb-center oldb-tdicon"&gt;
                    &lt;img
                        class="oldb-icon"
                        src="https://i.imgur.com/r3mvi0h.png"
                    /&gt;
                &lt;/td&gt;
                &lt;td class="oldb-center"&gt;-&lt;/td&gt;
                &lt;td class="oldb-center"&gt;:&lt;/td&gt;
                &lt;td class="oldb-center"&gt;-&lt;/td&gt;
                &lt;td class="oldb-center oldb-tdicon"&gt;
                    &lt;img
                        class="oldb-center oldb-icon"
                        src="https://upload.wikimedia.org/wikipedia/commons/b/be/SV-Werder-Bremen-Logo.svg"
                    /&gt;
                &lt;/td&gt;
                &lt;td class="oldb-left oldb-full"&gt;SV Werder Bremen&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr class="todaygameheader"&gt;
                &lt;td class="oldb-right oldb-datetime" colspan="3"&gt;08/30&lt;/td&gt;
                &lt;td class="" /&gt;
                &lt;td class="oldb-left oldb-datetime" colspan="3"&gt;05:30 PM&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr class="todaygame"&gt;
                &lt;td class="oldb-right oldb-full"&gt;FC Augsburg&lt;/td&gt;
                &lt;td class="oldb-center oldb-tdicon"&gt;
                    &lt;img
                        class="oldb-icon"
                        src="https://i.imgur.com/sdE62e2.png"
                    /&gt;
                &lt;/td&gt;
                &lt;td class="oldb-center"&gt;-&lt;/td&gt;
                &lt;td class="oldb-center"&gt;:&lt;/td&gt;
                &lt;td class="oldb-center"&gt;-&lt;/td&gt;
                &lt;td class="oldb-center oldb-tdicon"&gt;
                    &lt;img
                        class="oldb-center oldb-icon"
                        src="https://upload.wikimedia.org/wikipedia/commons/9/97/FC_Schalke_04_Logo.png"
                    /&gt;
                &lt;/td&gt;
                &lt;td class="oldb-left oldb-full"&gt;FC Schalke 04&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;

</code></pre>
<p dir="auto">hier die antwort</p>
<p dir="auto">Ja. Ich würde das Widget etwas moderner machen: dunkler Card-Hintergrund, klarere Spielzeilen, größere Logos und eine deutliche Hervorhebung der heutigen Spiele.</p>
<p dir="auto">Du kannst deine bisherigen CSS-Regeln im <code>&lt;style&gt;</code>-Block durch diese ersetzen:</p>
<pre><code class="language-css">#w00030 {
    font-family: Arial, sans-serif;
    font-size: 12px !important;
    color: #f5f5f5;
    background: #181b20;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

/* Tabelle */
#w00030 .oldb-tt {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 4px;
}

/* Grundformatierung der Zellen */
#w00030 .oldb-tt td {
    white-space: nowrap;
    padding: 5px 3px;
    vertical-align: middle;
}

/* Vereinslogos */
#w00030 .oldb-icon {
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Spalte mit Vereinslogo */
#w00030 .oldb-tdicon {
    width: 32px;
    min-width: 32px;
}

/* Teamnamen */
#w00030 .oldb-full {
    width: 50%;
    font-weight: 500;
}

/* Datum / Uhrzeit */
#w00030 .oldb-datetime {
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
    padding-top: 9px !important;
    padding-bottom: 2px !important;
}

/* Ergebnis */
#w00030 .oldb-tt tr:not(.todaygameheader) td:nth-child(3),
#w00030 .oldb-tt tr:not(.todaygameheader) td:nth-child(4),
#w00030 .oldb-tt tr:not(.todaygameheader) td:nth-child(5) {
    font-weight: 700;
    font-size: 14px;
    color: #ffffff;
}

/* heutige Spiel-Zeit */
#w00030 .todaygameheader td {
    color: #55d68b;
    font-weight: 700;
}

/* heutiges Spiel */
#w00030 .todaygame {
    background: rgba(55, 180, 110, 0.12);
}

/* erste und letzte Zelle des heutigen Spiels abrunden */
#w00030 .todaygame td:first-child {
    border-radius: 8px 0 0 8px;
}

#w00030 .todaygame td:last-child {
    border-radius: 0 8px 8px 0;
}

/* kleine Hover-Animation */
#w00030 .oldb-tt tr:not(.todaygameheader):hover {
    background: rgba(255,255,255,0.06);
}

/* Ausrichtung */
#w00030 .oldb-center {
    text-align: center;
}

#w00030 .oldb-right {
    text-align: right;
}

#w00030 .oldb-left {
    text-align: left;
}

#w00030 .oldb-wrap {
    white-space: normal !important;
}

#w00030 .oldb-goal {
    white-space: nowrap;
    display: inline-block;
}
</code></pre>
<p dir="auto">Damit bekommt das Widget ungefähr einen <strong>modernen Dark-Mode-/Sports-App-Look</strong>. Besonders die heutigen Partien werden leicht grün hinterlegt, während bereits gespielte Begegnungen dezenter bleiben.</p>
<p dir="auto">Ein Punkt ist bei deinem aktuellen HTML allerdings ungünstig: Datum/Uhrzeit und Spiel sind jeweils zwei getrennte <code>&lt;tr&gt;</code>-Zeilen. Dadurch kann man mit reinem CSS nicht ganz so einfach jede Begegnung als perfekte einzelne „Karte“ gestalten. Mit dem vorhandenen Markup kann man aber schon ziemlich viel herausholen.</p>
<p dir="auto">Wenn du es noch etwas hochwertiger möchtest, würde ich zusätzlich die Teamnamen bei dem nur <strong>327 px breiten Widget</strong> kleiner bzw. mit Ellipsis behandeln:</p>
<pre><code class="language-css">#w00030 .oldb-full {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}
</code></pre>
<p dir="auto">Dann wird beispielsweise ein sehr langer Vereinsname nicht das komplette Layout auseinanderziehen.</p>
<p dir="auto">Ich kann dir auch eine zweite Variante im <strong>Bundesliga-/DAZN-Stil mit schwarzen Spielkarten, großen Ergebnissen und farbigem „HEUTE“-Badge</strong> bauen.</p>
<hr />
<p dir="auto">Ergebnis sieht dann so aus, nachdem ich das css einfach in den reiter kopiert habe<br />
<img src="/assets/uploads/files/1788059401205-2e10fc89-0fc0-42cb-8a57-22aa7aec0460-image.jpeg" alt="2e10fc89-0fc0-42cb-8a57-22aa7aec0460-image.jpeg" class=" img-fluid img-markdown" /></p>
<p dir="auto">da gibt es sicherlich noch verbesserungspotential<br />
auch habe ich vergessen der ki zu sagen, das man das html nicht anpassen kann, sondern nur die vorhandenen css regeln überschreiben kann oder<br />
das das html dynamisch erzeugt wird und die childs nicht immer das gleiche anzeigen.<br />
oder das er eine eigene css klasse definieren soll, die man dann in der widget konfiguration unter General/CSS Class eintragen kann, so zielt es aktuell nur auf die widgetid oder<br />
auch habe ich keine detaillierten Design Anweisungen gegeben.</p>
<p dir="auto">noch eine Anmerkung: ich habe die Oberfläche hier auf englisch eingestellt, daher die englische notation von datum und zeit.</p>
]]></description><link>https://forum.iobroker.net/post/1352869</link><guid isPermaLink="true">https://forum.iobroker.net/post/1352869</guid><dc:creator><![CDATA[OliverIO]]></dc:creator><pubDate>Sun, 30 Aug 2026 03:16:59 GMT</pubDate></item></channel></rss>