reload themes
1 Like
The custom card with a sensor inside keep showing the border:
The code is the “same” as the others, with the difference of the graph on the bottom:
- type: custom:button-card
entity: sensor.yidjcev0q3_output_power
name: Energia
template:
- sensor
- icon_energia
For what i saw, the problem is this:
There’s a second ha-card inside the main ha-card of this type of template, generated because the sensor graphic. The outside ha-card has applied the border-width:0. The inside dont.
Can you confirm if your have the same issue on this type of sensor template?
And if you know how to fix i’ll be glad.
Can someone guide me on how to remove the borders for these elements.
The first one is a custom:weather-card that I added to the sidebar. Also can anyone help me resize this card or reduce the font.
@Mattias_Persson I kept the original buttons you had in the sidebar (I really liked them!) but I’m not sure how to remove the border off of them.
I also have some empty space at the bottom of the dashboard that I’m not sure if I can reduce.
Edit: I managed to fix the borders for all the elements. I just need to figure out how to reduce the spacing at the end and also how to resize the custom:weather-card
i have a really simple problem but i cant find the problem, i have a if condition for a icon
custom_fields:
icon: >
[[[
if (variables.state < '10')
{
return `
<ha-icon icon="mdi:smoke-detector-variant"></ha-icon>
`;
}
else
{
return `
<ha-icon icon="mdi:smoke-detector-variant-alert"></ha-icon>
`;
}
]]]
the value is 7.52, but he always takes the else condition. have you perhaps a idea?
Without the template code it will be hard to fix the issue, if you look at the link @Mattias_Persson posted, you will see how the fix is applied and that is is dependent on how the template is written.
Example
The following is an example of a custom template I used for the uptime at the bottom of the sidebar.
up_time:
show_icon: false
show_name: false
show_state: true
styles:
card:
- margin-top: -100px
state:
- font-size: 1vw
- font-family: SF Mono, Roboto
- opacity: 0.65
- padding: 0.55vw 1.2vw 0.5vw 1.2vw
after fixing the border
up_time:
show_icon: false
show_name: false
show_state: true
styles:
card:
- margin-top: -100px
- border-width: 0
state:
- font-size: 1vw
- font-family: SF Mono, Roboto
- opacity: 0.65
- padding: 0.55vw 1.2vw 0.5vw 1.2vw
if you still have issues, post the template code and someone will help you out, but without that it will not be possible
2 Likes
i use the same code as his template sensor:
sensor:
state_display: >
[[[ return ' '; ]]]
template:
- base
- circle
custom_fields:
circle: >
[[[
if (entity) {
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20.5" stroke="none" stroke-width="1.5" fill="rgba(255,255,255,0.04)" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${parseInt(entity.state)}</text>
</svg>
`;
}
]]]
graph:
card:
type: sensor
entity: >
[[[ return entity.entity_id; ]]]
graph: line
hours_to_show: 2
detail: 2
card_mod:
style: |
.header, .value, .measurement {
display: none !important;
}
push_graph: >
[[[
setTimeout(() => {
let elt = this.shadowRoot,
card = elt.getElementById('card'),
container = elt.getElementById('container'),
graph = elt.getElementById('graph');
if (elt && card && container && graph) {
card.insertBefore(graph, container);
}
}, 0);
return null;
]]]
styles:
custom_fields:
graph:
- position: absolute
- width: 100%
- height: 100%
- clip-path: inset(0 round var(--custom-button-card-border-radius))
- left: 0
- bottom: 0
most likely variables.state is a string not a number.
try
custom_fields:
icon: >
[[[
let myNum = Number (variables.state);
if (myNum && myNum < 10 )
{
return `
<ha-icon icon="mdi:smoke-detector-variant"></ha-icon>
`;
}
return `
<ha-icon icon="mdi:smoke-detector-variant-alert"></ha-icon>
`;
]]]
I converted variables.state with Number (variables.state)
I then confirmed that it is a number by adding if (myNum then I did your condition.
I also removed the else as it was redundant, as the return will stop the code.
NOTE: I did not test this I currently don’t have access to my home assistant
2 Likes
That template is not included in the GitHub repo.
but it is built off the base template so it should work,
Did you add - border-width: 0 to the base template as described in this post?
try this if you have followed the steps in the above post.
sensor:
state_display: >
[[[ return ' '; ]]]
template:
- base
- circle
custom_fields:
circle: >
[[[
if (entity) {
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20.5" stroke="none" stroke-width="1.5" fill="rgba(255,255,255,0.04)" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${parseInt(entity.state)}</text>
</svg>
`;
}
]]]
graph:
card:
type: sensor
entity: >
[[[ return entity.entity_id; ]]]
graph: line
hours_to_show: 2
detail: 2
card_mod:
style: |
.header, .value, .measurement {
display: none !important;
}
push_graph: >
[[[
setTimeout(() => {
let elt = this.shadowRoot,
card = elt.getElementById('card'),
container = elt.getElementById('container'),
graph = elt.getElementById('graph');
if (elt && card && container && graph) {
card.insertBefore(graph, container);
}
}, 0);
return null;
]]]
styles:
custom_fields:
card:
- border-width: 0
graph:
- position: absolute
- width: 100%
- height: 100%
- clip-path: inset(0 round var(--custom-button-card-border-radius))
- left: 0
- bottom: 0
NOTE: I did not test this I currently don’t have access to my home assistant
1 Like
Yeah, i have the border-width: 0 on the base template.
On my screenshot have others cards that i have, they work perfectly, just this with a graphic inside get this.
And im pretty sure is because his second ha-card created inside the main ha-card:
I tried your example and didn’t work. 
Solved with a not a pretty code, but it works. I just put a style direct on the custom:button-card
- type: custom:button-card
entity: sensor.yidjcev0q3_output_power
name: Energia
template:
- sensor
- icon_energia
tap_action: !include popup/energia.yaml
hold_action: !include popup/energia.yaml
card_mod:
style: |
:host{
--accent-color: #039be5;
--ha-card-border-width: 0px;
}
The --ha-card-border-width: 0px solve the problem.
Can anyone tell me why I am constantly getting these little images when clicking on the buttons. They directly disappear again and it seems that any image is missing … but damn I can’t figure it out!!!
1 Like
Worked for all but the sidebar, where the borders are still visible.
I solved with Clatus’s solution by adding:
card_mod:
style: |
:host{
--accent-color: #039be5;
--ha-card-border-width: 0px;
}
well yeah, if you add a random card it’ll still have a border unless you use card_mod
1 Like
When using a Light entity with the template light, the brightness can be adapted by swiping across the brightness in the circle. Where can I find the code for this action? I would like to create a template for a cover/roller shutter and use swipe actions to open, or close the roller shutter.
Hi,
Using the mini-graph layout that came by earlier.
But I want to use a different entity displaying the temperature in the circle.
I use this code:
- type: custom:button-card
entity: sensor.woonkamer_humidity
name: Vochtigheid
template:
- base
- circle
- graph
variables:
circle_input: >
[[[ return states['sensor.woonkamer_temperature'].state; ]]]
circle_input_unit: "°C"
graph_entity: sensor.woonkamer_humidity
But no circle with the temperature is showing… Who can guide me?
Hi guys,
Great way to learn all in’s and out’s of home assistant. Been tweaking for weeks now but still stuck with the media card.
I would like to have a static image and/or recently added plex thumbnail but can’t get it work yet.
Bigger question when spotify is player the card should change to the spotify album cover and when it stops it should return back to the image/plex thumbail.
What am I missing?
#################################################
# #
# MEDIA #
# #
#################################################
- type: grid
title: Media
view_layout:
grid-area: media
columns: 1
cards:
- type: custom:swipe-card
parameters:
roundLengths: true
effect: coverflow
speed: 650
spaceBetween: 20
threshold: 7
coverflowEffect:
rotate: 80
depth: 300
cards:
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: select.conditional_media
state_not: Spotify_D
- entity: select.conditional_media
state_not: Spotify_L
- entity: select.conditional_media
state_not: PLEX
card:
type: custom:button-card
entity: ### Cannot get this part to work // or can I add a random picture?
name: I dont get this part
tap_action:
action: none
template:
- conditional_media
- icon_plex
- type: conditional
conditions:
- entity: select.conditional_media
state: Spotify_D
card:
type: custom:button-card
entity: media_player.spotify_dennis
template:
- conditional_media
- icon_spotify
- type: conditional
conditions:
- entity: select.conditional_media
state: Spotify_L
card:
type: custom:button-card
entity: media_player.spotify_lillian
template:
- conditional_media
- icon_spotify
- type: conditional
conditions:
- entity: select.conditional_media
state: PLEX
card:
type: custom:button-card
entity: media_player.plex_dennis_plex_for_lg_lg_oled48cx6lb
template:
- conditional_media
- icon_plex
# SWIPE CARD - 2nd PAGE
- type: grid
Does anyone have a guide on how to make animated SVG icons? I would like to make a couple including a garage door opening and closing, a ceiling fan/light combo lighting up/spinning, an XBOX logo turning green, a plug being powered on/off, and probably more down the road.
I would also like to move the people from cards to the sidebar. Maybe in color when they are detected home and in greyscale when they are not. I would still like to be able to tap on them to get more information. I have seen it done before, but I don’t think the configurations have been shared for it.
Can you link to the " mini-graph layout that came by earlier." I do not know what you are referring to.
the circle_input looks fine to me circle_input_unit should be ’ not " but I don’t think that is the issue
try adding a console.log and see what value is in states[‘sensor.woonkamer_temperature’].state.
circle_input: >
[[[
console.log(states['sensor.woonkamer_temperature'].state)
return states['sensor.woonkamer_temperature'].state;
]]]