I am having issues when using a more-info-card. I donāt seem to be able to path to the h1.card-header no matter what I do.
This is my code (I have spent hours on this, trying all sort of combinations)
Is there 2 shadow-root here? as I notice there are 2 <!āā¦ underneath the ha-card shadow-root and is that causing the issue?
Many thanks
1st post ā link at the bottom ->other ā combining
Thanks.
For anybody else reading, it is because of the vertical bar ā|ā after style: Removing that, it then works!
You then get the card-mod element inserted in the shadow-root.
wrong. check again.
Ok I was a bit quick to post, not working completely. I reduced it down to
So thatās why it worked, and the below doesnāt
To add the other styles, I needed to change to
From the documentation, this is the key line
By adding the | after style: I am making it a string. Am I correct?
Not exactly.
By adding ā|ā after ANY option you make it a string.
In your case you made a dictionary (what is needed):
style: {
'xxx $': 'xxxx',
'.': 'xxxx'
}
Thanks for your help.
Got there in the end, inserting that | has cost me so many hours.
Ildar, I am a bit stuck.
Marius tried helping me on Discord and he had a cool approach for cards that are more similar to each other where you use the options section of auto-entities.
But I am trying to use your approach with the generic rows.
However, I habe not been able to omplement if expressions.
type: custom:auto-entities
filter:
include:
- entity_id: script.climate*
- entity_id: automation.climate*
card:
type: entities
state_color: true
card_mod:
style:
hui-toggle-entity-row:
$: |
hui-generic-entity-row {
color: {% if states(config.entity) == "on" %} red {% else %} blue {% endif %};
height: 20px;
}
hui-script-entity-row:
$: |
hui-generic-entity-row {
color: green;
height: 20px;
}
Do you know why the if expression for color does not work there and if there is a fix for this?
It is the same approach as it would be in options using states(config.entity).
Thank you, once again 
color: {% if ... %} red {% else %} blue {% endif %};
syntax, I never do it and never recommend people doing it.
This one is better:
{% if ... -%}
color: red;
{%- else -%}
color: blue;
{%- endif %}
Using the Bubble Card (Popup), layout card, and card_mod I have these āblank spotsā for lack of a better term. I cannot for the life of me figure out what to modify to make them go away. Basically you make a vertical stack and the bubble card āhidesā it until you ask for the popup. That all works fine, except at the bottom of my layout there is blank area. Trying to use card_mod to get rid of it but cannot seem to figure out what to modify.
I tried using show: hidden in the layout card, but that makes the popup not work. Using dev tools I set the element.style: margin to 0 and that seemed to make them vanish. But I canāt seem to get it with card_mod.
They seem to be āhui-vertical-stack-cardsā.
Any assistance?
My first attempt at using card mod works, sort-of. Iām trying to modify a horizontal stack card to reduce the left pane to 25% and increase the right to 75%. When I reload HA, itās a normal horizontal stack card with two squares. I have to click Edit Dashboard and then the card immediately looks like I want it to be. The same goes on mobile, where itās initially two squares until I rotate the phone and then rotate it back. What do I need to change? Code and screenshots:
type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
div#root > :first-child {
width: 25%;
flex: auto;
}
div#root > :last-child {
width: 75%;
flex: auto;
}
card:
type: horizontal-stack
cards:
- type: custom:card-templater
card:
type: picture
image_template: '{{ states.sensor.life_100_icon.state }}'
tap_action:
action: none
hold_action:
action: none
entities:
- sensor.life_100_image
- type: markdown
content: >-
{{ states('sensor.life_100_artist') | trim }} -
{{states('sensor.life_100_song') | trim }}
title: Life 100 Now Playing
On reloading HA, it looks like this:
Choosing Edit Dashboard causes it to immediately change to this:
It stays like this until the next time I reload the browser.
Struggling to change font-size on the name of area card. One of my many attempts below. Anyone help with what Iām doing wrong?
type: area
area: 056a34cf83614ddd95d9d81e1d0dcf7b
navigation_path: /config/areas/area/056a34cf83614ddd95d9d81e1d0dcf7b
card-mod:
style:
ha-card:
$: |
.name {
font-size: 12px;
}
The ā.nameā is not inside shadowRoot.
Thank you for prompt reply. How do I fix this? Below doesnāt work:
card-mod:
style:
ha-card: |
.name {
font-size: 12px;
}
This works - thank you:
card_mod:
style: |
.container .bottom .name {
font-size: 12px;
}
.container .bottom .sensors {
font-size: 16px;
}
Hello, i read several messages in several topics but didāt find how to add a custom background (a picture) in in popup window created with browser-mod.
Everything i tried didnāt wokred.
Can someone help me, please ?
You can certainly use a custom layout card and set the background for this card.
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: |
--popup-max-width: calc(100vw);
--popup-background-color: rgba(0, 0, 0, 0);
title: 'Kodi'
card_mod:
style:
#popup header
.: |
ha-dialog>ha-dialog-header {
display: none;
}
@media (max-width: 450px), (max-height: 500px) {
ha-dialog>ha-dialog-header {
display: block;
}
}
layout-card$grid-layout$:
.: |
#root {
background-image: url('/local/bg/background.png');
background-size: cover;
}
content:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
margin: 0
grid-template-columns: 50vw
grid-template-rows: 50vh
mediaquery:
'(max-width: 800px)':
grid-template-columns: 100%
cards:
- type: custom:analog-clock
hide_SecondHand: true
locale: en-US
diameter: 200
color_HourHand: '#326ba8'
color_MinuteHand: '#3273a8'
color_DigitalTime: '#CCCCCC'
color_FaceDigits: '#a83832'
color_Ticks: Silver
themes:
- time: 23:00-08:00
color_background: maroon
I am doing my head in trying to get this code to work! I have tested it with a few YAML checkers and with ChatGPT all say, good YAML. Any guidance would be greatly appreciated. Everything in the card works except for the color change. I can change it manually, with:
card_mod:
style: |
ha-card{ --primary-color: black;
--dark-primary-color: white;
background: none;}
But I canāt get it to update at the <= 10 second point:
type: conditional
conditions:
- condition: state
entity: sensor.russ_s_echo_spot_next_timer
state: ''
card:
type: custom:flipdown-timer-card
entity: sensor.russ_s_echo_spot_next_timer
show_hour: auto
show_title: false
show_header: true
card_mod:
style: |-
${if (now() - state('sensor.russ_s_echo_spot_next_timer') | int) <= 10}
'ha-card { --primary-color: red; }'
else
'ha-card { --primary-color: blue; }'
{{ endif }}
I donāt know if what Iām trying to achieve is just overly beyond my capabilities, or outright impossibleā¦ but Iām struggling to make it work.
I have a dashboard that is almost entirely custom button, custom layout, and custom mini-player. I have a number of Media player inputs that go into Denon amplifiers and Iām trying to color them to match. The ideal scenario is that the button cards automatically color to match the dynamic color of the media player (in material mode) like the manually created image below. The backup option is that I make the background area between the cards colored so that I can tell which volume/power relate to which media player. Any suggestions?
