Hello ! It is hard to tell… If you can post your complete code i can take a look. Have a nice day !
1 Like
Hi,
I try to explain it a bit further.
The original width produces the following result in a grid card:
I want to center the cards in the grid card.
When I change width to min-width the I get a centered version, but the width is to wide:
I hope it’s clearer now
1 Like
you need to change style for graph card. look for this sequence under the button card.
custom_fields:
graph:
card:
type: 'custom:mini-graph-card'
card_mod:
style: |
ha-card {
--ha-card-background: transparent;
color: var(--secondary-text-color);
width: 150px; # > this should be your graph width
border-radius: 0px;
}
thanks for replying. Changing this line makes the graph wider (and for sadness it takes it a bit down).
But it does also have no effect to the width of the card:
I tried it with the first card
Is there a way to make the house icon change to red when the alarm is armed? I cannot seem to figure out the correct language to make the state based change work.
Hello,
Try this:
state:
- value: disarmed
label: Avlarmat
- value: armed
label: Larmet är på !
styles:
icon:
- filter: hue-rotate(130deg)
- value: partially_armed
styles:
icon:
- filter: hue-rotate(130deg)
I tried your suggestion with an empty card, but that does not solve the problem:
Perhaps I am justo too stupid for all this css stuff ;-(
If you can not get it to work you can try with the verical stack card instead. Or you can do it like this:
type: grid
cards:
- type: 'custom:button-card'
show_icon: true
entity_picture: /local/house.png
show_entity_picture: true
tap_action:
action: navigate
navigation_path: '#p1'
entity: sensor.lage_alarmstatus_for_hemmet
name: Hemma
show_label: true
styles:
custom_fields:
graph:
- position: absolute
- left: 0px
- top: 142px
topleft:
- position: absolute
- left: 15px
- top: 10px
topright:
- position: absolute
- left: 115px
- top: 10px
grid:
- grid-template-areas: '"i" "n" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- border-radius: 10px
- box-shadow: '5px 5px 20px rgba(0, 0, 0, 0.2)'
- height: 220px
- width: 150px
- margin-left: 70px
icon:
- width: 50px
img_cell:
- padding-top: 30px
name:
- color: var(--secondary-text-color)
- justify-self: center
label:
- font-size: 12px
- justify-self: center
- padding-bottom: 70px
state:
- value: disarmed
label: Avlarmat
- value: armed
label: Larmet är på !
entity_picture: /local/larmet.png
- value: partially_armed
label: Nattläget är aktiverat !
entity_picture: /local/sleep.png
custom_fields:
graph:
card:
type: 'custom:mini-graph-card'
card_mod:
style: |
ha-card {
--ha-card-background: transparent;
color: var(--secondary-text-color);
width: 150px;
border-radius: 0px;
}
entities:
- entity: sensor.rokdedektor_temperatur
show:
icon: false
name: false
points: false
font_size: 40
color_thresholds:
- value: 19
color: '#b0abf4'
- value: 21
color: '#c696eb'
- value: 23
color: '#cd79b3'
topright:
card:
type: 'custom:button-card'
entity: switch.away_aktiverad
show_state: false
show_name: false
icon: 'mdi:shield-outline'
styles:
icon:
- width: 24px
topleft:
card:
type: 'custom:button-card'
entity: switch.home_aktiverad
show_state: false
show_name: false
icon: 'ios:house'
styles:
icon:
- width: 24px
- type: 'custom:button-card'
show_icon: true
entity_picture: /local/house.png
show_entity_picture: true
tap_action:
action: navigate
navigation_path: '#p1'
entity: sensor.lage_alarmstatus_for_hemmet
name: Hemma
show_label: true
styles:
custom_fields:
graph:
- position: absolute
- left: 0px
- top: 142px
topleft:
- position: absolute
- left: 15px
- top: 10px
topright:
- position: absolute
- left: 115px
- top: 10px
grid:
- grid-template-areas: '"i" "n" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- border-radius: 10px
- box-shadow: '5px 5px 20px rgba(0, 0, 0, 0.2)'
- height: 220px
- width: 150px
- margin-left: 100px
icon:
- width: 50px
img_cell:
- padding-top: 30px
name:
- color: var(--secondary-text-color)
- justify-self: center
label:
- font-size: 12px
- justify-self: center
- padding-bottom: 70px
state:
- value: disarmed
label: Avlarmat
- value: armed
label: Larmet är på !
entity_picture: /local/larmet.png
- value: partially_armed
label: Nattläget är aktiverat !
entity_picture: /local/sleep.png
custom_fields:
graph:
card:
type: 'custom:mini-graph-card'
card_mod:
style: |
ha-card {
--ha-card-background: transparent;
color: var(--secondary-text-color);
width: 150px;
border-radius: 0px;
}
entities:
- entity: sensor.rokdedektor_temperatur
show:
icon: false
name: false
points: false
font_size: 40
color_thresholds:
- value: 19
color: '#b0abf4'
- value: 21
color: '#c696eb'
- value: 23
color: '#cd79b3'
topright:
card:
type: 'custom:button-card'
entity: switch.away_aktiverad
show_state: false
show_name: false
icon: 'mdi:shield-outline'
styles:
icon:
- width: 24px
topleft:
card:
type: 'custom:button-card'
entity: switch.home_aktiverad
show_state: false
show_name: false
icon: 'ios:house'
styles:
icon:
- width: 24px
I have just add an “margin-left” value to the two button cards.
card:
- border-radius: 10px
- box-shadow: '5px 5px 20px rgba(0, 0, 0, 0.2)'
- height: 220px
- width: 150px
- margin-left: ###your value here###
Genius! That worked! Thank you!
1 Like
This looks real nice, is there a possibility to share the whole config/ha setup just as mattias did with his layoutdesign?
Thanks ! I am not that familiar with github to be honest and i do not have the time right now to leran more.
Hello, I just have a simple question, I have setup the home and person card on my own dashboard, I used the code directly from this link, but for some reason the label that says “Home” is much lower than the label on the person card.
My code is as follows
Home Card:
type: custom:button-card
show_icon: true
entity_picture: /local/house.png
show_entity_picture: true
tap_action:
action: navigate
navigation_path: '#p1'
name: Home
show_label: true
styles:
custom_fields:
graph:
- position: absolute
- left: 0px
- top: 142px
topleft:
- position: absolute
- left: 15px
- top: 10px
topright:
- position: absolute
- left: 115px
- top: 10px
grid:
- grid-template-areas: '"i" "n" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- border-radius: 10px
- box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2)
- height: 220px
- width: 150px
icon:
- width: 50px
img_cell:
- padding-top: 30px
name:
- color: var(--secondary-text-color)
- justify-self: center
label:
- font-size: 12px
- justify-self: center
- padding-bottom: 70px
state:
- value: disarmed
label: Avlarmat
- value: armed
label: Larmet är på !
entity_picture: /local/larmet.png
- value: partially_armed
label: Nattläget är aktiverat !
entity_picture: /local/sleep.png
custom_fields:
graph:
card:
type: custom:mini-graph-card
card_mod:
style: |
ha-card {
--ha-card-background: transparent;
color: var(--secondary-text-color);
width: 150px;
border-radius: 0px;
}
entities:
- entity: sensor.indoor_temperature
show:
icon: false
name: false
points: false
font_size: 40
color_thresholds:
- value: 19
color: '#b0abf4'
- value: 21
color: '#c696eb'
- value: 23
color: '#cd79b3'
topright:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: climate
show_state: false
show_name: false
icon: mdi:air-conditioner
styles:
icon:
- width: 24px
topleft:
card:
type: custom:button-card
entity: switch.home_aktiverad
show_state: false
show_name: false
icon: ios:house
styles:
icon:
- width: 24px
Person Card:
type: custom:button-card
show_icon: true
entity_picture: /local/user.png
show_entity_picture: true
tap_action:
action: navigate
navigation_path: '#p3'
entity: person.Redacted
show_state: true
name: Matt
show_name: true
styles:
custom_fields:
graph:
- position: absolute
- left: 0px
- top: 143px
topleft:
- position: absolute
- left: 15px
- top: 15px
topright:
- position: absolute
- left: 85px
- top: 10px
- width: 50px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- border-radius: 10px
- box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2)
- height: 220px
- width: 150px
img_cell:
- padding-top: 30px
icon:
- width: 50px
name:
- color: var(--secondary-text-color)
state:
- font-size: 12px
- padding-bottom: 70px
state:
- value: not_home
styles:
icon:
- filter: grayscale(100%)
custom_fields:
graph:
card:
type: custom:mini-graph-card
card_mod:
style: |
ha-card {
--ha-card-background: transparent;
color: var(--secondary-text-color);
width: 150px;
border-radius: 0px;
}
entities:
- entity: sensor.le2117_steps_sensor
show:
icon: false
name: false
points: false
font_size: 40
color_thresholds:
- value: 100
color: '#afbfdf'
- value: 1000
color: '#8cadea'
- value: 5000
color: '#454ab0'
topright:
card:
type: custom:button-card
entity: sensor.le2117_battery_level
tap_action:
action: none
show_state: true
show_name: false
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 20px
state:
- font-size: 10px
topleft:
card:
type: custom:button-card
entity: sensor.google_fit_distance
tap_action:
action: none
show_state: true
show_icon: false
show_name: false
styles:
icon:
- width: 20px
state:
- font-size: 10px
Awesome looking theme all together, thanks in advance for the help!
I think it may be because I don’t have a home alarm system, so that entity does not exist?
Hello,
If you dont have an entity: defined it will not show the label. You need to add a label.
Like this:
name: Home
label: Your label
You can then delete the code
state:
- value: disarmed
label: Avlarmat
- value: armed
label: Larmet är på !
entity_picture: /local/larmet.png
- value: partially_armed
label: Nattläget är aktiverat !
entity_picture: /local/sleep.png
Worked perfectly, thank you sir!
1 Like
Lovelace User Interface . Themes ; Custom Lovelace UI Cards; Alternative Dashboards. Custom Components; DIY ADB - The Android Debug Bridge server program.
Thanks for this theme, it’s amazing!
I’m trying to translate it into landscape format for the tablets I want to use, however the transparent image seems to be disappearing off the bottom of the screen so the screen scrolls up when I try and adjust the brightness of the lights!
I’m wondering if the CSS Values for the height of each element are cumulative or similar, because I can’t for the life of me work out why the “Garage” background is 770px x 770px even though it’s set to much lower than that in the code?
Hello, Thanks!
If you can send me your code i can have a look. It´s way easier to find the problem if i can see it on my screen. Maybe i can find a workaround.
The reason why you see the “background” as 770px x 770px for garage and p1/p2/p3/p4 etc is because the picture element sets the height based on the width of the card. There is no way, as i know to change the height of the picture element. It is auto calculated by lovelace and it always try to be square. (Someone please correct me if i am wrong.)
Also with the latest version of homeassistant the swipe card is a bit buggy for me when it is used inside the picture element (long loading times at startup). I have actually deleted the swipe card and now only has my “garage” view. This improved my loading times. I recently also had some problems with the circular sensor card, they moved all over the screen from time to time but this problem is now gone using apexcharts-card instead.
Ah, ok, it’s probably this then. Thanks, I’ll keep tweaking it, love the theme though and definitely will share what I end up with!