Card-Mod Einstellungen werden zurück gesetzt

F

Fr4nkySt0ned

New member
Hallo alle zusammen,
ich beschäftige mich nun seit einigen Wochen mit dem HA und habe mir nach und nach einiges an KnowHow zusammen gesammelt und auch in die Tat umgesetzt. Nun bin ich hier um mir neue Inspiration zu holen, Hilfe bekommen und natürlich mittleerweile auch möglich zu geben in manchen Dingen.
Ich habe natürlich auch direkt eine Frage, sie hat nix mit der Funktion selber zu tun aber es nervt mich ungemein :)
Ich habe ein Dashboard quasi fürs Handy wo nur die wichtigsten Lampen gesteuert werden können. Damit man natürlich auch den Hintergrund sieht habe ich diese "Transparent" gemacht. Leider scheint es sich nach einer gewissen Zeit zurück zu setzen und die Buttons sind dann wieder Standart-Schwarz. Ich muss dann nur einmal auf bearbeiten und kann direkt auf Fertig und alle Buttons sind wieder transparent. Woran liegt es dass er sich immer zurück setzt und ich nur ins Bearbeitungsmenü kurz rein muss damit er sich wieder "fängt".?
Ich setze mal den gesamten Code für einen der Schalter ein.

YAML: 
show_name: true
show_icon: true
type: button
tap_action:
  action: toggle
entity: switch.lichterkette_flur_switch_0
icon: mdi:lightbulb
show_state: true
icon_height: 50px
card_mod:
  style: |
    ha-card {
      background: none;
      box-shadow: none;
    }
    h1.card-header {
      padding: 100px;
    }
    div#states.card-content {
      padding: 100px;
    }
 
Greifen die anderen CSS-Angaben wie padding in dem Moment auch nicht? Dann würde vermutlich sogar ein reload der Seite helfen. Wenn die anderen noch greifen könnte es helfen, die Angabe für Background noch mit einem !important zu versehen: background: none !important;.
 
Ich habe mir den Code ehrlich gesagt zusammengesucht und weiß gar nicht was padding bewirkt, mit dem important hat es leider keine Besserung gegeben. :(
 
Fr4nkySt0ned schrieb:
weiß gar nicht was padding bewirkt
Zum Vergrößern anklicken....
Padding bewirkt einen Innenabstand im Element, das sollte mit 100 Pixeln deutlich auffallen, wenn Du ein Elemente h1 mit der Klasse card-header hast. Zur Verdeutlichung, einmal mit normalen Werten, einmal mit den 100 Pixeln:
1729674159840.png1729674188087.png

Die Frage ist eben, werden die Angaben von card_mod überhaupt nicht umgesetzt (dann wäre auch das padding weg) oder nur die Angabe für den Hintergrund.

Du könntest nochmal um diese Angabe erweitern: background-color: transparent;
 
Nival schrieb:
Padding bewirkt einen Innenabstand im Element, das sollte mit 100 Pixeln deutlich auffallen, wenn Du ein Elemente h1 mit der Klasse card-header hast. Zur Verdeutlichung, einmal mit normalen Werten, einmal mit den 100 Pixeln:
Anhang anzeigen 8665Anhang anzeigen 8666

Die Frage ist eben, werden die Angaben von card_mod überhaupt nicht umgesetzt (dann wäre auch das padding weg) oder nur die Angabe für den Hintergrund.

Du könntest nochmal um diese Angabe erweitern: background-color: transparent;
Zum Vergrößern anklicken....
OK scheinbar ignoriert er das padding auch. Also scheint er den Code ja nicht richtig zu verarbeiten. Komisch halt nur dass er kurzzeitig transparent wie gewünscht ist. Womit kann es denn nun zusammen hängen dass der Code nicht wirklich verarbeitet wird, bzw nicht richtig/dauerhaft/komplett .
 
Padding ignoriert er irgendwie komplett. Ich habe es nun mal mit mushroom Buttons ausprobiert und dort scheint es bisher zu funktionieren, alle mushroom-buttons sind transparent nur alle "Originale" setzten sich immer auf schwarzen Hintergrund zurück.
 
Dann kommen wir zurück zu der Frage, ob Du mal einen anderen Browser ausprobiert hast, und man könnte versuchsweise einen CSS-Wert angeben der nicht überschreiben muss (weil er noch nicht angegeben ist) und schauen, ob der genommen wird.

Browsercache löschen könnte auch noch eine Möglichkeit sein, der ist für solche Phänomene öfters mal verantwortlich.

Das passiert nur am iPhone und nicht an anderen Geräten?
 
Ich versuche es mal kurz zusammen zu fassen, bei meinem PC zu Hause auf meinem Android Telefon und auf meinem Laptop den ich nutze um auf geschäftsreise weiterbasteln zu können, mit allen das gleiche Problem. Über Android benutze ich natürlich die App und nicht einen Browser. Das Programmieren ist für mich noch eine ganz neue Sache und ich versuche mich danach und nach rein zu fuchsen, weiß aber daher nicht welchen Befehl ich nutzen könnte welcher keinen anderen Wert überschreiben muss.
 
Fr4nkySt0ned schrieb:
Ich versuche es mal kurz zusammen zu fassen, bei meinem PC zu Hause auf meinem Android Telefon und auf meinem Laptop den ich nutze um auf geschäftsreise weiterbasteln zu können, mit allen das gleiche Problem.
Zum Vergrößern anklicken....
Okay, das ist prima. Also für eine mögliche Lösungsfindung.

Poste bitte mal Deinen kompletten Code für "Wetter" :)
 
