thank you that works.
Hi! Looks awesome! I have tried to use your Button icons without spliting up et Config… ive goten so far that the animation is working but it wont change colour.
show_name: true
show_icon: true
type: custom:button-card
tap_action:
action: toggle
entity: light.se_tv
custom_fields:
icon_ceiling_light: |
[[[ const state = entity.state === 'on' ? 'on' : null; return `
<svg viewBox="0 0 50 50">
<style>
@keyframes on {
0% {
transform: scale(0.85);
}
20% {
transform: scale(1.1);
}
40% {
transform: scale(0.95);
}
60% {
transform: scale(1.03);
}
80% {
transform: scale(0.97);
}
100% {
transform: scale(1);
}
}
.on {
animation: on 0.8s;
transform-origin: center;
}
</style>
<path fill="#9da0a2" d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7"/>
<path class="${state} light-color" d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z"/>
</svg>
`;
]]]
styles:
custom_fields:
icon_ceiling_light:
- fill: grey
- top: 7%
- left: 4.5%
- width: 4.5vw
- position: absolute
Any ideas what im missing to get color to change?
Hello all,
I need your help for a moment, before this border fix (I guess), the dashboard completely fit on the tablet.
However, now I have a bold empty line between the top and bottom spaces and the dashboard is now too big.
I’ve attached a screenshot for you guys, I’m missing the bottom row.
Unfortunately, I do not know where exactly I can correct this.
Merci
Hello everybody.
Does anyone know why I see these lines of rectangles now? It was after some update that they appear…
Thanks
1 Like
also A different take on designing a Lovelace UI - #4086 by svalmorri this chain of post might be helpful
I can’t solve this border. Tried many different things, but just can’t find the solution.
the button card template:
energy:
template:
- base
- circle
show_name: false # Hides Card Name
show_state: true # Hides Card state
# state_display: >
# [[[ return ' '; ]]]
custom_fields:
# circle: >
# [[[
# return states['sensor.electricity_meter_power_consumption'].state
circle: >
[[[
let stromzaehler_online = states['sensor.electricity_meter_power_consumption'],
stromzaehler_color = stromzaehler_online.state === 'off' ? '#8b0000' : 'none';
const energy = Math.round(states['sensor.electricity_meter_power_consumption'].state * 10) / 10;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="20.5" stroke="#313638" stroke-width="1.5" fill="${stromzaehler_color}" style="
transform: rotate(-90deg); transform-origin: 50% 50%;" />
<text x="50%" y="54%" fill="#8d8e90" font-size="80%" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle" dominant-baseline="middle">${energy}<tspan font-size="40%" alignment-baseline="bottom"> kWh</tspan></text></svg>`; ]]]
graph:
card:
type: custom:mini-graph-card
height: 150
hours_to_show: 6
points_per_hour: 12
line_width: 5
font_size: 50
border-width: 0
align_state: center
decimals: 0
show:
name: false
icon: false
state: false
legend: false
labels: false
labels_secondary: false
points: false
color_thresholds:
- value: 50
color: "#ff0000"
- value: 150
color: "#ffa700"
- value: 300
color: "#fff400"
- value: 600
color: "#2cba00"
card_mod:
style: |
.states {
padding-bottom: 20px;
--ha-card-border-width: 0px;
}
styles:
custom_fields:
graph: [bottom: 0%, width: 100%, position: absolute, margin: 0% 0% 0% -11% ]
card:
- padding-bottom: 3px
- border-width: 0px
# state_display:
# - padding-bottom: 20px
icon:
- width: 67%
- fill: "#9da0a2"
circle:
- display: initial
- width: 90%
- margin: -6% -5% 0 0
- justify-self: end
- opacity: 1
the button in ui-lovelace:
- type: custom:button-card
entity: sensor.total_watt_solar
styles:
state:
- padding-bottom: 30%
custom_fields:
graph:
card:
entities:
- entity: sensor.total_watt_solar
card_mod:
style: |
.states {
padding-bottom: 0px;
padding-right: 50px;
ha-card-border-width: 0px;
}
template:
- energy
- icon_energy2
open devtools, the border is on ha-card or :host not .states
@clipse
use devtools and inspect the space or
remove chunks in sections to narrow down what’s causing it
I have no idea how to look this up.
I tried so many options. None work.
I applied your solution for all the borders, which works, except on this card.
in themes.yaml find
/* * * * * * * * * * * * * * * * * *
* *
* BUTTON CARD *
* *
* * * * * * * * * * * * * * * * * */
and add this above it, .content .card-content should be there already
.content .card-content {
padding: var(--tablet-card-content-padding);
}
.type-custom-mini-graph-card{
border-width: 0px;
}
remember to reload themes
keep in mind this is not a card that is provided by @Mattias_Persson out of the box, so there is no guarantee that it will work after updates.
2 Likes
This is not in the themes.yml.
styles:
card:
- border-width: 0
custom_fields:
card:
- border-width: 0
graph: [bottom: 0%, left: 0%, width: 125%, position: absolute, margin: 0% 0% 0% 0% ] #-13% -14%]
card_mod:
style: |
:host{
--accent-color: #039be5;
--ha-card-border-width: 0px;
}
Should do the trick
@Mattias_Persson Has anyone ever find a fix for the mobile view of mini-graph-card? I been trying other methods but there always seems to be a shift in the horizontal and vertical positioning of the card in mobile view relative to the desktop view. Currently I’m using templates for my mini-graph-card and the mobile view always has the graph wider than what the desktop shows.
Here’s what I see on my desktop:
Here’s what I see on my phone:
Template:
humidity:
template:
- base2 # Same as base
show_name: true
show_state: true
state_display: >
[[[ return ' '; ]]]
custom_fields:
circle: >
[[[ {
const humidity = Math.round(entity.state);
const input = `<tspan font-size="10">%</tspan>`;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="20.5" stroke="#313638" stroke-width="1.5" fill="#FFFFFF08" style="
transform: rotate(-90deg); transform-origin: 50% 50%;" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle" dominant-baseline="middle">${humidity}${input}</text></svg>`; } ]]]
graph:
card:
type: "custom:mini-graph-card"
height: 140
hours_to_show: 24
points_per_hour: 1
line_width: 8
font_size: 75
decimals: 0
show:
name: false
icon: false
state: false
legend: false
labels: false
labels_secondary: false
points: false
color_thresholds:
- value: 0
color: "#c0392b"
- value: 46
color: "#d35400"
- value: 55
color: "#228C22"
- value: 65
color: "#276696"
card_mod:
style: |
:host{
--accent-color: #039be5;
--ha-card-border-width: 0px;
}
styles:
custom_fields:
graph: [bottom: 0%, left: 0%, width: 130%, position: absolute, margin: 0% 0% -14% -15.2%]
icon:
- width: 67%
- fill: "#9da0a2"
circle:
- display: initial
- width: 90%
- margin: -6% -5% 0 0
- justify-self: end
- opacity: 1
icon_humidity:
styles:
custom_fields:
icon:
- width: 90%
- margin-left: -20%
- margin-top: -11%
custom_fields:
icon: >
<ha-icon icon="mdi:water-opacity"></ha-icon>
ui-lovelace.yaml:
- type: custom:button-card
entity: sensor.pirateweather_humidity
name: Humidity
tap_action: !include popup/comfort_humidity.yaml
hold_action:
action: none
custom_fields:
graph:
card:
entities:
- entity: sensor.pirateweather_humidity
- entity: sensor.nightstate
color: gray
y_axis: secondary
show_line: false
show_points: false
show_legend: false
show_labels: false
tap_action: !include popup/comfort_humidity.yaml
variables:
state_on: >
[[[
if (entity) {
return entity.state
}
]]]
circle_input: >
[[[
if (entity) {
return Math.round(entity.state).toString()
}
]]]
circle_input_unit: '%'
template:
- humidity
- icon_humidity
- circle
6 Likes
I’m keeping the issue of the background being black on PC browsers. Replaced the themes.yaml but didnt help. All browser lack this issue and clearing cache etc didn’t resolve it either 
Also, I want to have my temp card on the bottom of the sidebar, anybody knows how to get this done? And just like above mentioned, I have some weird borders in my sidebar… I’ve updated the themes accordingly but no result unfortunatly.
Hello everyone.
I’m wondering if there is any tool or guide that can help me get started creating SVG icons and also explain how to animate them, conforming to Mattias’ style (I love it!).
Thanks in advance.
Hi I’m having an issue with the new slider on lights. The issue is I use a Right to Left language which makes the elements in each main button on the opposite side (see images), this makes the sliding functionality not work.
Looking thru the code I found this:
// approximate position of thumb relative to circle
circle_slider.style.top = `${(circle_slider.value - 50) / 1.66 - 1}%`;
Not sure how you calculated this, any chance you can give me a hint (read: full solution… 
) for how to calculate this?
sorry about the black braggound this is an issue that I had that did resolve its self after days of me trying to fix it.
as for the border in the sidebar that is not a result of @Mattias_Persson, home assistant has added this border to all cards, look for --ha-card-border-width in the above code from @mobiustorr adding that to the card in your sidebar might fix the issue. for help in moving it to the bottom of the page you will need to share the code your used to add it as that effects how to do what you want.
just under the line that you shared there is let debug = false, setting that to true will show the slider, like so.
with that you you can then go to extra_styles.yaml and find this section
/* * * * * * * * * * * * * * * * * *
* *
* CIRCLE SLIDER *
* *
* * * * * * * * * * * * * * * * * */
#circle_slider {
opacity: 0;
appearance: none;
transform: rotate(270deg);
width: 90%;
position: absolute;
pointer-events: none;
cursor: grab;
left: 26%;
margin-top: 13%;
}
change left: 26%; to right: 26%; and confirm that the green dot moved to over the circle, if not you may need to play with the values using dev tools until you find ones that work
Also @Mattias_Persson, this is some amazing work, the more I look into what your doing the more I love it. WOW
1 Like