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.
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.
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.
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!
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:
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.
Right, thanks
So Iām a little confusedā¦ I use a few different themes. (Downloaded via HACS and I use an input select with an automation to change theme)
Some of the themes seem display different icons with different coloursā¦ So far as I cam tell,
paper-item-icon-color:
state-icon-color:
seem to be the main culprits. So Iād like some global way of mapping paper-item-color to state-icon-colorā¦ now I know I can do that with card mod on a card and I could also just edit the offending themes but that makes it hard when the theme maker updates a theme.
This is an example of what I mean.
With Google Dark Theme:
With ios-dark-mode-blue-red
Google Dark Mode
paper-item-icon-color: rgb(169, 177, 188)
paper-item-icon-active-color: rgb(138, 180, 248)
state-icon-color: rgb(138, 180, 248)
state-icon-active-color: rgb(169, 177, 188)
iOS Dark Blue Red
state-icon-color: "#FFF"
state-icon-active-color: rgba(255, 214, 10, 1)
paper-item-icon-active-color: rgba(255, 214, 10, 1)
paper-item-icon-color: "#333333"
So Iād like to be able to set a global style that maps paper-item-icon to the state-icon-color etc overiding the theme. Is that something this card-mod can do?