Code: 
show_current: true
show_forecast: true
type: weather-forecast
entity: weather.forecast_home
forecast_type: hourly
theme: Mushroom Shadow
card_mod:
  style: |
    ha-card {
      background: blue;
      box-shadow: none;
      background-color: transparent;
      !important;
    }
    h1.card-header {
      padding: 100px;
    }
    div#states.card-content {
      padding: 100px;
    }

Das ist der Code der mir angezeigt wird wenn ich es bearbeite und auf code editor Anzeigen gehe. Sowas wie der Mushroom ist jetzt nur drinne weil ich über die Einstellung schon hin und her probiert habe.
Der untere Teil ist halt der gleiche code wie ich es bei allen versucht hatte um es transparent zu bekommen.
 
Ah, danach hätte ich eher fragen sollen. Zwischen der Angabe und !important darf kein Semikolon stehen.

Nimm mal diesen Code:
YAML: 
show_current: true
show_forecast: true
type: weather-forecast
entity: weather.forecast_home
forecast_type: hourly
card_mod:
  style: |
    ha-card {
      box-shadow: none;
      background-color: transparent !important;
      background: none !important;
    }

Wenn das Problem dann immernoch auftritt schauen wir weiter.

Die Wetter-Karte hat übrigens garkein h1.card-header, insofern konnte dort das padding auch nicht irgendetwas bewirken.
 
Wo kann ich denn am besten lernen für was z.b das H1 steht oder andere Kommandos? Also es ist genau das gleiche wie vorher, nach dem editieren ist das Feld kurzzeitig transparent und sobald ich es neu aufrufe ist der Hintergrund wieder schwarz 😔😔 aber an dieser Stelle erstmal ganz vielen Dank für dein bemühen und deine Hilfe 😃😃
Sollte das wetterfenster zumindest passend zu dem Wetter irgendwas Anzeigen wäre das ja auch okay 😅
 
Zuletzt bearbeitet:
Fr4nkySt0ned schrieb:
Wo kann ich denn am besten lernen für was z.b das H1 steht oder andere Kommandos?
Zum Vergrößern anklicken....
Das ist im Prinzip recht einfach, es gibt Elemente, Klassen und IDs, diese kann man kombinieren oder verschachteln (da muss man extrem auf Leerzeichen aufpassen) und damit gezielt Elemente ansprechen. In CSS haben Klassen einen Punkt vorangestellt, IDs eine Raute und Elemente garnichts.

Stehen die Angaben ohne Leerzeichen nacheinander sind sie kombiniert, also h1.card-header ist das Element h1 mit der Klasse card-header. Stände dort ein Leerzeichen dazwischen, dann wäre es verschachtelt, so: h1 .card-header - das wäre dann das Element h1 und dadrin etwas mit der Klasse card-header. Das div#states.card-content ist ein Element div mit der ID states und der Klasse card-content.

Wie man ermittelt welche Elemente vorhanden und durch was anzusprechen sind hatte ich hier: https://forum.heimnetz.de/threads/alarm-panel-status-von-und-nach-homematik.827/#post-44469 und im übernächsten Beitrag schonmal erklärt.

