Thanks, that does help. But once its clicked, before the actual popup closes, i can see the circle bouncing around for like 0.2-0.3 seconds. If I remove the code you suggested, the circle is missaligned, but then in those 0.2-0.3 seconds it bounces into the correct place. Anyway, it is a very minor thing, so no worries. Thank you so much for your help!
Sorry for the delay. I use the Home Assistant app on my android, witch send to HA a lot of sensors, like: wifi i’m connected, the bluetooh connected, location, battery loading, and may others.
Is there a way to hide a section on certain devices? For example, I want the media section to show up on a large screen but not show up on on a phone screen. I tried to just not add the block but it made the layout all funky.
Yes it should be possible. Look at this section of the layout-card documentation.
2 Likes
update to 2022.11 borders, this doesn’t remove borders in other sections of ha
Does anybody know how to reduce the size of the grid titles?
I thought it was the font-size: 2.5vw !important; in the Grid Card Headings/h1 section but changing it does not affect the look, even after cache deletion. Any help much appreciated. Thanks
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;
}