use your entity. I posted the code with mine.
LoL! Duh! Thanks!
The layout is still off. I used a manual card.
You have this at the top of the card?
type: custom:mod-card
style: |
ha-card {
background-color: rgb(243,243,243);
}
card:
Yes. I copied your code and updated the entities with my own.
type: 'custom:mod-card'
style: |
ha-card {
background-color: rgb(243,243,243);
}
card:
type: vertical-stack
cards:
- type: custom:button-card
entity: switch.basement_office_lights
name: Office Lights
icon: mdi:lightbulb-on-10
show_icon: true
show_state: false
styles:
icon:
- color: rgb(84,115,144)
- width: 36px
- height: 36px
- justify-self: center
grid:
- position: relative
- grid-template-areas: "\"i n s toggle\""
- grid-template-columns: 18% 40% 22%
- grid-template-rows: 1fr min-content min-content
card:
- background-color: rgb(243,243,243)
- height: 70px
- border: 0px
name:
- font-size: 20px
- font-weight: 200
- color: black
- justify-self: start
label:
- font-size: 13px
- color: black
- justify-self: start
state:
- margin-left: "-240px"
- margin-bottom: "-40px"
- font-weight: 200
- color: grey
- font-size: 12px
custom_fields:
toggle:
- margin-bottom: "-10px"
custom_fields:
toggle: |
[[[
const isOn = entity.state === 'on';
const imageUrl = isOn ? '/local/custom_icons/toggle_on.png' : '/local/custom_icons/toggle_off.png';
return `
<img src="${imageUrl}" style="
height: 30px;
width: 70px;
object-fit: contain;
transition: all 0.3s ease;">
`;
]]]
tap_action:
action: toggle
- type: entities
entities:
- type: divider
style:
background-color: lime
card_mod:
style: |
ha-card {
background-color: rgb(243,243,243);
- type: custom:button-card
entity: light.theater_lights
name: Theater Lights
label: Taklampa
icon: mdi:lightbulb-on-10
show_icon: true
show_state: false
styles:
icon:
- color: rgb(84,115,144)
- width: 36px
- height: 36px
- justify-self: center
grid:
- position: relative
- grid-template-areas: "\"i n s toggle\""
- grid-template-columns: 18% 40% 22%
- grid-template-rows: 1fr min-content min-content
card:
- background-color: rgb(243,243,243)
- height: 70px
- border: 0px
name:
- font-size: 20px
- font-weight: 200
- color: black
- justify-self: start
state:
- margin-left: "-240px"
- margin-bottom: "-40px"
- font-weight: 200
- color: grey
- font-size: 12px
custom_fields:
toggle:
- margin-bottom: "-10px"
custom_fields:
toggle: |
[[[
const isOn = entity.state === 'on';
const imageUrl = isOn ? '/local/custom_icons/toggle_on.png' : '/local/custom_icons/toggle_off.png';
return `
<img src="${imageUrl}" style="
height: 30px;
width: 70px;
object-fit: contain;
transition: all 0.3s ease;">
`;
]]]
tap_action:
action: toggle
Would you be willing to use custom: stack-in-card? It’s a lot easier to modify vs the standard vertical-stack card
type: custom:stack-in-card
cards:
- type: custom:button-card
entity: switch.basement_office_lights
name: Office Lights
icon: mdi:lightbulb-on-10
show_icon: true
show_state: false
styles:
icon:
- color: rgb(84,115,144)
- width: 36px
- height: 36px
- justify-self: center
grid:
- position: relative
- grid-template-areas: "\"i n s toggle\""
- grid-template-columns: 18% 40% 22%
- grid-template-rows: 1fr min-content min-content
card:
- background-color: rgb(243,243,243)
- height: 70px
- border: 0px
name:
- font-size: 20px
- font-weight: 200
- color: black
- justify-self: start
label:
- font-size: 13px
- color: black
- justify-self: start
state:
- margin-left: "-240px"
- margin-bottom: "-40px"
- font-weight: 200
- color: grey
- font-size: 12px
custom_fields:
toggle:
- margin-bottom: "-10px"
custom_fields:
toggle: |
[[[
const isOn = entity.state === 'on';
const imageUrl = isOn ? '/local/custom_icons/toggle_on.png' : '/local/custom_icons/toggle_off.png';
return `
<img src="${imageUrl}" style="
height: 30px;
width: 70px;
object-fit: contain;
transition: all 0.3s ease;">
`;
]]]
tap_action:
action: toggle
- type: entities
entities:
- type: divider
style:
background-color: lime
card_mod:
style: |
ha-card {
background-color: rgb(243,243,243);
border-style: none;
}
- type: custom:button-card
entity: light.bathroom_lights
name: Theater Lights
label: Taklampa
icon: mdi:lightbulb-on-10
show_icon: true
show_state: false
styles:
icon:
- color: rgb(84,115,144)
- width: 36px
- height: 36px
- justify-self: center
grid:
- position: relative
- grid-template-areas: "\"i n s toggle\""
- grid-template-columns: 18% 40% 22%
- grid-template-rows: 1fr min-content min-content
card:
- background-color: rgb(243,243,243)
- height: 70px
- border: 0px
name:
- font-size: 20px
- font-weight: 200
- color: black
- justify-self: start
state:
- margin-left: "-240px"
- margin-bottom: "-40px"
- font-weight: 200
- color: grey
- font-size: 12px
custom_fields:
toggle:
- margin-bottom: "-10px"
custom_fields:
toggle: |
[[[
const isOn = entity.state === 'on';
const imageUrl = isOn ? '/local/custom_icons/toggle_on.png' : '/local/custom_icons/toggle_off.png';
return `
<img src="${imageUrl}" style="
height: 30px;
width: 70px;
object-fit: contain;
transition: all 0.3s ease;">
`;
]]]
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background-color: rgb(243,243,243);
border-style: none;
}
1 Like
I don’t mind using custom: stack-in-card. Never used it before though.
Are you on the latest card-mod?
I am on 3.5.0
I just downgraded to 3.4.4.
I am assuming I have to install the stack-in-card using HACS?
Yes, it’s a great card to have when customizing cards. custom:layout-card is another.
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;
}
