Not correct(((
Also, “!important” may be omitted.
In general & SOMETIMES the “element_1 element_2 element_3” path may be replaced by “element_3”.
Hi
Many thanks indeed. Working now with:
card_mod:
style: |
div#name { color: red !important; }
Is there a good guide to when/when not to use ha-card, when you need all elements/when you can just use the last one, when you need ‘$’ or ‘:’ or preceding ‘.’ etc.??
Thanks very much
Andy
Check docs in card-mod repo.
Hi @Ildar_Gabdullin,
I am trying to change the font size and padding of card titles but this code isn’t working:
show_name: false
show_icon: true
show_state: true
type: glance
entities:
- entity: sensor.outdoor_temperature_sensor_temperature
- entity: sensor.outdoor_temperature_sensor_humidity
- entity: sensor.wind_sensor_wind_speed
state_color: true
title: Outdoor temps
card_mod:
style: |
ha-card .card-header {
color: red;
}
Can you point me to the mistake?
Thanks a lot!
- 1st post → link at the bottom → styles for Glance
- Please avoid using “@” for pinging people.
Update: I noticed you asked about card-header.
I updated that post, styles have to be changed - .card-header went deeper into shadowRoot (probably this change).
1 Like
Thanks a lot!
Hi,
Little offtopic but is this code (except card mod) working for you?
supposed to be like that i think:
Am i wrong?
type: conditional
conditions:
- entity: input_select.example_entity_1
state: Example State
card:
type: custom:template-entity-row
entity: light.example_entity_2
name: "{{ states('light.example_entity_2') }}"
tap_action:
action: none
card_mod:
You’d better move that to the correct topic indeed, because it is not very clear why you would want the state as name…
Hi,
I cannot understand what is wrong here. Very basic attempt to set background color of a card. Using this
show_name: true
show_icon: true
type: button
style: |
ha-card {
background-color:
{% if is_state('alarm_control_panel.9000_aaa_zone_1_alarm', 'disarmed') %}
red;
{% elseif is_state('alarm_control_panel.9000_aaa_zone_1_alarm', 'armed_away') %}
blue;
{% elseif is_state('alarm_control_panel.9000_aaa_zone_1_alarm', 'armed_night') %}
green;
{% else %}
yellow;
{% endif %}
}
tap_action:
action: none
entity: alarm_control_panel.9000_aaa_zone_1_alarm
icon: mdi:bell
show_state: true
hold_action:
action: none
If I have the below it works:
show_name: true
show_icon: true
type: button
style: |
ha-card {
background-color: red;
}
tap_action:
action: none
entity: alarm_control_panel.9000_aaa_zone_1_alarm
icon: mdi:bell
show_state: true
hold_action:
action: none
Any ideas?
Not even yellow 
Try your templates in developer tools template section and it will show you the problems.
And please don’t post full problems several times.
1 Like
Thanks arganto
I’m a bit stuck… I had working code prior to the UI updates from December 2022. It’s the last remaining thing I haven’t been able to fix.
My old (now broken) modifications:
card_mod:
style:
ha-markdown:
$:
ha-markdown-element: |
table {
border-spacing: 0;
width: 100%;
padding: 8px;
border-radius: var(--ha-card-border-radius);
}
th {
background-color: var(--state-icon-color);
color: white;
padding: 4px;
}
th:first-child {
border-top-left-radius: min(var(--ha-card-border-radius)/2, 5px);
}
th:last-child {
border-top-right-radius: min(var(--ha-card-border-radius)/2, 5px);
}
td {
padding: 4px;
}
tr:nth-child(even) {
background-color: var(--table-row-background-color);
}
In short, this added some rounding to the header and footer rows and gave alternating rows differing colours.
I’ve inspected the DOM and I can only see a top-level <card-mod>, which probably means I can’t style any inner elements anymore, unless there’s some trick I’m missing.
I can still apply something like a scrollbar via this top-level element, but can’t seem to reach anything else. The last example of markdown card changes is one by Mariusthvdb and some comments by Ildar, but that’s prior the UI updates.
Is this kind of change definitely not possible anymore?
Try with
card_mod:
style:
ha-markdown $:
ha-markdown-element: |
Does this code work?
Shouldn’t you use “calc()” here?
I may be wrong.
Also, I suggest you to define a “default” value:
var(--ha-card-border-radius, 4px)
why are you using card_mod on the button-card? you can set those directly in the styles section of the button-card itself?
wait, nvermind me. I didnt see the well hidden
right there in the middle of the card config…
sorry
Not so sure about that, Ive never used the ha-markdown-element: yet, but, just this day, no such thing as coincidence, I wondered if we could card_mod per section in a markdown card. Is that what this does?
because if so, Id love to be able to change this mod:
- type: markdown
card_mod:
style: |
ha-card.type-markdown {
overflow-y: scroll;
height: 450px;
}
content: >
### Components: {{state_attr('sensor.overview_components','Components')}}
Per domain:
{{state_attr('sensor.overview_components','per domain')}}
to starting the scroll section below the Per domain line.
the template that follows is a huge list of ordered components in the system, and Id love to keep the ‘header’ in sight.
I might be able probably to fake that, and use 2 stacked cards, but it would be very nice to be able to target sections inside a markdown card?
- type: markdown
content: |-
<p>Read:</p>
<p>The quick brown fox jumps over the lazy dog.<br>
The quick brown fox jumps over the lazy dog.<br>
The quick brown fox jumps over the lazy dog.<br>
The quick brown fox jumps over the lazy dog.<br>
The quick brown fox jumps over the lazy dog.<br>
The quick brown fox jumps over the lazy dog.<br>
The quick brown fox jumps over the lazy dog.<br>
The quick brown fox jumps over the lazy dog.<br>
The quick brown fox jumps over the lazy dog.<br>
The quick brown fox jumps over the lazy dog.<br>
The quick brown fox jumps over the lazy dog.<br>
The quick brown fox jumps over the lazy dog.<br>
The quick brown fox jumps over the lazy dog.<br>
The quick brown fox jumps over the lazy dog.<br>
The quick brown fox jumps over the lazy dog.<br>
The quick brown fox jumps over the lazy dog.</p>
End!
card_mod:
style:
ha-markdown $: |
p:nth-child(2) {
max-height: 200px;
overflow-y: auto;
}
2 Likes
elif Instead elseif
type: vertical-stack
cards:
- type: alarm-panel
states:
- arm_night
- arm_away
entity: alarm_control_panel.9000_aaa_zone_1_alarm
card_mod:
style:
.: |
ha-card {
background-color:
{% if is_state('alarm_control_panel.9000_aaa_zone_1_alarm', 'disarmed') %}
red;
{% elif is_state('alarm_control_panel.9000_aaa_zone_1_alarm', 'armed_away') %}
blue;
{% elif is_state('alarm_control_panel.9000_aaa_zone_1_alarm', 'armed_night') %}
green;
{% else %}
yellow;
{% endif %}
}
ha-chip:
$: |
div:nth-child(1) {
{% if is_state("alarm_control_panel.9000_aaa_zone_1_alarm", "disarmed") %}
background-color: green;
{% elif is_state("alarm_control_panel.9000_aaa_zone_1_alarm", "armed_away") %}
background-color: red;
{% elif is_state("alarm_control_panel.9000_aaa_zone_1_alarm", "armed_night") %}
background-color: orange;
{% elif is_state("alarm_control_panel.9000_aaa_zone_1_alarm", "triggered") %}
background-color: red;
{% else %}
background-color: grey;{% endif %} }
1 Like
I know. And the reason for quoting it as well. And the hint to check template playground in dev-tools.
Helping people help themselves. And as he already replied with thanks and heart, it was solved already.