Hmm, I do not think this is possible. Will try a bit later once again. Note that in a ābuttons-rowā it was also not possible to style āfrom the buttonās levelā - here it seems to be a similar story.
right, that could be it yes.
I had hoped to use :host or some other high level elementā¦
maybe youāll find it, Ill keep trying too 
Hello together,
does anybody know how I can change the color for the icon at the badge of the new heading card?
Many thanks!!
My YAML for the heading so far, but it has no effect
type: heading
icon: ""
heading: Batterien
heading_style: title
badges:
- type: entity
show_state: true
show_icon: true
entity: binary_sensor.hausbatterien
tap_action:
action: more-info
card_mod:
style:
.: |
ha-state-icon {
{% if is_state(binary_sensor.hausbatterien, 'off') %}
color: var(--success-color) !important;
{% else %}
color: var(--error-color) !important;
animation: blink 2s linear infinite;
{% endif %}
}
@keyframes blink {
50% {opacity: 0;
}
}
1st post ā link at the bottom ā heading
At thomasloven/lovelace-card-mod I cannot find anything about the new header, not sure if I miss somethingā¦
When I check at Heading card - Home Assistant (home-assistant.io) there is a section about color for the badges BUT this affects only the color in active condition. So when the battery is OK I would like to style that to green.
Can you help me to get the proper position for the solution? Many thanks in advance!
Many thanks, I took the wrong link.
For other if they also like to color / indicate a low battery with the new headingā¦
type: heading
icon: ""
heading: Batterien
heading_style: title
badges:
- type: entity
show_state: true
show_icon: true
entity: binary_sensor.hausbatterien
tap_action:
action: more-info
card_mod:
style:
.badges hui-heading-badge:nth-child(1) hui-entity-heading-badge $: |
ha-heading-badge {
{% if is_state('binary_sensor.hausbatterien', 'off') %}
--icon-color: green;
{% else %}
--icon-color: red;
animation: blink 2s linear infinite;
{% endif %}
}
@keyframes blink {50% {opacity: 0;}}
Yay I was right that passing events to button-card would do the trick. And it turned out to be very easy, just add this to ābuttonizeā template:
buttonize:
(...)
styles:
(...)
custom_fields:
inner_card:
- pointer-events: none
This gives weather-forecast card all click-effects defined in ābuttonizeā (apart from ārippleā I also have ābounceā effect when left-clicked)
Thanks! Very nice.
I was trying to change the font or color of all badges to the same, without specifying a specific child, so far with no success.
Any ideas what am I missing?
- type: heading
card_mod:
style:
.badges hui-heading-badge hui-entity-heading-badge $ ha-heading-badge $: |
.heading-badge {
font-family: inherit !important;
}
.: |
.content p {
font-family: inherit !important;
}
Wew lads what theme is that? 1998?
somehow, Ive always used custom:button-card to make the headers of my compound listing cards (entities, vertical-stack) when in need of some templated value in the header.
my regular headers are:
ha-card.class-header-margin .card-header {
background: var(--background-color-off);
font-weight: 400;
font-size: 20px;
color: var(--text-color-off);
padding: 0px 12px;
margin: 0px 0px 16px 0px;
}
in card-mod theme, and they are matched by this button-card template:
button_default_title:
show_state: false
show_icon: false
tap_action:
action: none
styles:
card:
- background: var(--background-color-off)
- color: var(--text-color-off)
- font-size: 20px
- font-weight: 400
- padding: 12px
name:
- justify-self: left
and make this possible:
- type: custom:button-card
template: button_default_title
name: >
[[[ return 'Kies Activiteit: ' + states['input_select.activiteit'].state; ]]]
only now (ā¦) it dawned on me, I could also use a markdown card for the templated content, so I copied the style, but it doesnāt exactly fit.
- type: markdown
content: >
Kies Activiteit: {{states('input_select.activiteit')}}
card_mod:
style: |
ha-card.type-markdown {
background: var(--background-color-off);
color: var(--text-color-off);
font-size: 20px;
font-weight: 400;
}
.no-header {
padding: 8px 12px 14px 12px;
}
itās almost there, but the margins are a bit peculiar. Ive set them on the .no-header now, at forst I had set them on the card, but apparently the markdown has its own stylings that interfere
as it stands its very nice, but not exact, and need a second eye to see where I should change the padding to make it perfect.
The top card is the button-card, with a perfectly centered name. the bottom one is the markdown, which slightly changes:
I could probably customize those paddings more meticulously, as I had to do with the new section heading
ha-card.class-section-heading .container {
background: var(--background-color-off);
--ha-heading-card-title-color: var(--text-color-off) !important;
--ha-heading-card-title-font-size: 20px !important;
--ha-heading-card-title-font-weight: 400;
height: 24px;
padding: 12px 8px 12px 12px;
}
but maybe I am targeting the wrong element in the Markdown ?
btw Iāve filed a FR for adding actions to Markdown please consider upvoting that
Hi,
Can you please advise how exactly you put this class in the theme? Cam you maybe show the full structure. I was not able to reproduce.
card-mod-card-yaml: |
.: |
ha-card.class-section-heading .container {
background: var(--background-color-off);
--ha-heading-card-title-color: var(--text-color-off) !important;
--ha-heading-card-title-font-size: 20px !important;
--ha-heading-card-title-font-weight: 400;
height: 24px;
padding: 12px 8px 12px 12px;
}
1 Like
Hi,
is it possible to add the standard border and backgroud to a grid so it looks like a card?
I populated a grid with multiple heading and followed previous posts to add border and background to each of them but i prefer to have all in one.
Could anyone please help me move the Home icon left to align with the floorplan icon? Iād also like to give it a background in the same mannerā¦
Itās
<state-badge class=" pointer " tabindex="0" icon=""></state-badge>
Code for the relevant part of the card at the moment is
type: entities
entities:
- entity: input_text.alexa_announcement_string
name: Alexa Announcement
icon: mdi:home-sound-out-outline
secondary_info: none
show_header_toggle: false
state_color: false
card_mod:
style: |
ha-card {
border-radius: 100px!important;
}
I tried adding
ha-state-badge {
background: red;
}
but doesnāt seem to do anythingā¦ I think iām fundamentally misunderstanding how cardmod works somewhere because I copy code from elsewhere and try to rationally adjust but I have a 50% hit rate on it working or not!
We have had custom dashboards using card-mod for awhile now. we have modified a few things but most importantly have been using it to change the grid card so that the contents can have specific column span and row span. this worked great until this spring (sorry not exactly sure what version of HS broke it ~ 2024-05?)
I have been trying various configurations of card-mod to get this to work again to no avail. i have some sample code that was working just fine - and would make a 3x3 grid, with the first card taking up 2x2. any idea how to get this to work properly now? thanks in advance.
- title: Nurse
path: nurse
type: custom:mod-card
card:
square: false
type: grid
cards:
- type: custom:webrtc-camera
url: rtsp://10.0.0.34:7447/C0zwc7l50KmBqslb
style: '.mode {display: none} video {aspect-ratio: 16/9; object-fit: cover;}'
card_mod:
style: |
:host {
grid-column: span 2;
grid-row: span 2;
}
- type: custom:webrtc-camera
url: rtsp://10.0.0.34:7447/ffituAXS8Efc6Ktw
style: '.mode {display: none} video {aspect-ratio: 16/9; object-fit: cover;}'
- type: custom:webrtc-camera
url: rtsp://10.0.0.34:7447/ffituAXS8Efc6Ktw
style: '.mode {display: none} video {aspect-ratio: 16/9; object-fit: cover;}'
- type: custom:webrtc-camera
url: rtsp://10.0.0.34:7447/sinRmeL0hx9nnC8R
style: '.mode {display: none} video {aspect-ratio: 16/9; object-fit: cover;}'
- type: custom:webrtc-camera
url: rtsp://10.0.0.34:7447/FkVWg1EpbrdAuqzU
style: '.mode {display: none} video {aspect-ratio: 16/9; object-fit: cover;}'
- type: custom:webrtc-camera
url: rtsp://10.0.0.34:7447/YMjb6dcj34OBuHse
style: '.mode {display: none} video {aspect-ratio: 16/9; object-fit: cover;}'
columns: 3
card_mod:
style: |
ha-card {
background-color: #000;
}
:host {
--grid-card-gap: 0px;
--ha-card-border-width: 0px;
--ha-card-border-radius: 0px;
}```nvm - i ended up switching from grid to custom:layout-card grid and all is working well. only using card-mod for overriding borders etc. thx!
I think you can use the heading cards and the badges for this
The user asked about a possibility to INPUT values directly.
Otherwise a simple Glance card might be enough: a horizontal row with 4 static values, a more-info pop up with a possibility to input on a tap_action.
Heading may provide a similar look - but needs modding since all entities will be aligned on the right.