hallo,
ich benutze für mein dashboard das abschnitte layout. nun habe ich kacheln bzw. stacks in der breite verändert. das hat zur auswirkung, das unschöne zwischenräume entstehen, oder der abstand zum displayrand nicht mehr passt.
zur veranschaulichung habe ich mal einen ausschnitt angehängt.
wie man erkennen kann, ist die rechte vertikale strichlinie weiter von dem stack entfernt. ich würde gern den stack an der rechten linie und nicht an der linken ecke ausgerichtet. ist dies möglich?
hier noch der dazugehörige code:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding: 13px;
border: none !important;
border-radius: 23px !important;
background: rgba(255, 255, 255, 0.10);
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px
13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
}
cards:
- type: custom:mini-graph-card
entities:
- sensor.home_gesamt
line_color: lightgray
line_width: 5
font_size: 100
align_icon: left
align_state: center
height: 87
show:
name: false
labels: false
graph: line
hours_to_show: 24
points_per_hour: 1
icon: mdi:solar-power-variant-outline
icon_adaptive_color: false
card_mod:
style: |
ha-card {
background: rgba(255, 255, 255, 0.40);
border: none;
border-radius: 20px !important;
margin: 0px;
display: flex !important;
justify-content: center !important;
text-align: center !important;
}
#info {
font-size: 110% !important;
}
.card-content {
margin: auto !important;
}
- type: custom:mini-graph-card
entities:
- sensor.02_akku_delta_2_max_battery_level
line_color: gray
line_width: 5
font_size: 100
align_icon: left
align_state: center
height: 87
show:
name: false
labels: false
graph: line
hours_to_show: 24
points_per_hour: 1
icon: mdi:battery-high
icon_adaptive_color: false
card_mod:
style: |
ha-card {
background: rgba(255, 255, 255, 0.40);
border: none;
border-radius: 20px !important;
margin: 0px;
display: flex !important;
justify-content: center !important;
text-align: center !important;
}
#info {
font-size: 110% !important;
}
.card-content {
margin: auto !important;
}
- type: custom:mini-graph-card
entities:
- sensor.home_strompreis
line_color: dimgray
line_width: 5
font_size: 100
align_icon: left
align_state: center
height: 87
show:
name: false
labels: false
graph: line
hours_to_show: 24
points_per_hour: 1
icon: mdi:transmission-tower
icon_adaptive_color: false
card_mod:
style: |
ha-card {
background: rgba(255, 255, 255, 0.40);
border: none;
border-radius: 20px !important;
margin: 0px;
display: flex !important;
justify-content: center !important;
text-align: center !important;
}
#info {
font-size: 110% !important;
}
.card-content {
margin: auto !important;
}
grid_options:
columns: 10
rows: auto
Hi, da musste ich auch erstmal ein wenig suchen, aber habe letztlich was gefunden, über :host lässt sich der gesamte Block verschieben. Teste mal so, hatte mir auch extra einen neuen Abschnitt erstellt.
type: custom:stack-in-card
card_mod:
style: |
:host {
display: block;
margin-left: auto;
max-width: fit-content;
}
ha-card {
padding: 13px;
border: none !important;
border-radius: 23px !important;
background: rgba(255, 255, 255, 0.10);
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
}
cards:
- type: custom:mini-graph-card
entities:
- sensor.home_gesamt
line_color: lightgray
line_width: 5
font_size: 100
align_icon: left
align_state: center
height: 87
show:
name: false
labels: false
graph: line
hours_to_show: 24
points_per_hour: 1
icon: mdi:solar-power-variant-outline
icon_adaptive_color: false
card_mod:
style: |
ha-card {
background: rgba(255, 255, 255, 0.40);
border: none;
border-radius: 20px !important;
margin: 0px;
display: flex !important;
justify-content: center !important;
text-align: center !important;
}
#info {
font-size: 110% !important;
}
.card-content {
margin: auto !important;
}
- type: custom:mini-graph-card
entities:
- sensor.batterie_ladezustand
line_color: gray
line_width: 5
font_size: 100
align_icon: left
align_state: center
height: 87
show:
name: false
labels: false
graph: line
hours_to_show: 24
points_per_hour: 1
icon: mdi:battery-high
icon_adaptive_color: false
card_mod:
style: |
ha-card {
background: rgba(255, 255, 255, 0.40);
border: none;
border-radius: 20px !important;
margin: 0px;
display: flex !important;
justify-content: center !important;
text-align: center !important;
}
#info {
font-size: 110% !important;
}
.card-content {
margin: auto !important;
}
- type: custom:mini-graph-card
entities:
- sensor.home_strompreis
line_color: dimgray
line_width: 5
font_size: 100
align_icon: left
align_state: center
height: 87
show:
name: false
labels: false
graph: line
hours_to_show: 24
points_per_hour: 1
icon: mdi:transmission-tower
icon_adaptive_color: false
card_mod:
style: |
ha-card {
background: rgba(255, 255, 255, 0.40);
border: none;
border-radius: 20px !important;
margin: 0px;
display: flex !important;
justify-content: center !important;
text-align: center !important;
}
#info {
font-size: 110% !important;
}
.card-content {
margin: auto !important;
}
erstmal danke dafür.
habe es gerade getestet. in der vorschau rückt der stack in die mitte. nach speichern und aktualisieren des dashboards tut sich da leider nichts.
Hi, also bei mir geht das nach speichern auch noch.
Ein Versuch bei dir wäre vielleicht noch alles in eine „mod-card“ zu packen
type: custom:mod-card
style: |
:host {
display: block;
margin-left: auto;
max-width: fit-content;
}
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding: 13px;
border: none !important;
border-radius: 23px !important;
background: rgba(255, 255, 255, 0.10);
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
}
cards:
- type: custom:mini-graph-card
entities:
- sensor.home_gesamt
line_color: lightgray
line_width: 5
font_size: 100
align_icon: left
align_state: center
height: 87
show:
name: false
labels: false
graph: line
hours_to_show: 24
points_per_hour: 1
icon: mdi:solar-power-variant-outline
icon_adaptive_color: false
card_mod:
style: |
ha-card {
background: rgba(255, 255, 255, 0.40);
border: none;
border-radius: 20px !important;
margin: 0px;
display: flex !important;
justify-content: center !important;
text-align: center !important;
}
#info {
font-size: 110% !important;
}
.card-content {
margin: auto !important;
}
- type: custom:mini-graph-card
entities:
- sensor.batterie_ladezustand
line_color: gray
line_width: 5
font_size: 100
align_icon: left
align_state: center
height: 87
show:
name: false
labels: false
graph: line
hours_to_show: 24
points_per_hour: 1
icon: mdi:battery-high
icon_adaptive_color: false
card_mod:
style: |
ha-card {
background: rgba(255, 255, 255, 0.40);
border: none;
border-radius: 20px !important;
margin: 0px;
display: flex !important;
justify-content: center !important;
text-align: center !important;
}
#info {
font-size: 110% !important;
}
.card-content {
margin: auto !important;
}
- type: custom:mini-graph-card
entities:
- sensor.home_strompreis
line_color: dimgray
line_width: 5
font_size: 100
align_icon: left
align_state: center
height: 87
show:
name: false
labels: false
graph: line
hours_to_show: 24
points_per_hour: 1
icon: mdi:transmission-tower
icon_adaptive_color: false
card_mod:
style: |
ha-card {
background: rgba(255, 255, 255, 0.40);
border: none;
border-radius: 20px !important;
margin: 0px;
display: flex !important;
justify-content: center !important;
text-align: center !important;
}
#info {
font-size: 110% !important;
}
.card-content {
margin: auto !important;
}
1 „Gefällt mir“
muss ich mal testen. ich sehe, das es funktionieren sollte. kann ich aber erst ende der nächsten woche testen und dann feedback geben.
kurze rückmeldung. habe den code gerade getestet und was soll ich sagen? funktioniert
1 „Gefällt mir“
nach einigem testen, ist mir aufgefallen, das bei gleichem code, die darstellung am pc (wo ich alles programmiere) anders ist, als am tablet (egal ob amazon fire 2023 oder ipad air 2). ausschlaggebend ist natürlich die darstellung am tablet.
hier mal ein beispiel:
bild vom pc
bild vom tablet
hier der code dazu:
type: custom:mod-card
style: |
:host {
display: block;
margin-left: auto;
max-width: fit-content;
}
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: rgba(255, 255, 255, 0.25) !important;
border: none;
border-radius: 33px !important;
padding: 13px;
}
cards:
- type: custom:mini-graph-card
entities:
- sensor.home_gesamt
line_color: green
line_width: 5
font_size: 100
align_icon: left
align_state: center
height: 87
show:
name: false
labels: false
graph: line
hours_to_show: 24
points_per_hour: 1
icon: mdi:solar-power-variant-outline
icon_adaptive_color: false
card_mod:
style: |
ha-card {
background: rgba(255, 255, 255, 0.10);
border: none;
border-radius: 30px !important;
margin: 0px;
display: flex !important;
justify-content: center !important;
text-align: center !important;
}
#info {
font-size: 110% !important;
}
.card-content {
margin: auto !important;
}
- type: custom:mini-graph-card
entities:
- sensor.02_akku_delta_2_max_battery_level
line_color: yellow
line_width: 5
font_size: 100
align_icon: left
align_state: center
height: 87
show:
name: false
labels: false
graph: line
hours_to_show: 24
points_per_hour: 1
icon: mdi:battery-high
icon_adaptive_color: false
card_mod:
style: |
ha-card {
background: rgba(255, 255, 255, 0.10);
border: none;
border-radius: 30px !important;
margin: 0px;
display: flex !important;
justify-content: center !important;
text-align: center !important;
}
#info {
font-size: 110% !important;
}
.card-content {
margin: auto !important;
}
- type: custom:mini-graph-card
entities:
- sensor.home_strompreis
line_color: dimgray
line_width: 5
font_size: 100
align_icon: left
align_state: center
height: 87
show:
name: false
labels: false
graph: line
hours_to_show: 24
points_per_hour: 1
icon: mdi:transmission-tower
icon_adaptive_color: false
color_thresholds:
- value: 0.25
color: green
- value: 0.34
color: yellow
- value: 0.38
color: red
card_mod:
style: |
ha-card {
background: rgba(255, 255, 255, 0.10);
border: none;
border-radius: 30px !important;
margin: 0px;
display: flex !important;
justify-content: center !important;
text-align: center !important;
}
#info {
font-size: 110% !important;
}
.card-content {
margin: auto !important;
}
Hi, was meinst du da jetzt direkt? Den Hintergrund der inneren Cards? Ansonsten sieht es doch gleich aus.
ja genau. habe ich aber schon hinbekommen. ich habe mit den werten der transparent rumprobiert, bis es gepasst hat und die schrift gut lesbar ist.
jayjojayson:
Hi, also bei mir geht das nach speichern auch noch.
Ein Versuch bei dir wäre vielleicht noch alles in eine „mod-card“ zu packen
lässt sich der code für die verlagerung der kacheln von links nach rechts auch mehrfach anwenden?
hintergrund ist, meine navileiste ist dadurch nicht mittig zwischen 2 vertikalen stapeln. meine idee war, das ich die navileiste auch nach links versehtzte, in der hoffnung, das sie etwas mittiger dargestellt wird.
derzeitig sieht es so aus:
der code sieht so aus:
type: custom:mod-card
style: |
:host {
display: block;
margin-left: auto;
max-width: fit-content;
}
card:
type: horizontal-stack
card_mod:
style: |
ha-card {
background: rgba(255, 255, 255, 0.20) !important;
border: none;
border-radius: 30px !important;
margin: 0px;
padding: 0px;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.home_automation
tap_action:
action: navigate
navigation_path: /tablet-solar/home
hold_action:
action: none
double_tap_action:
action: none
name: Home
content_info: name
icon: mdi:home
- type: entity
entity: person.home_automation
tap_action:
action: navigate
navigation_path: /tablet-solar/akku-4kwh
hold_action:
action: none
double_tap_action:
action: none
name: Akku
icon: mdi:battery-high
content_info: name
- type: entity
entity: person.home_automation
tap_action:
action: navigate
navigation_path: /tablet-solar/tibber
hold_action:
action: none
double_tap_action:
action: none
name: Strom
content_info: name
icon: mdi:transmission-tower
- type: entity
entity: person.home_automation
tap_action:
action: navigate
navigation_path: ""
hold_action:
action: none
double_tap_action:
action: none
name: Auto
content_info: name
icon: mdi:car-electric
grid_options:
columns: 9.5
rows: 3
card_mod:
style: |
ha-card {
padding: 8px;
border: none !important;
border-radius: 30px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
background: rgba(255, 255, 255, 0.0);
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px
13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
}
Hi, ich kann in einem Abschnitt auch zwei von den Cards nebeneinander setzen und bei beiden wird links der entsprechende Abstand eingehalten.
Beispiel 1
Du könntest aber auch einfach mit drei Abschnitten arbeiten, die sind dann zueinander ausgerichtet und der mittlere Abschnitt wäre mittig angeordnet.
Beispiel 2
1 „Gefällt mir“
ja beispiel 2 ist optimal.
derzeitig ist nur der rechte schmalere vertikale stapel rechtsseitig (damit der abstand zum display passt, analog der linken seite.
da der mittlere horizontale stapel ebenfalls nicht die komplette breite des abschnitts hat, ist dieser linksbündig. nun wollte ich ebenfalls mit dem code vom rechten stapel der mittleren ebenfalls in die mitte rücken. funktioniert leider nicht.
eingestellt sind bei mir 3 abschnitte.
hier ein besseres beispiel:
ich habe mir jetzt einfach eine unsichtbare, blank kachel erstellt.
ergebnis:
hier der code:
type: custom:button-card
color_type: blank-card
grid_options:
columns: 3
rows: 1
auf dem tablet sieht alles besser aus und vor allem sind die button rund und man sieht nur die icons.
Na super, dann hast du doch ein Lösung gefunden. name: " ". Also einfach dein bei den name: die Bezeichnungen herausnehmen und durch " " ersetzen.
1 „Gefällt mir“
