custom:stack-in-card seems to have done the trick.
Now I have to figure out how to reduce the vertical alignment. The buttons are too far from each other.
To start add margin: -20px; to the divider card.
entities:
- type: divider
style:
background-color: lime
card_mod:
style: |
ha-card {
background-color: rgb(243,243,243);
border-style: none;
margin: -20px;
}
1 Like
That worked. Thank you!
Would you happen to know how to change the entire dashboard background color? I want to match the color to the card.
You can upload a image of the color by editing the dashboard or you can use a theme
Check out this thread for the theme method.
What would be the best way to make the icon background white in a circle, like in the original screenshot?
I’ll have to think about that. The icon does have a background, I just need to make it a circle.
If you add - background-color: skyblue you’ll see it.
styles:
icon:
- color: rgb(84,115,144)
- width: 36px
- height: 36px
- justify-self: center
- background-color: skyblue
I actually tried that too. I also played around with border-radius: 100%, but it cuts off the circle at the top and bottom.
I suggested a tile or Mushroom card because that is most likely what was used for that card.
Check this out…
type: custom:stack-in-card
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
entity: switch.kitchen_lights
primary: Office Lights
secondary: |
{{ states(config.entity) |title }}
tap_action:
action: toggle
icon: mdi:lightbulb-on-10
icon_color: |
{{ 'teal' if is_state(config.entity, 'on') else 'grey' }}
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: black;
--card-secondary-color: grey;
--card-primary-font-size: 20px !important;
--card-secondary-font-size:18px !important;
--card-primary-line-height: 22px !important;
--card-secondary-font-weight: 300;
--card-primary-font-weight: 300;
}
.: |
ha-card {
background: white !important;
border: none;
}
- type: custom:mushroom-template-card
entity: switch.kitchen_lights
name: Office Lights
icon: m
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
{% if is_state(config.entity, 'on') %}
ha-state-icon:before {
content: "";
height: 35px;
width: 65px;
margin-left: 40px;
margin-top: -5px;
position: absolute;
background-repeat: no-repeat;
background-image: url("/local/pics/on1.png") !important;
background-size: cover;
}
{% else %}
ha-state-icon:before {
content: "";
height: 35px;
width: 65px;
margin-left: 40px;
margin-top: -5px;
position: absolute;
background-repeat: no-repeat;
background-image: url("/local/pics/off1.png") !important;
background-size: cover;
{% endif %}}
ha-card {
border: none;}
card_mod:
style: |
ha-card{
background: white !important;
border: none;
}
- type: entities
entities:
- type: divider
style:
background-color: lime
card_mod:
style: |
ha-card {
background-color: rgb(243,243,243);
border-style: none;
margin: -20px; #here
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
entity: switch.kitchen_lights
primary: Office Lights
secondary: |
{{ states(config.entity) |title }}
tap_action:
action: toggle
icon: mdi:lightbulb-on-10
icon_color: |
{{ 'teal' if is_state(config.entity, 'on') else 'grey' }}
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: black;
--card-secondary-color: grey;
--card-primary-font-size: 20px !important;
--card-secondary-font-size:18px !important;
--card-primary-line-height: 22px !important;
--card-secondary-font-weight: 300;
--card-primary-font-weight: 300;
}
.: |
ha-card {
background: white !important;
border: none;
}
- type: custom:mushroom-template-card
entity: switch.kitchen_lights
name: Office Lights
icon: m
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
{% if is_state(config.entity, 'on') %}
ha-state-icon:before {
content: "";
height: 35px;
width: 65px;
margin-left: 40px;
margin-top: -5px;
position: absolute;
background-repeat: no-repeat;
background-image: url("/local/pics/on1.png") !important;
background-size: cover;
}
{% else %}
ha-state-icon:before {
content: "";
height: 35px;
width: 65px;
margin-left: 40px;
margin-top: -5px;
position: absolute;
background-repeat: no-repeat;
background-image: url("/local/pics/off1.png") !important;
background-size: cover;
{% endif %}}
ha-card {
border: none;}
card_mod:
style: |
ha-card{
background: white !important;
border: none;
}
