Did you figure this out? Looking to do the same
I’m currently trying to change the display of a css class. However, this has no effect.
Does anyone know why?
- type: custom:expander-card
title: Expander Card mod
card_mod:
style: |
ha-card {
display: block; !important;
}
.expander-card {
display: block; !important;
}
Remove the semi colon after block to start.
Make no difference
- type: custom:expander-card
title: Expander Card mod
card_mod:
style: |
ha-card {
display: block !important;
}
.expander-card {
display: block !important;
}
I’m using the new sections layout and it sets s minimum height for cards, which is not good when you have a conditional card as there is empty space left.
The hui-grid-section custom component sets --row-height: 66px; on :host. I can’t figure out how to set this back to auto? Presumably this can be set at the card-mod theme level? Any help is appreciated.
1 Like
i’m using a the simple-thermostat card + card-mod with my ecobee thermostat. i’ve got it mostly where i want it:
last thing i’d love is if i could change the display name of a few of the preset modes (“away_indefinitely” , for example, as it is an eyesore). is it possible with card-mod?
this is what the inspect panel shows me for the relevant element:
<div class="mode-item ">
<!----> away_indefinitely<!---->
</div>
i can manually change the text there in inspect and it shows up as i’d like, but i can’t figure out how to make it permanent with card-mod. specifically, i can’t figure out what to do with “<!—>” and how to use card-mod to select the specific mode i’m concerned with – e.g., ‘away_indefinitely’ – since they all have the same class name of “mode-item”.
if anyone could point me in the right direction i’d very much appreciate it!
Only with hiding parts and then add other text via before and after in css. See Link to Ildas example in first post and there the link to before and after examples.
Hey
I use the tile card with input selection to select a room. I was already able to hide the icon and title so that there is only the selection part. But I can’t figure out how to reduce the size of the selection menu. Does anyone have a little tip for me? Thanks in advance
- type: tile
entity: input_select.media_select_room
features:
- type: select-options
card_mod:
style:
hui-card-features $: |
hui-select-options-card-feature {
margin-bottom: -10px !important;
margin-left: -10px !important;
margin-right: -10px !important;
}
.: |
div.content {
display: none;
}
//Edit:
Find the solution by myself. It is possible with the following code:
hui-card-features $ hui-select-options-card-feature $: |
ha-control-select-menu {
--control-select-menu-height: 25px !important;
}
thanks very much!
Is it expected behaviour to see the styles update on page load? I catch a glimpse of the original card styles on page refresh before they update to my custom CSS styles. This results in a lot of movement when navigating between pages (especially when I’m conditionally hiding parts of a card with display: none).
Is that normal (in which case I’ll ignore it), or am I missing something?
I’ve added the external_module_url to the configuration, which I thought would help but didn’t.
frontend:
extra_module_url:
- /hacsfiles/lovelace-card-mod/card-mod.js
This is normal. Cardmod is ingesting the /static/calculated) styles after/during load and (!) during display as well, as it is dynamic/state driven on top. How should it work otherwise, e.g. if you gave styles depending on whatever states?
Thanks for confirming. I wasn’t sure if the CSS could behave more like a conventional website where the styles are rendered as part of the first contentful paint. That makes sense regarding the conditional state changes, though, as there would be no way of knowing ahead of time. But simple colour overrides to static elements took me by surprise.
Simple color overrides should be done via theme wherever possible. But this it is depending on you use cases.
Most of my flickering is depending on number of mods per screen, speed of the browser/boewer-device, …
Some of the cases, where you can see the changes are because of the css-transistions of HA set in default. So it is loading with CSS style of HA with css-transistions set. The card_mod is ingesting the new style and the transition runs on top of this. In such cases, you should try to switch of transition off via card mod as well. Sometimes this is improving the behavior.
I’ll read up on themes, as I’m repeating a bunch of styles across the UI; sounds like they could be of use to me.
Great shout R.E. transitions! I had no idea 
I’ll start there. Thank you for your time.
I have this code
- type: entities
entities:
- entity: input_text.ruimte_8
icon: none
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
ha-select $: |
.mdc-line-ripple::before,
.mdc-line-ripple::after {
border-bottom-style: none !important;
}
the code to remove the line does not work, where am I going wrong ?
how did you go with this?
Why are you using mod code for ha-select when you have an input_text entity?
ha-textfield $: |
.mdc-line-ripple::before,
.mdc-line-ripple::after {
border-bottom-style: none !important;
}
1 Like
Probably because I dont know what i am doing 
2 Likes
and how can I change the backgroud color of the input field ? (disabled would be easiest for me)
thanks