Button Card - Größe Custom Field #888
Unanswered
firegrisus
asked this question in
Q&A
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
``Hallo,
ich habe ein Dashboard mit div. Button-Cards. Nach einem Update (schon vor langer Zeit) waren plötzlich die Schriftarten und Größen nicht mehr korrekt. Die Schrift habe ich geändert von Display in sans-serif (Dann passten die Titel)
ABER die Größe im Custom Field "Temperatur" reagiert nicht auf Änderungen im Yaml. Über die Browser Entwicklungseinheit und Einstellungen konnte ich es ändern - aber nicht mit Hilfe von Änderungen in Yaml. Ich habe solange schon versucht und mich jetzt nochmal intensiv darum gekümmert. Mittlerweile habe ich soviele Card-Mod Einstellungen probiert etc., dass wahrscheinlich schon an sämlichen Stellen zuviel Code steht. Ich bin sozusagen: Verzweifelt und einfach zu viel Laie.
Zusammengefasst: Es funktionierte mal - alle Ansichten waren ok. Dann änderte sich plötzlich die Größe des Font im Custom-Field. Im Code geänderte Größe wird nicht angenommen (zuvor funktionierte es)
Anhängend ein Bild und ein Beispielcode des

Beispielcode - Button Card
`type: custom:button-card
entity: climate.eg_kleiner_raum
aspect_ratio: 1
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Kleines Zimmer
content:
type: vertical-stack
cards:
- type: thermostat
entity: climate.eg_kleiner_raum
- type: entities
card_mod:
class: content
entities:
- entity: sensor.wandthermostat_kl_raum_temperatur
name: Raumtemperatur am Heizkörper
- entity: sensor.wandthermostat_kl_raum_temperatur
secondary_info: last-changed
name: Heizung
- type: custom:mini-graph-card
entities:
- entity: sensor.wandthermostat_kl_raum_temperatur
line_width: 6
hour24: true
group: true
lign_icon: left
align_state: right
align_header: left
hours_to_show: 24
show:
fill: fade
icon: false
name: false
state: false
name_adaptive_color: false
labels: hover
legend: false
card-mod:
style: |
ha-card {
box-shadow: none;
background: transparent!important;
}
name: Kleiner Raum
color_type: card
show_state: true
custom_fields:
Temperature:
card:
type: custom:button-card
entity: sensor.wandthermostat_kl_raum_temperatur
show_name: false
show_state: true
show_entity_picture: false
show_icon: false
color_type: card
color: rgba(255,255,255,0.7)
size: 10px
tap_action:
action: more-info
card-mod:
style: |
ha-card {
box-shadow: none;
background: transparent;
font-size: 10px!important;
font-color: rgba(255,0,0,0.8)!important;
}
show_entity_picture: true
styles:
card:
- width: 100px
- height: 100px
grid:
- grid-template-areas: ""i" "n" "s""
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
name:
- justify-self: start
- padding-left: 7px
- font-weight: bold
- font-family: Sans-serif
- font-size: 13px
img_cell:
- justify-content: start
- padding-left: 25px
- padding-top: 13px
- align-items: start
- margin: none
state:
- justify-self: start
- font-color: red
- font-size: 15px
- padding-left: 7px
- padding-bottom: 10px
- text-transform: capitalize
- font-family: Sans-serif
- font-size: 13px
icon:
- width: 30%
custom_fields:
Temperature:
- align-self: start
- position: absolute
- left: 55%
- top: 10%
- width: 40%
- font-size: 13px
- font-family: Sans-serif
- text-transform: capitalize
state:
entity_picture: \local\img\icons8-kommode-48.png
color: rgba(255,255,255,0.3)
entity_picture: \local\img\icons8-kommode-48.png
color: rgba(65,65,63,0.8)
styles:
card:
- filter: opacity(10%)
icon:
- filter: grayscale(100%)`
Beta Was this translation helpful? Give feedback.
All reactions