They’re separate shapes of course but all part of one svg. I just hide some of the shapes for the off position currently. I was going to add some log shapes, and eventually some extra animation transitions from on to off, and off to on.
Gotcha. Didn’t know you could separate the layers like that. I’ll mess around with that.
Very nice. Any good documentation for learning this stuff or do you just have css experience so its easy to implement?
Is there anyone else with the browser_mod pop bugged since the last update? I had everything working until yesterday. Now my pop-up cards dont work anymore and i cant find why.
Found the problem. Somehow, after the last update, the Browser_mod integration was removed from my integrations. I just added again in Settings → Devices & Services → Add Integration → Browser Mod and worked again. I hope this information can help someone with the same problem.
Heres the code for the SVG. I have tried using some of the code above with this SVG but haven’t had any luck.
What effect do you want?
Flames moving?
Flames hidden when off, flames flickering/moving when on. Thanks! If you need any icons made for yourself, let me know. I can make anything for you and save you that time.
It’s worth it if you get sidetracked. 
Chapeau! That’s super nice! Now I have to reconsider buying a smart fireplace, so that I can use this icon. 
Thanks for sharing!
1 Like
I bought an RW Flame dumb electric fireplace. Made it smart with a zigbee ir blaster and smart plug. If you go that route, let me know and ill send over the config.
After updating from 2023.4 to HA 2023.5 I get the following behavior on the iPad companion app:
When opening a pop-up, the icons / text from the cards below are displayed in front of the pop-up contents. Since it is on the iPad, I have no clue how to get to developer options to investigate the issue. Android / PC work like expected (icons and text of ‘below’ content are not shown).
Anyone else having the same issue?
Wouter
3 Likes
A decent amount of CSS experience. Less with CSS animations, but enough to work through the basics. I usually make the SVG in illustrator and then I’ll work out the colors and animations in something like codepen.
2 Likes
I’m having this issue after pasting in your config. I know how to fix the positioning, but not sure how to turn off the border line. Any ideas?
read down from this post you should find a fix
Could you share the code for your pihole button?
It looks quite interesting.
1 Like
I am experiencing the same problems, but unfortunately, I haven’t found a solution yet.
Sure, but its nothing special.
type: custom:button-card
card_mod:
style: |
:host {
--ha-card-border-width: 0;
}
entity: switch.pihole_control
name: Pi-Hole
tap_action:
action: toggle
hold_action:
action: more-info
template:
- base
- loader
- pihole
custom_fields:
icon: |
<ha-icon icon='mdi:pi-hole'></ha-icon>
graph:
card:
hour24: true
color_type: card
height: 100
hours_to_show: 24
points_per_hour: 4
update_interval: 10
aggregate_func: avg
line_width: 5
smoothing: false
align_state: center
show:
graph: bar
average: false
extrema: false
color_thresholds_transition: hard
entities:
- entity: sensor.pi_hole_werbungsanteil_heute_blockiert
color: '#f205b3'
circle: |
[[[
if (variables.state === 'on') {
const input = states['sensor.pi_hole_werbungsanteil_heute_blockiert'].state;
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
}
]]]
Template:
pihole:
template:
- base
show_state: false
custom_fields:
graph:
card:
type: custom:mini-graph-card
line_color: '#3182b7'
line_width: 4
font_size: 75
show:
name: false
icon: false
state: false
legend: false
labels: false
styles:
name:
- margin: '-40% 0% -13% 0%'
- position: absolute
- top: 57%
custom_fields:
graph:
- bottom: 0%
- left: 0%
- width: 130%
- position: absolute
- margin: 0% 0% -13% -15%
circle:
- display: initial
- width: 90%
- letter-spacing: 0.03vw
- margin: '-6% -6% 0 0'
- justify-self: end
- opacity: 1
icon:
- width: 67%
- fill: '#9da0a2'
1 Like
This is such a great theme and I have been using it to learn a lot about dashboards. I am trying to figure something out though that is driving me nuts. I have three input_select helpers I would like to place on my dashboards. I have defined the states for each that I want the button on and off for in the base file variables. All of that is working great.
Here is where I am stuck. I want to use the circle portion of each button to relay additional information by color. For example, I have an input_select helper for my dryer. It has three selections. Empty, Running, and Complete. I have defined Running and Complete as on states. But I only want a circle when the state is complete and I just want it to be a red circle with no input. Is that something that I can easily do?
Similarly I have another input_select for my coffee maker. The three states are Ready, Fresh, and Empty. I have defined only Fresh as an on state, but I would like a circle on an off button when the state is Ready.
I would paste some code for all to look at, but I really don’t know where to start with this.
Base and Circle are pretty much the same as in your master config. I guess I can share the code for each of my buttons.
- type: custom:button-card
template:
- select
- icon_washer
entity: input_select.washer
name: Basement
show_label: true
label: Washer
- type: custom:button-card
template:
- select
- icon_dryer
entity: input_select.dryer
name: Basement
show_label: true
label: Dryer
- type: custom:button-card
template:
- select
- icon_coffee
entity: input_select.coffee_status
name: Kitchen
show_label: true
label: Coffee
tap_action:
entity: switch.kitchen_tplink_coffee
action: more-info
No luck. Tried everything I’m seeing but must be missing something.
Hi,
first thank you for your work.
I have difficulties to get the right card_mod setting.
I try to move the custom layout grid to the center, but without succes.
and here the card mod helper code
"body>home-assistant$home-assistant-main$ha-drawer>partial-panel-resolver>ha-panel-lovelace$hui-root$#view>hui-view>grid-layout$#root>hui-vertical-stack-card$#root>layout-card$grid-layout$#root"
I already tried it with:
card_mod:
style: |
"layout-card$grid-layout$": |
#root {
align-items: center !important;
}
In order for card-mod to apply to a layout-card, you have to wrap said card within a mod-card and apply the card-mod styling there.