Issue submitted: https://github.com/thomasloven/lovelace-card-mod/issues/68
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.
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?
For me it has no effect on the color.
Would you care to share an example of a theme-file that has these class definitions?
This feature will make styling much easier!
Thanks 
I posted an example here last week:
1 Like
Great thanks, that got me started.
IĀ“m having som problem reaching markdown
This is what IĀ“m trying to convert.
content: |
# Doors
style:
.: |
ha-card {
padding-left: 20px !important;
background-color: var(--primary-background-color);
border-radius: 15px;
margin: 10px;
box-shadow: none;
}
ha-markdown:
$: |
h1 {
font-size: 20px !important;
font-weight: 500 !important;
padding: 0px 0px 0px 8px !important;
border-left: 3px solid #ffcc00;
color: var(--card-header-text-color);
}
type: markdown
card-mod-theme: clear
card-mod-card: |
ha-card.header-card {
padding-left: 20px !important;
background-color: var(--primary-background-color);
border-radius: 15px;
margin: 10px;
box-shadow: none;
}
ha-card.header-card ha-markdown {
$: |
h1 {
font-size: 20px !important;
font-weight: 500 !important;
padding: 0px 0px 0px 8px !important;
border-left: 3px solid #ffcc00;
color: var(--card-header-text-color);
}
But I canĀ“t get the correct syntax for the markdown bit, any suggestions ?
I canāt seem to locate the/a example for animated icons moving across what is presumably a picture entities card like in the OP example. Link to āmore examplesā is dead via Github. Could someone please point me in the right direction?
Iām interested in using this to draw bounding boxes (or at least āpositioning iconsā) for image processing/object detection.
Thanks plus maybe sorry if Iāve missed something obviousā¦
Iām pulling my hair out here. How do I get buttons within a horizontal-stack to align to the left side of the screen with defined space between them? I figured out how to set a uniform size for the button in ha.card.type-button but canāt figure out the alignment. Right now they evenly space across the screen. Iāve tried setting margin and padding everywhere I can think of but Iām at a loss. Surely others have done this?
Also, is there a cheatsheet somewhere for where to format the stack title and icon and friendly name within a button? Iāve tried using the Inspector in Chrome but to no avail.
Hi, Iām looking for some help on how to style a certain element within the shadow-dom. Despite the various examples in this thread Iām still failing to write the proper syntax.
I want to style the items of a shopping list card.
The DOM tree for these items is (class/id added when element has that property too):
ha-card > div (.addRow) > paper-input (.addBox) > $ > paper-input-container (#container) > iron-input (.input-element) > $ > input
ha-card > div (.editRow) > paper-input > $ > paper-input-container (#container) > iron-input (.input-element) > $ > input
Following the examples in this thread this should do the trick to style both elements:
style:
paper-input:
$:
iron-input:
$: |
input {
color: red !important;
}
but it doesnāt. Iāve already tried via the classnames or idās as well or adding all tree elements that you should be able to skip in the selector.
I also have enabled debug_cardmod: true but donāt see any feedback in the console.
To be complete: the shopping list card is itself daughter of a stack-in card, but I donāt think thatās an issue. Styling shopping-card elements that are not inside a shadowroot works fine.
Could someone help me figure out on which element I should be adjusting the margin/padding to get rid of the space between these buttons in a horizontal stack? Iāve tried seemingly everywhereā¦modifying ha-card with a style tag under the button definition doesnāt seem to do it. The orange space is what Iām trying to eliminate. This is what Inspector shows when I click on this button card element.
Edit:
I figured it out within the style: tag with much experimentation, but how do I now convert this into the themes.yaml so it is applied everywhere? I have the basic structure with card-mod-card:, etc.
style:
hui-horizontal-stack-card:
$:
"#root": |
hui-button-card {
width: 130px !important;
max-width: 130px !important;
}
Hi,
I am trying to use a layout-card grid layout. When I do that, I get something like this:
Except that I manually edited the style for the div tag in my browser to set height:100%.
And that is my question:
I would think it would be more sensible if the div tag was 100% by default. The <layout-card> does have the height I want, but the div tag sizes after its content instead of after the <layout-card>.
Anyway, I can not figure out to use card-mod to set the height of the div tag to 100%. Can anybody help.
Sorry if the above is to terse, just let me know if I should add more code and screen samples
Thanks this is kind of what I was looking for too. I was trying to use entity filter on the badge to hide when not active. I found out mod-card is needed for this but this only works with cards not badges.
Then realised your template hides the badge when not on as well which is awesome! The only problem is when loading the page the badge displays for a second then hides. Is there another way to do this without this effect? Did you find a more elegant solution @Tomahawk?