No problem, happy to assist!
1 Like
Hi there, i try to get a orange border around my conditional multiple-entity-row.
type: entities
entities:
- entity: sensor.error_code
card_mod:
style: |
ha-card.type-entities {
border-color: orange;
}
:host {
--card-mod-icon-color: orange;
}
type: custom:multiple-entity-row
name: Fehler!
secondary_info: last-changed
state_header: Code
state_color: true
entities:
- entity: sensor.error_time
name: Aufgetreten am
i got the orange icon working but not the borderā¦ Any advivce how to find out the right selector for that?
What i got:
what i want:
Thanks for your help!
Another issue I canāt solve for - how do I increase the font size of mushroom-chips-card type:template
In the below code (which doesnāt work) I am trying to get the Rooms to show up a little bigger than it is by default.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
content: Rooms
card_mod:
style: |
ha-card {
--card-primary-font-size: 25px !important;
background-color: transparent !important;
box-shadow: none;
border: none !important;
}
alignment: start
I have also tried --card-secondary-font-size and no luck.
--chip-font-size: 20px; will adjust it.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
content: Rooms
card_mod:
style: |
ha-card {
--chip-font-size: 20px;
background-color: transparent !important;
box-shadow: none;
border: none !important;
}
alignment: start
Try changing the last line in your code - expanding your card total height.
card_mod:
style: |
ha-card {
height: 120px;
}
Just a heads up, he was looking to reduce the overall height of the card. This was cross posted on another thread and a top: -15px solved his issue.
Thanks for making this tool. Can anyone see what I am doing wrong? I am trying to basically just hide the header (and background to make it look like a long chip.
type: custom:hourly-weather
entity: weather.pirateweather
icons: true
show_precipitation_amounts: false
show_precipitation_probability: false
card_mod:
style:
.: |
ha-card {
background: none;
border: 0px;
}
.card-header{
display: none;
}
card_mod:
style:
.: |
ha-card {
background: none;
border: 0px;
}
"$": |
.card-header{
display: none;
}
card_mod:
style:
.: |
ha-card {
background: none;
border: 0px;
}
"ha-card $": |
.card-header{
display: none;
}
I have already suggested you a proper syntax for a header in your github issue.
Also, since you can use Code Inspector - check if your attributes are applied.
Wrong value, try āborder: noneā.
Youāll see the second version I gave included
"$": |
.card-header{
display: none;
}
which is what you suggested on the github issue. It didnāt work. Although, moved the conversation here as it wasnāt a ābugā, rather a support request.
Thanks for the border point, 0px worked, but Iāve switched it to none.
Edit: The attributes are not applied / not a css specificity issue.
Because you have not checked if your style was applied or DECLINED.
Find your declined line in Code Inspector (and google about āimportantā).
Besides, why donāt you try āNOT SHOWING a headerā instead of hiding it?
Any idea how i can change the border color of my multiple-entity-row card?
i already searched the community but didnāt find a solution for this 
its a ha-card of class type-entities. When i change the color in the browser directly it works, but i dont get it working in HASS using card-mod
I mentioned that it wasnāt a css specificity issue. !important isnāt going to do anything. Itās not that the style is being overwritten by a more-specific style, it is that it is not being applied in the first place.
I am assuming that by declined you are referring to the promise?
If so, it is being rejected, although Iām not clear why or how to debug that further:
>> $0.card_mod_children
Object { "$": Promise { "rejected" } }
ā
"$": Promise { <state>: "rejected", <reason>: DOMException }
ā
<prototype>: Object { ā¦ }
I am not getting, sorry.
Just try ādisplay: none !importantā.
And think again about my advice for ānot showingā in the prev post.
Besides, why donāt you try āNOT SHOWING a headerā instead of hiding it?
How do you suggest I do that?
Just try ādisplay: none !importantā.
I have just tried that, although it did not work. The style isnāt being applied. Itās not that itās being overwritten.
Thanks for your help on this by the way. 
Set null for a title or how it is called.
type: custom:hourly-weather
entity: weather.pirateweather
icons: true
show_precipitation_amounts: true
show_precipitation_probability: true
name: null
That does work. Thank you. I didnāt realise I could do that. Although I am still curious as to why the browser-mod method didnāt work
what method again?
Typo, I meant card-mod
hey good news - i got it on my own The card-mod style needs to be outside the entity, on the same level as ātype: entitiesā then it does the trick!
type: conditional
conditions:
- entity: sensor.error_code
state_not: no request
card:
type: entities
card_mod:
style: |
ha-card {
--ha-card-border-color: orange;
}
entities:
- entity: sensor.error_code
card_mod:
style: |
:host {
--card-mod-icon-color: orange;
}
type: custom:multiple-entity-row
name: Fehler!
secondary_info: last-changed
state_header: Code
state_color: true
entities:
- entity: sensor.error_time
name: Aufgetreten am