@matze55
da man es designmäßig es nie allen recht machen kann, mache ich meine widget meist mit einem gewissen grunddesign.
darüber hinaus definiere ich css klassen über die dann jeder da noch was dazu definieren kann.
diese css klassen sind hier bspw am gameday beschrieben.
https://github.com/oweitman/ioBroker.openligadb#games-of-gameday-v2
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
wenn man sich mit css klassen nicht so gut auskennt,
empfehle ich den html code eines widgets mit den webdeveloper tools zu kopieren. da sind die vorgegebenen css regeln mit enthalten.
diese der ki zu ngeben und sie zu bitten, entweder einfach diese hübsch zu machen oder genauere regeln der ki vorzugeben.
evtl noch den tip den html code nicht zu verändern, sondern nur css regeln auszugeben die evtl vorhandene css regeln überschreiben.
ich mache mal ein einfaches schnelles beispiel:
hier mein prompt mit dem aktuellen html
kannst du mir für den folgenden html code css regeln definieren, so das er etwas ansprechender aussieht
<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"
>
<style>
#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;
}
</style>
<table class="oldb-tt">
<tbody>
<tr>
<td class="oldb-right oldb-datetime" colspan="3">08/28</td>
<td class="" />
<td class="oldb-left oldb-datetime" colspan="3">08:30 PM</td>
</tr>
<tr>
<td class="oldb-right oldb-full">FC Bayern München</td>
<td class="oldb-center oldb-tdicon">
<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"
/>
</td>
<td class="oldb-center">5</td>
<td class="oldb-center">:</td>
<td class="oldb-center">1</td>
<td class="oldb-center oldb-tdicon">
<img
class="oldb-center oldb-icon"
src="https://i.imgur.com/v0tkpNx.png"
/>
</td>
<td class="oldb-left oldb-full">VfB Stuttgart</td>
</tr>
<tr>
<td class="oldb-right oldb-datetime" colspan="3">08/29</td>
<td class="" />
<td class="oldb-left oldb-datetime" colspan="3">03:30 PM</td>
</tr>
<tr>
<td class="oldb-right oldb-full">RB Leipzig</td>
<td class="oldb-center oldb-tdicon">
<img
class="oldb-icon"
src="https://i.imgur.com/Rpwsjz1.png"
/>
</td>
<td class="oldb-center">3</td>
<td class="oldb-center">:</td>
<td class="oldb-center">0</td>
<td class="oldb-center oldb-tdicon">
<img
class="oldb-center oldb-icon"
src="https://i.imgur.com/KSIk0Eu.png"
/>
</td>
<td class="oldb-left oldb-full">Borussia Mönchengladbach</td>
</tr>
<tr>
<td class="oldb-right oldb-full">1. FSV Mainz 05</td>
<td class="oldb-center oldb-tdicon">
<img
class="oldb-icon"
src="https://upload.wikimedia.org/wikipedia/commons/9/9e/Logo_Mainz_05.svg"
/>
</td>
<td class="oldb-center">0</td>
<td class="oldb-center">:</td>
<td class="oldb-center">0</td>
<td class="oldb-center oldb-tdicon">
<img
class="oldb-center oldb-icon"
src="https://upload.wikimedia.org/wikipedia/commons/e/e3/SC_Paderborn_07_Logo.svg"
/>
</td>
<td class="oldb-left oldb-full">SC Paderborn 07</td>
</tr>
<tr>
<td class="oldb-right oldb-full">1. FC Union Berlin</td>
<td class="oldb-center oldb-tdicon">
<img
class="oldb-icon"
src="https://assets.dfb.de/uploads/000/018/232/small_union-Berlin.jpg"
/>
</td>
<td class="oldb-center">3</td>
<td class="oldb-center">:</td>
<td class="oldb-center">3</td>
<td class="oldb-center oldb-tdicon">
<img
class="oldb-center oldb-icon"
src="https://i.imgur.com/X8NFkOb.png"
/>
</td>
<td class="oldb-left oldb-full">Eintracht Frankfurt</td>
</tr>
<tr>
<td class="oldb-right oldb-full">1. FC Köln</td>
<td class="oldb-center oldb-tdicon">
<img
class="oldb-icon"
src="https://upload.wikimedia.org/wikipedia/commons/0/01/1._FC_Koeln_Logo_2014%E2%80%93.svg"
/>
</td>
<td class="oldb-center">3</td>
<td class="oldb-center">:</td>
<td class="oldb-center">2</td>
<td class="oldb-center oldb-tdicon">
<img
class="oldb-center oldb-icon"
src="https://i.imgur.com/gF0PfEl.png"
/>
</td>
<td class="oldb-left oldb-full">TSG Hoffenheim</td>
</tr>
<tr>
<td class="oldb-right oldb-full">SV 07 Elversberg</td>
<td class="oldb-center oldb-tdicon">
<img
class="oldb-icon"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/SV_Elversberg_Logo.svg/500px-SV_Elversberg_Logo.svg.png"
/>
</td>
<td class="oldb-center">3</td>
<td class="oldb-center">:</td>
<td class="oldb-center">2</td>
<td class="oldb-center oldb-tdicon">
<img
class="oldb-center oldb-icon"
src="https://www.bundesliga-reisefuehrer.de/sites/default/files/B04_Standard_Logo_RGB.png"
/>
</td>
<td class="oldb-left oldb-full">Bayer 04 Leverkusen</td>
</tr>
<tr>
<td class="oldb-right oldb-datetime" colspan="3">08/29</td>
<td class="" />
<td class="oldb-left oldb-datetime" colspan="3">06:30 PM</td>
</tr>
<tr>
<td class="oldb-right oldb-full">Borussia Dortmund</td>
<td class="oldb-center oldb-tdicon">
<img
class="oldb-icon"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Borussia_Dortmund_logo.svg/960px-Borussia_Dortmund_logo.svg.png"
/>
</td>
<td class="oldb-center">2</td>
<td class="oldb-center">:</td>
<td class="oldb-center">0</td>
<td class="oldb-center oldb-tdicon">
<img
class="oldb-center oldb-icon"
src="https://upload.wikimedia.org/wikipedia/commons/f/f7/Hamburger_SV_logo.svg"
/>
</td>
<td class="oldb-left oldb-full">Hamburger SV</td>
</tr>
<tr class="todaygameheader">
<td class="oldb-right oldb-datetime" colspan="3">08/30</td>
<td class="" />
<td class="oldb-left oldb-datetime" colspan="3">03:30 PM</td>
</tr>
<tr class="todaygame">
<td class="oldb-right oldb-full">SC Freiburg</td>
<td class="oldb-center oldb-tdicon">
<img
class="oldb-icon"
src="https://i.imgur.com/r3mvi0h.png"
/>
</td>
<td class="oldb-center">-</td>
<td class="oldb-center">:</td>
<td class="oldb-center">-</td>
<td class="oldb-center oldb-tdicon">
<img
class="oldb-center oldb-icon"
src="https://upload.wikimedia.org/wikipedia/commons/b/be/SV-Werder-Bremen-Logo.svg"
/>
</td>
<td class="oldb-left oldb-full">SV Werder Bremen</td>
</tr>
<tr class="todaygameheader">
<td class="oldb-right oldb-datetime" colspan="3">08/30</td>
<td class="" />
<td class="oldb-left oldb-datetime" colspan="3">05:30 PM</td>
</tr>
<tr class="todaygame">
<td class="oldb-right oldb-full">FC Augsburg</td>
<td class="oldb-center oldb-tdicon">
<img
class="oldb-icon"
src="https://i.imgur.com/sdE62e2.png"
/>
</td>
<td class="oldb-center">-</td>
<td class="oldb-center">:</td>
<td class="oldb-center">-</td>
<td class="oldb-center oldb-tdicon">
<img
class="oldb-center oldb-icon"
src="https://upload.wikimedia.org/wikipedia/commons/9/97/FC_Schalke_04_Logo.png"
/>
</td>
<td class="oldb-left oldb-full">FC Schalke 04</td>
</tr>
</tbody>
</table>
</div>
hier die antwort
Ja. Ich würde das Widget etwas moderner machen: dunkler Card-Hintergrund, klarere Spielzeilen, größere Logos und eine deutliche Hervorhebung der heutigen Spiele.
Du kannst deine bisherigen CSS-Regeln im <style>-Block durch diese ersetzen:
#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;
}
Damit bekommt das Widget ungefähr einen modernen Dark-Mode-/Sports-App-Look. Besonders die heutigen Partien werden leicht grün hinterlegt, während bereits gespielte Begegnungen dezenter bleiben.
Ein Punkt ist bei deinem aktuellen HTML allerdings ungünstig: Datum/Uhrzeit und Spiel sind jeweils zwei getrennte <tr>-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.
Wenn du es noch etwas hochwertiger möchtest, würde ich zusätzlich die Teamnamen bei dem nur 327 px breiten Widget kleiner bzw. mit Ellipsis behandeln:
#w00030 .oldb-full {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
}
Dann wird beispielsweise ein sehr langer Vereinsname nicht das komplette Layout auseinanderziehen.
Ich kann dir auch eine zweite Variante im Bundesliga-/DAZN-Stil mit schwarzen Spielkarten, großen Ergebnissen und farbigem „HEUTE“-Badge bauen.
Ergebnis sieht dann so aus, nachdem ich das css einfach in den reiter kopiert habe
[image: 2e10fc89-0fc0-42cb-8a57-22aa7aec0460-image.jpeg]
da gibt es sicherlich noch verbesserungspotential
auch habe ich vergessen der ki zu sagen, das man das html nicht anpassen kann, sondern nur die vorhandenen css regeln überschreiben kann oder
das das html dynamisch erzeugt wird und die childs nicht immer das gleiche anzeigen.
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
auch habe ich keine detaillierten Design Anweisungen gegeben.
noch eine Anmerkung: ich habe die Oberfläche hier auf englisch eingestellt, daher die englische notation von datum und zeit.
