Thank you!! I had overlooked this link and this should answer the vast majority of any other syntax issues I might come across, this is exactly what I need for future ideas
Hereās an abbreviated example from my own, combining two mods. Should put you on the right path. There might be other or better ways.
card_mod:
style:
.: |
:host {
--label-badge-text-color:
...
ha-state-label-badge $ ha-label-badge $: |
...
1 Like
struggling with something I havent modded before: use an auto-entities, but set the display to a fixed height (and add a scrollbar), so it doesnāt keep moving the frontend up and down, depending on the entities displayed.
- type: custom:auto-entities
card:
type: entities
card_mod: &mod
style: |
ha-card {
box-shadow: none;
margin: -16px -16px 0px -16px;
}
.card-content {
max-height: 100px;
overflow-y: scroll;
}
does create the scrollbar when needed. However, I can not set a fixed height and get the scrollbar.
1 Like
This is what I brewed, works as expected. Thank you!
style:
.: |
ha-card {
border-width: 0px;
}
hui-horizontal-stack-card $: |
div#root > :first-child {
width: 75%;
flex: auto;
}
div#root > :last-child {
width: 25%;
flex: auto;
}
1 Like
Hi, is there a way to color the icon based on the status in the scheduler card? I tried that, but it doesnāt work. The icon is always red.
type: custom:scheduler-card
include:
- climate
exclude: []
title: false
display_options:
primary_info:
- Prog. {entity}
secondary_info:
- ā {days}
- '{action} - {relative-time}'
icon: entity
card_mod:
style: |
:host {
--card-mod-icon-color: green;
--card-mod-icon-active-color: red;
}
Hello guys,
Iād like to configure the new tile card.
I want to colorize the background of the icon.
I did a specific post with everything I tried but there is no answer so Iām back here.
Can someone have a look at this post please?
And when there is a solution, it would be great if @Ildar_Gabdullin can include it into his/her bible post Ildar_Gabdullinās bible for card-mod
Thank you in advance
Hello Guys,
Can someone tell me what Im doing wrong here, The styling is applying to the card as expected but I canāt get my H1 and H3 headings to style:
- type: markdown
style: |
ha-card {
border: 0px;
}
h1 {
text-align: center;
font-size: 14px;
padding: 0px;
color: #fff;
text-transform: uppercase;
line-height: 0px;
font-weight: bold;
}
h3 {
text-align: center;
font-size: 11px;
padding-top: 8px;
text-transform: uppercase;
line-height: 0px;
font-weight: normal;
padding-bottom: 0px;
margin-bottom: -25px;
}
content: >
<h1>Dualit 2 Slot Classic</h1>
<h3>Kitchen</h3>
fixed this using, in case anyway is interested:
- type: markdown
style:
.: |
ha-card {
border: 0px;
}
ha-markdown:
$: |
h1 {
text-align: center;
font-size: 14px;
padding: 0px;
color: #fff;
text-transform: uppercase;
line-height: 0px;
font-weight: bold;
}
h3 {
text-align: center;
font-size: 11px;
padding-top: 8px;
text-transform: uppercase;
line-height: 0px;
font-weight: normal;
padding-bottom: 0px;
margin-bottom: -25px;
}
Noobie question: is it possible to change entity info card size? (Not sure what the correct term is, the popup window that shows entityās history curve in the lovelace dashboard.)
In web browserās debug I can change ha-dialog --mdc-dialog-min-width --mdc-dialog-max-width and those change the size. But I canāt make it work with the card mod. Is this even possible or do I need some other addon for this?
Hi all.
I have insert a tile card in my dashboard
- type: tile
entity: person.marco
icon: mdi:account
show_entity_picture: true
style: |
ha-card {
background-color: #383838;
border: 1px solid;
border-color: #000000;
border-radius: 5px;
}
ha-tile-info {
background: red;
}
.badge {
background: green;
}
.icon-container {
background: aliceblue;
}
.info {
background: black!Important;
}
.primary {
font-size: 20px!Important;
}
This is the structure
I am able to change style for ha-card, .badge, .icon-container, ha-tile-info, but NOT for .info and .primary.
Hallo, maybe I missed it somewhere, when a tooltip falls across the bottom border of the screen (graph at the bootm), the scrollbar appears on the right and very unpleasant blinking effect occurs at the same moment, making the whole page unreadableā¦
(could be better described in a short videoā¦but I canāt upload it here unfortunately)
Is this please solved here somehow?
Thank you.
Willy
PS: the history_explorer_card, what I am playing with a bit, has a tooltip changing its position depending where it should ocur, (and if on bottom, it apears above the graph not below), so it doesnāt destroy the screen leyout and this effect is not occuring.
This is because .info and even more .primary are not at the top level of the DOM query.
And Iād love someone to explain how this works because it is 6 days that Iām struggling with almost the same issue with the same card but for .shape under ha-tile-icon of icon-container.
Same as for all other shadow roots most probably. As in every other example with shadow root in this thread. Didnāt use this card, but without test:
card_mod:
style:
ha-tile-info$: |
.primary { font-size: 20px !important; }
1 Like
Unfortunately donāt work for me 
Then you are not using, what I have posted. Because of your feedback I have tested it now and as assumed, it is working.
I am sorry! Youāre right, I put it in the wrong place!
In card style and not in card_mod->style!
- type: tile
entity: person.marco
icon: mdi:account
show_entity_picture: true
# This is correct
card_mod:
ha-tile-info$: |
.primary { font-size: 20px!Important; }
style: |
# This is wrong
# ha-tile-info$: |
# .primary { font-size: 20px!Important; }
ha-card {
background-color: #383838;
border: 1px solid;
border-color: #000000;
border-radius: 5px;
}
Thank you!!
TBH, where is the style coming from? And why did you again not use, what I have posted? There should be (better compability) a style below card_mod. See my example.
And of course, you can combine both styles, the one for root and the one for shadow root. See example in this thread. One questions regarding this is only some posts above yours.
This way:
card_mod:
style:
.: |
ha-card {
background-color: #383838;
border: 1px solid;
border-color: #000000;
border-radius: 5px;
}
ha-tile-info$: |
.primary { font-size: 20px !important; }
1 Like
I usually hardly use card_mod if I donāt need it.
Non-standard cards almost all have a āstyleā section that works well.
In this case, yes, I agree, it is better to āmergeā everything
Hi,
Iām trying to set the row height of a particular entities card row, but I think donāt use the right selector.
- type: entities
entities:
- type: custom:template-entity-row
name: "De temperaturen van de laatste 24 uur:"
card_mod:
style: |
:wrapper {
min-height: 25px;
}
state-badge {
display: none;
}
If I set the min-heigt property in chroom dev tools the height changes.
the state-bage style is working.
Go to this post, scroll down a bit and you see a section on managing entity card row height.
Card-mod - Add css styles to any lovelace card - Share your Projects! / Dashboards & Frontend - Home Assistant Community (home-assistant.io)