Mit HACS heruntergeladen, HA neu gestartet, UIX über die Integrationen integriert?
1 „Gefällt mir“
das war das Problem, dnake dir!
Für Interessierte: Hier finden Sie meine vollständige Themendatei mit vielen realen UIX-Anwendungen.
Ich habe schon vor einer Weile auf UIX gewechselt. Der grosse Vorteil: du musst dich kaum noch um Shadow-DOM und den Krempel kümmern. UIX bringt ein geniales Feature mit - du kannst in den Entwicklertools deines Browsers (F12) das gewünschte Textelement markieren und in der Konsole
uix_path($0)
eingeben. Das Tool spuckt dir dann den exakten Pfad aus bzw. das komplette Snippet, dass du nur noch copy-paste in das Karten YAML einfügen muss
Mich hat es extrem genervt, dass mit einem der letzten Updates die Logbook Karte so zu Tode verstümpert werden musste. Mit UIX war es recht schnell wieder hingebogen.
Beispiel nur das erste Entry im Logbook färben:
uix:
style:
ha-logbook $ ha-logbook-renderer $: >
div.container lit-virtualizer div.entry-container:nth-of-type(1) div.entry
div.icon-message div.message-relative_time div.message {
/* your styles for div */
font-size: 25px; color: yellow;
background-color: blue;
}
div.container lit-virtualizer div.entry-container:nth-of-type(1) div.entry
div.icon-message div.message-relative_time div.secondary span { /* your
styles for undefined */
color: red;
font-size: 15px;
}
div.container lit-virtualizer div.entry-container:nth-of-type(1) div.entry
div.icon-message div.message-relative_time div.secondary ha-relative-time
{
/* your styles for ha-relative-time */
color: black;
font-size: 23px;
}
div.container lit-virtualizer div.entry-container:nth-of-type(1) div.entry
{
/* your styles for div */
background-color: green;
}
Oder alle färben:
uix:
style:
.: |
h1.card-header {
color: #b5b5b5; /* Hier deine Wunschfarbe für den Titel */
}
ha-card {
/* Falls du hier noch Rahmen oder ähnliches brauchst */
}
ha-logbook $ ha-logbook-renderer $: |
div.container lit-virtualizer h4.date {
/* your styles for h4 Datum */
font-size: 20px;
color: #b5b5b5;
ha-logbook $ ha-logbook-renderer $ ha-logbook-entry $: |
div.entry {
/* your styles for div */
--divider-color: orange;
}
/* 1. Den originalen farbigen Punkt unsichtbar machen */
div.entry div.node span.dot {
background-color: transparent !important;
border: none !important;
width: 24px !important;
height: 24px !important;
position: relative;
}
/* 2. Das Personen-Icon (mdi:account) als SVG-Hintergrund einfügen */
div.entry div.node span.dot::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
/* Blaues Personen-Icon (mdi:account). Farbe angepasst auf #2196F3 */
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%232196F3' d='M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z'/></svg>");
background-repeat: no-repeat;
background-size: contain;
}
/* 3. Den vertikalen Verbindungsstrich (Timeline) entfernen */
div.entry div.node::before,
div.entry div.node::after {
display: none !important;
}
div.entry div.content div.primary span.primary-text {
/* your styles for status */
color: blue;
font-size: 20px;
display: none;
}
div.entry div.content div.primary span.trailing span.time-chip {
/* your styles for Uhrzeit */
color: #b5b5b5;
font-size: 20px;
padding-left: 30px;
}
Manchmal muss man ein wenig pröblen d.h. den zu formatierenden Text auswählen, manchmal den Rahmen drum herum. Für mich jedenfalls eine immense Steigerung und Vereinfachung gegenüber card-mod.
Servus,
ich wollte einfach mal Danke sagen, für die Eure unermüdliche Hilfe.
Ich habe dieses Thema komplett übersehen und bin schon seit Tagen an der “Fehlersuche” dran.
In diesem Forum bin ich fündig geworden und die Lösung gefunden.
Stellt euch nun mein breites und glückliches Grinsen vor. 
Also nochmals vielen Dank für die Hilfe und die ganzen Tipps.
1 „Gefällt mir“
Verstehe nicht so ganz warum sich sowas nicht direkt unter HA einstellen lässt. Jeder hat andere Vorstellungen wie die Farbe aussehen soll beim Status der Geräte. In diesem Zusammenhang wurde immer card-mod genannt was ich aus zeitlichen Gründen noch nicht installiert hatte. Da card-mod mit der HA Version 2026.8 wohl obsolet wurde wird es Zeit sich mit UIX zu beschäftigen. Da helfen mir doch noch meine guten alten CSS3-Bücher zum nachschlagen und das sogar offline 
UIX ist abwärtskompatibel zu card-mod. Du kannst card-mod also weiter verwenden.
Ist komplett an mir vorbei gegangen das Thema. Danke fürs draufstubsen. Habe soeben auf uix und den fork von apex charts gewechselt und bin erstaunt. Es geht um ein vielfaches schneller als vorher. Top!
wo muss ich im code dann genau card-mod bzw. card_mod ersetzen? finde nix in der config-yaml und auch sonst nirgends. card-mod aus HACS gelöscht, Neustart, dann UIX installiert, Neustart. Aktuell habe ich ha 2026.8.3.
UIX musst du auch als Integration hinzufügen.
Und card_mod: musst du an deinen Dashboardkarten wo du card mod genutzt hast ersetzen durch uix:
Du musst ja irgendwo in deinem Dashboard solche sachen benutzt haben, anstatt uix: halt card_mod: wenn nicht dann hast du card mod nie benutzt nur installiert
uix:
style:
ha-tile-container$: |
:host {
align-items: center !important;
justify-content: center !important;
}
ha-tile-info$: |
.primary {
font-size: 18px !important;
}
nope, es wird empfohlen, muss aber nicht gemacht werden:
Is UI eXtension a drop in replacement for Card-mod?
Yes, UI eXtension is a drop in replacement for Card-mod versions up to 4.2.1. All Card-mod card and themes configurations are supported. While you are encouraged to update to use
uix:in your cards anduix-<thing>(-yaml)for your themes, it is not required.
ich habe es bis jetzt nicht geändert und es funktioniert, werde es aber trotzdem mit der Zeit ändern.
LG
Ja sorry, muss nicht, aber lieber zeitnah machen und gut ist
Hi,
ich bin zu UIX umgestiegen und hatte keine Probleme damit. Das Einzige was für mich eine Hürde ist, mein englisch ist nicht so gut um alles in der Doku zu verstehen. Ich habe mir mit einen Bekannten auch wie ich nicht mehr der Jüngste ist, Gedanken gemacht und haben eine inoffizielle auf der original Doku basierenden Doku eine deutsche Doku umgesetzt. Wir werden Sie versuchen immer auf dem Stand der Original Doku zu halten. Hier der Link. Ich würde gerne eure Meinung dazu erfahren, ob das sinnvoll ist. Ich denke ja da nicht jede Englisch kann. Übrigens den Entwicklern habe ich die Doku zur Integration angeboten, sie haben angeboten später entsprechend die Übersetzung zu verlinken.
5 „Gefällt mir“
Finde ich toll, dass du dir solche Mühe machst. 
Bestimmt für viele ganz hilfreich.
Aber mal nebenbei als Tipp, übersetzen von jeglichem Text (im Browser oder sonstwo) geht auch ganz flott und unkompliziert mit DeepL:
Text markieren, dann erscheint das Symbol zum Übersetzen automatisch:
Jetzt aufs Symbol klicken, dann erscheint die Übersetzung in einem neuen Fenster:
Nach Installation von DeepL nur mal die Einstellungen durchgehen und auch die Browser-Erweiterung installieren. Wird hier schon seit Jahren genutzt.
Aber vielleicht kennst du das ja auch schon 
Hallo rockbaer2007,
diese Übersetzung ist richtig klasse. Viel besser als eine 1:1 Übersetzung von einzelnen Passagen. Die werde ich wohl oft nutzen.
Danke dafür.
VG
Rainer
Beachte bitte sie ist noch in der Aufbauphase, ich stimme mich mit den Originalanbieter ab, er wird wahrscheinlich auch die Übersetzung verlinken
Ich habe eine Bitte beim finden von fehlern im Text mit Angabe wo eine kurze Nachricht an mich.
P.S. Nicht jeder kann englisch und ja es gibt Übersetzungsfunktionen und es gibt DeepL, ich bin gern bereit meine ursprünglich für mich erstellten Übersetzungen zuteilen, sag mir ich noch freigeben soll.
Vorschläge für Übersetzungen per pn
Vielen Dank für die Mühe, die ihr euch damit gemacht habt. 
Danke für die Bereitstellung habe deine Beispielthemen mit in meine Doku aufgenommen
Weitere interessante Beispiele | UGSo Open Source sorry musste Seite noch einmal überarbeiten
1 „Gefällt mir“
Bei mir klappt die Migration leider nicht problemlos.
Ich nutze fleißig diesen Code, um die die Zeilen in der Entities-Karte zusammenzuschieben.
type: horizontal-stack
cards:
- type: entities
entities:
- entity: sensor.bitshake_smartmeterreader_ddz_e_in
name: DDZ E_in
card_mod:
style: |
hui-generic-entity-row {
height: 20px;
}
- entity: sensor.bitshake_smartmeterreader_ddz_e_out
name: DDZ E_out
card_mod:
style: |
hui-generic-entity-row {
height: 20px;
}
- entity: sensor.bitshake_smartmeterreader_ddz_power
name: DDZ Power
card_mod:
style: |
hui-generic-entity-row {
height: 20px;
}
Das sieht mit Card-Mod dann so aus:
Nach der Migration wird es ignoriert.
Mache ich einen Fehler?
Vg Max
PS: card_mod: wurde auch schon durch uix: erstetzt. HA-Version 2026.8.3
Ich bin auf
type: custom:stack-in-card
umgestiegen, die funktioniert besser, bei mir ist der ganze Block aber am Ende, ungefähr so:
uix:
style:
.: |
ha-card
{
border: 0px !important;
}
ha-card::before
{
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
'#states div':
hui-sensor-entity-row $: |
hui-generic-entity-row
{
min-height: 26px !important;
height: 26px !important;
font-weight: lighter !important;
font-size: 16px;
}
hui-sensor-entity-row $ hui-generic-entity-row $: |
.info, .value
{
min-height: 26px !important;
padding-top: 5px;
}
state-badge.pointer
{
height: 26px !important;
line-height: 26px !important;
}
hui-simple-entity-row $: |
hui-generic-entity-row
{
min-height: 26px !important;
height: 26px !important;
font-weight: lighter !important;
font-size: 16px;
}
hui-simple-entity-row $ hui-generic-entity-row $: |
.info, .value
{
min-height: 26px !important;
padding-top: 5px;
}
state-badge.pointer
{
height: 26px !important;
line-height: 26px !important;
}
1 „Gefällt mir“