Fr4nkySt0ned schrieb:
Also es ist genau das gleiche wie vorher, nach dem editieren ist das Feld kurzzeitig transparent und sobald ich es neu aufrufe ist der Hintergrund wieder schwarz
Zum Vergrößern anklicken....
Hmhmm. Es könnte ein Javascript-Fehler beim initialen Ladevorgang sein, tritt ein solcher auf, wird weiterer JS-Code nicht mehr ausgeführt. Mach mal einen Rechtsklick irgendwo auf das Dashboard, dann im Kontextmenü "Untersuchen" klicken und den Reiter "Konsole" aktivieren, dann die Seite neu laden. Steht danach dort etwas in roter Farbe als Fehler?
 
Nival schrieb:
Das ist im Prinzip recht einfach, es gibt Elemente, Klassen und IDs, diese kann man kombinieren oder verschachteln (da muss man extrem auf Leerzeichen aufpassen) und damit gezielt Elemente ansprechen. In CSS haben Klassen einen Punkt vorangestellt, IDs eine Raute und Elemente garnichts.

Stehen die Angaben ohne Leerzeichen nacheinander sind sie kombiniert, also h1.card-header ist das Element h1 mit der Klasse card-header. Stände dort ein Leerzeichen dazwischen, dann wäre es verschachtelt, so: h1 .card-header - das wäre dann das Element h1 und dadrin etwas mit der Klasse card-header. Das div#states.card-content ist ein Element div mit der ID states und der Klasse card-content.

Wie man ermittelt welche Elemente vorhanden und durch was anzusprechen sind hatte ich hier: https://forum.heimnetz.de/threads/alarm-panel-status-von-und-nach-homematik.827/#post-44469 und im übernächsten Beitrag schonmal erklärt.


Hmhmm. Es könnte ein Javascript-Fehler beim initialen Ladevorgang sein, tritt ein solcher auf, wird weiterer JS-Code nicht mehr ausgeführt. Mach mal einen Rechtsklick irgendwo auf das Dashboard, dann im Kontextmenü "Untersuchen" klicken und den Reiter "Konsole" aktivieren, dann die Seite neu laden. Steht danach dort etwas in roter Farbe als Fehler?
Zum Vergrößern anklicken....
Ok da werde ich mich ganz in Ruhe einlesen müssen. Wenn das in meinem Alter noch klappt :p
Also ich muss mich halb korrigieren da ich vorhin nur mit Handy unterwegs war. Also im Browser funktioniert es jetzt einwandfrei, lediglich in der APP wird der Wetter-Button mit schwarzem Hintergrund angezeigt, also Pc gut, Handy naja neeee :) Alles irgendwie verhext..
 
Fr4nkySt0ned schrieb:
Ok da werde ich mich ganz in Ruhe einlesen müssen. Wenn das in meinem Alter noch klappt :p
Zum Vergrößern anklicken....
Wenn Du unsicher bist kannst Du jederzeit nachfragen :)
Fr4nkySt0ned schrieb:
Also ich muss mich halb korrigieren da ich vorhin nur mit Handy unterwegs war. Also im Browser funktioniert es jetzt einwandfrei, lediglich in der APP wird der Wetter-Button mit schwarzem Hintergrund angezeigt, also Pc gut, Handy naja neeee :) Alles irgendwie verhext..
Zum Vergrößern anklicken....
Aber am PC gab es das Problem vorher ja auch, richtig? Vielleicht in der App mal die Daten löschen (ggf. genügt auch schon ab- und wieder anmelden)?
 
Nival schrieb:
Wenn Du unsicher bist kannst Du jederzeit nachfragen :)

Aber am PC gab es das Problem vorher ja auch, richtig? Vielleicht in der App mal die Daten löschen (ggf. genügt auch schon ab- und wieder anmelden)?
Zum Vergrößern anklicken....
Sorry lag einige Tage total flach. Habe nun noch bisschen rumprobiert und alle Daten zich mal gelöscht aber das Phänomen, mal geht es mal nicht, bleibt. Naja so habe ich mich erstmal mit wichtigeren Dingen wie Zigbee2MQTT beschäftigt :p
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Zurzeit aktive Besucher

Keine Mitglieder online.
Gesamt: 87 (Mitglieder: 1, Gäste: 86)

Neueste Beiträge

Letzte Anleitungen

Statistik des Forums

Themen
6.671
Beiträge
64.016
Mitglieder
6.929
Neuestes Mitglied
Ernst57

Teilen

Zurück
Oben