Sorry if my questions are too basic but, what means when you put div#aspect-ratio in the next line? I am not supposed to follow the objects in the code Inspector?
Frankly speaking, from my experience I do not expect some 100% predicted behaviour.
Sometimes I need to do this:
xxx $:
xxx $: |
xxx {...}
sometimes it does not work and I have to do this:
xxx $ xxx $: |
xxx {...}
Next, instead of this:
xxx $ xxx $ xxx: |
xxx {...}
I usually use this:
xxx $ xxx $: |
xxx xxx {...}
but may be in some cases the upper variant can work, I am not sure ))).
Experiment!
Basically what Ildar said, but to add on a bit:
What you need to understand is that after the | the CSS that follows will go into a <card-mod> element inside the last element you navigated to with the part before the |.
My guess here (without seeing the HTML) is that the .button-card-main class sits on that last div so you canāt apply the style inside it ā itās a done deal by that point. You must go up one level.
Also, that div selector targets specifically a div with ID #aspect-ratio to disambiguate it from other divs there possibly might be at the same level.
The least frustrating approach for me to do things with card-mod is to add or change the CSS in a live page until I get what I want and then backwards to figure out how I must configure it.
Is there a way to make mushroom chip cards transparent? I can make other mushroom cards transparent with card mod using the following but it doesnāt work with chip cards
card_mod:
style: |
ha-card {
--paper-card-background-color: transparent;
--secondary-background-color: transparent;
background: transparent;
border: transparent;
box-shadow: none
}
Hi, I need some help with a conditional card that I need to configure with a max width.
type: conditional
conditions:
- entity: input_boolean.mail_to_collect
state: 'on'
card:
type: custom:mushroom-template-card
entity: input_boolean.mail_to_collect
icon: mdi:mailbox
primary: Hay Cartas
content_info: name
icon_color: red
badge_icon: mdi:email
badge_color: red
tap_action:
action: more-info
card_mod:
style: |
:host {
max-width: 120px;
}
card_mod:
style: |
hui-conditional-card {
max-width: 5px;
}
hui-conditional-card:first-child {
max-width: 120px;
}
:host {
--column-max-width: 120px;
max-width: 120px;
}
#root {
max-width: 120px;
}
Could you help me, please? I want to configure the conditional card with a max width of 120 px.
type: custom:mushroom-chips-card
chips:
- type: menu
- type: back
- type: entity
- type: spacer
- type: light
entity: light.yeelight_lamp
- type: spacer
card_mod:
style: |
ha-card {
--chip-background: red; #in your case --chip-background: none;
--chip-border-width:0px;
--chip-box-shadow: none;
}
For mushroom card all, what you need is here:
Mushroom Cards - Build a beautiful dashboard easily 
- Share your Projects! - Home Assistant Community (home-assistant.io)
for example
Cheers mate 
your code is working, but not this one:
card:
show_name: true
show_icon: true
show_state: false
type: glance
style:
.entitiy:
$: |
state-badge {
margin: 0px !important;
background: pink;
margin-top: 0px;
margin-bottom: 0px;
}
columns: 24
state_color: false
card_mod:
style: |
ha-card {
background: rgb(0,0,0,0) !important;
}
.entity {
border-left: 0.1em solid #aaaaaa;
}
.entity:nth-of-type(24) {
border-right: 0.1em solid #aaaaaa;
}
{%- for i in range(1,25) -%}
.entity:nth-of-type({{i}}) {
padding: 0 0 7em;
margin: 0 0 7em;
}
{% endfor %}
card_param: entities
filter:
include:
- entity_id: sensor.forecast_new_h*
exclude: null
sort:
method: entity_id
numeric: true
show_empty: true
view_layout:
grid-area: header```I cannot get rid of the margin in my codeā¦ could you help?
card:
show_name: true
show_icon: true
show_state: false
type: glance
style:
.entitiy:
$: |
state-badge {
margin: 0px !important;
background: pink;
margin-top: 0px;
margin-bottom: 0px;
}
columns: 24
state_color: false
card_mod:
style: |
ha-card {
background: rgb(0,0,0,0) !important;
}
.entity {
border-left: 0.1em solid #aaaaaa;
}
.entity:nth-of-type(24) {
border-right: 0.1em solid #aaaaaa;
}
{%- for i in range(1,25) -%}
.entity:nth-of-type({{i}}) {
padding: 0 0 7em;
margin: 0 0 7em;
}
{% endfor %}
card_param: entities
filter:
include:
- entity_id: sensor.forecast_new_h*
exclude: null
sort:
method: entity_id
numeric: true
show_empty: true
view_layout:
grid-area: header```I canāt easily reproduce that card so I canāt help you beyond telling you that you misspelled entity.
Hi,
I am using a logbook card to list events from my alarm.
I would like to decrease the line spacing between the lines, but I canāt figure out how this was doable.
The code I am using is below. Is this actually possible (I was trying to use all kind of ways I am using for other cards, but none works for this).
type: custom:logbook-card
entity: sensor.dscalarm_event
title: ''
max_items: 10
hidden_state:
- ''
- '*Special'
- '*Periodic test trans'
- unavailable
show:
end_date: false
start_date: false
duration: false
icon: false
card_mod:
style: |
:host {
text-align: left;
font-size: 14px;
}
ha-card {
margin: -5px;
background: none;
box-shadow: none;
border-width: 0;
padding-top: 10px;
padding-left: 10px;
--primary-text-color: rgb(180,180,180);
}
Donāt just do it via trial and error, but only what is needed. And what is needed, you will see in the dev-tools. Let me give an example. Open the logbook card and open dev tools in browser. Then click on the arrow and select the line in the logbook card and the dev tools will select and highlight.
So each line has a class item and is directly below ha-card element and not within a shadow root. So the easiest way to change.
Then have a look how the space is currently defined for this class
ah, via padding-top and padding-bottom 5px.
Combine both information and just do
card_mod:
style: |
.item {
padding-top: 50px !important;
padding-bottom: 50px !important;
}
(in your case add to the rest).
Done. And a. much faster as with trial and error or via ātrying to use all kind of ways I am using for other cardsā and b. less need to ask.
thanks, but that wasnāt the problem
Many thanks! I could indeed get it working by using .item!
ā¦and really really helpful explanation, I was always wondering how to check this!
However, I donāt see what do you mean by āopen the logbook cardā. If I open devtools in the browser for the whole page, then I get lost in it almost immediatelyā¦ So how can I reproduce do view you show on the screenshot.
then hover until you find the best fitting ancore, here the row:
and click. With this the dom will show the clicked element.
now its workingā¦ card_mod was one level too high:
type: custom:auto-entities
card:
show_name: true
show_icon: true
show_state: false
type: glance
style:
.entities .entity:
$: |
state-badge {
margin-top: 0px;
margin-bottom: 0px;
}
columns: 24
state_color: false
card_param: entities
filter:
include:
- entity_id: sensor.forecast_new_h*
exclude: null
sort:
method: entity_id
numeric: true
show_empty: true
view_layout:
grid-area: header
card_mod:
style: |
ha-card {
background: rgb(0,0,0,0) !important;
}
.entity {
border-left: 0.1em solid #aaaaaa;
}
.entity:nth-of-type(24) {
border-right: 0.1em solid #aaaaaa;
}
{%- for i in range(1,25) -%}
.entity:nth-of-type({{i}}) {
padding: 0 0 7em;
margin: 0 0 7em;
}
{% endfor %}
How may I target the icon on the mushroom-media-player-card but NOT the play control button icon please?
card_mod:
style: |-
:host {
--card-mod-icon-color:
{% if is_state('media_player.kitchen','playing') %}
#FFC107;
{% else %}
#3F51B5;
{% endif %}
}
To partly answer my own questionā¦ this works for the icon but not the shape-color (circular background). Butā¦ with this and my previous attempt, when the state changes back to paused (from playing) the icon color remains amber for a while. 
card_mod:
style: |-
mushroom-shape-icon {
{% if is_state('media_player.kitchen','playing') %}
--card-mod-icon-color: #FFC107;
--card-mod-shape-color: #FFC107;
{% endif %}
}
Border style for input_datetime set as time?
Iāve been recreating and learning from the plethora of fine examples posted by Ildar and Iāve run into a snag. Iām trying to recreate, ātest timeā as seen at the bottom of post 3388.
Iāve checked older methods, newer methods, indenting, typos, etc., and I end up with no border (or worse 
).
Please, what am I missing?
type: entities
entities:
- entity: input_datetime.test_time
card_mod:
style:
ha-time-input $ ha-base-time-input $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-time-input {
height: 38px;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 4px !important;
}
.: |
:host {
--mdc-text-field-fill-color: transparent;
--mdc-select-fill-color: transparent;
}
Thank you.