https://github.com/thomasloven/hass-config/wiki/Misc-tricks#node-anchors
1 Like
Thank you so much, and sorry I didnāt see these documents, so helpful!
Something related to Lovelace theme in general; I would like to do more styling changes to the dashboard as a whole. I have tried including a CSS resource, but only the body tag gets the changes.
Is there a way how to do this?
I am experiencing a strange error. I am using card-mod for the manual-alarm-panel. When I first load the panel, the new css is applied to all 3 arm buttons.
However when I disarm, the css only applies to the first button.
I checked the styles applied and can confirm that the position and font-size are inserted in the computed style only on the first button.
Amazing. It struck me no more than an hour ago that this could potentially happen.
You have excellent timing, and Iāll see what I can do about it.
1 Like
Thanks! I only noticed it this morning as I was disarming the alarm. If I refresh, all is good, but using Fully Kiosk as my tablet browser is a bit of a pain.
A bit off topic I guess, but it really annoys me.
Can I add style to the body?
I really want something like this:
body: |
body {
overflow: hidden;
}
So the scrollbar on the right is hidden:
Also thank you @thomasloven for your awesome work on the new card-mod 2.0, I really enjoy it! 
I think thatās one of the few things you can actually do with a lovelace stylesheet resource.
1 Like
Yes. Thanks for the fast answer works! 
I put a style.css in /www/css/style.css with:
/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
body {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
and added it through lovelace resources /local/css/style.css.
2 Likes
Do you need any extra eyes on this? I am happy to lend a hand.
Huh?
The issue with the card-mod only updating the first button.
Oh. You replied directly to a different message, so I was a bit confused.
Iām quite sure I know exactly what the problem is, but unfortunately not how to solve itā¦
Iāll let you know if I need more information.
Oh. But please open an issue on github.
Hi guys, a noob question. I tried to read the entire thread, but I canāt anymore. 
I have an element that I need to position and resize. So I have this style:
style:
height: 87%
left: 55%
top: 40%
width: 100%
Now I want to add some css customization:
style:
:host {
--tile-background: rgba(255, 255, 255, 0.8);
--tile-border-radius: 12px;
--tile-width: 100px;
--tile-height: 100px;
}
How do I combine the two styles? 
Thanks in advance
You ignore card-mod and add them to the styles: property like all others. Itās already CSS.
elements:
- ...
style:
height: 87%
left: 55%
top: 40%
width: 100%
"--tile-background": rgba(255, 255, 255, 0.8)
"--tile-border-radius": 12px
"--tile-width": 100px
"--tile-height": 100px
No semicolons!
1 Like
After 2 days of trying iām short on talent and stuck customising an entity_pictureā¦
- type: custom:button-card
entity: sensor.rova_gft
style:
top: 63%
left: 92%
width: 10%
show_entity_picture: true
show_state: true
show_name: false
styles:
card:
[background: 'blue', border-radius: 0.7vw, box-shadow: none, border: '0.2vw solid #8B9DC3' ]
state:
[font-size: 1.7vw, font-family: SF Mono, color: "#F6F9FB" , opacity: 1, padding: 0.55vw 1.2vw 0.5vw 1.2vw]
entity_picture:
- color: 'white'
I canāt figure out how to change the stroke color (if thatās the right terminology, meaning the icon outline color) of the icon. no matter what I do, it remains black.
looking to change itās color depending on state
appreciate your help !
Hey, I have a setup that uses card-mod to modify some widths, backgrounds and shadows. My setup looks great but the loading time is terrible even on high-end device, on mobile itās even worse. The layout resizes and jumps for few seconds before itās usable. It can even hang the tab of my Firefox. Am I doing anything wrong? Can I speed it up?
I am using version 14 of card-mod.
Layout:
ui-lovelace.yaml:
@thomasloven did you read about a problem like this? Did I overdo my setup?
Thereās you issue. First the cards are loaded then card-mod styles are applied.
If you use the new class feature in card-mod 2.0 this improves the situation considerably as the styles seem to be loaded with the cards.
Documentation on these new features is not available yet but essentially you create a class for each item that needs modding in your theme. e.g. in my day and night themes I have added config like this:
card-mod-theme: night
card-mod-card: |
ha-card.top-level-card {
border: solid 1px var(--secondary-text-color);
background: url("/local/background/card_bg_Night.png");
}
ha-card.inline-card-no-border {
box-shadow: none;
--ha-card-background: rgba(0, 0, 0, 0);
}
Then in my cards instead of adding style: I add:
class: top-level-card
or
class: inline-card-no-border
depending on where and what style I want applied.
You can see more examples here:
1 Like
Thanks @tom_l ! That really helped with the looks of loading. Can you help me with one thing?
I have a card like this:
- type: entities
class: bedroom-control
style:
.: |
.card-content {
padding-left: 0;
padding-right: 0;
}
"#states div":
hui-toggle-entity-row:
$:
hui-generic-entity-row:
$: |
:host {
justify-content:center;
}
.pointer {
display: none;
}
hui-input-datetime-entity-row:
$:
hui-generic-entity-row:
$: |
:host {
justify-content:center;
}
.pointer {
display: none;
}
show_header_toggle: false
entities:
- entity: input_datetime.sunrise_time_3
- entity: input_boolean.sunrise_light_toggle_3
- entity: input_boolean.sunrise_bed_light_toggle_left_3
- entity: input_boolean.sunrise_bed_light_toggle_right_3
- entity: input_boolean.sunrise_covers_toggle_3
How do I move it to a theme so all .bedroom-control have it applied? I did a lot of styles in card-mod-card but cannot make this work.
You would be better off asking Thomas in the topic I linked to. I have not used those particular css options.