Did you ever figure this out? Also trying to hide elements from an iframe website cardâŚ
Sorry but I donât understand your answer.
the very first post in this thread has a link at the bottom:
In the linked post there is a whole collection of guides on how to target certain elements by Ildar. There youâll also find a guide to what youâre looking for.
1 Like
Well this post says itâs not possible:
in my opinion this has nothing to do with card_mod but is more of a general CSS topic.
See here:
Using CSS to affect div style inside iframe - Stack Overflow
also @Gian-LucaA
1 Like
Analogy: By definition of how an iframe works: Itâs like trying to style a page open in another tab in your browser.
1 Like
Thank you, that makes sense. Itâs confusing because if you use the element inspector in a browser, you can see all the HTML of the iframe nested inside the dashboard.
I guess the only solution would be a proxy server that could inject the new CSS into the page and serve the result up to the frame.
Yes, but it loads independently. The content may not be there when the card-mod changes are injected, but in the case of iframes itâs more about security and cross-origin requests.
Iâm getting lost navigating the DOM.
Trying to modify this Thermostat card:
When I do this, it selects the hui-card-features element:
card_mod:
style: |
hui-card-features {
background-color: red;
}
And when I do this, It selects the first div.container, on 7th line of that screenshot, which is the top half of the card:
card_mod:
style: |
.container {
background-color: red;
}
How do I get it to select the div.container the is inside the hui-card-features element?
Based on Ildarâs example for changing the icons, I thought it was this:
card_mod:
style: |
hui-card-features $: |
.container {
background-color: red;
}
but that doesnât seem to do it.
â
What Iâm trying to do is override the flex-direction: column, changing it to row, that the .container gets from some other style sheet elsewhere so the feature buttons are side-by-side instead of stacked on top of each other.
From this:
To this:
How do I add a font size line into this YAML that already has some style lines? I cant figure it out and chatgpt cant either lol
type: custom:mushroom-template-card
primary: Turn off fridge nags for 30 min
secondary: ''
icon: mdi:alert
entity: input_boolean.fridge_freeze_override
badge_color: ''
icon_color: red
layout: vertical
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
layout_options:
grid_columns: full
grid_rows: 4
visibility:
- condition: state
entity: input_boolean.tablet_popup_fridge_nag
state: 'on'
- condition: state
entity: input_boolean.fridge_freeze_override
state: 'off'
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: ping .5s infinite, blink .8s ease-in-out infinite;;
}
@keyframes ping {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes blink {
100% {opacity: 0;}
}
Donât think, that you found this in the examples. 
But you are on the right track., Remove the fist | after style.
Thank you. That helped.
I can barely even spell CSS, so I get lost trying to understand when and where to use |, |-, >, >-, :, or $: in these.
That got the style injected into the right element, but it still wasnât overriding it until I added a !important. The final block ended up being:
card_mod:
style:
hui-card-features:
$: |
.container {
flex-direction: row !important;
flex-wrap: wrap;
justify-content: center !important;
}
Now the card more closely matches the more info dialog.
1 Like
Iâm trying to squeeze more text into an entities card. I have this code (within horizontal stack, which explains the indentation):
- type: entities
card_mod:
style: |
hui-generic-entity-row:
$: |
height: 5px;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
entities:
- entity: sensor.jrmc_artist
- entity: sensor.jrmc_lat
- entity: sensor.jrmc_avspillingsstatus
- entity: sensor.jrmc_posisjon
- type: markdown
But it doesnât seem to obey this at all. The result is nowhere near what I want:
I would like to have them as close as possible, so I can get a third line in the same space. Can somebody please help me out?
If this is about decreasing a height of rows:
Go to 1st post - link at the bottom - changing a rowâs height
hmm, suddenly I notice my tile icon is no longer animating. it somehow is bugged by the larger features mod at the top of this mod, because, if I comment that, the animation on the ha-state-icon element after the .: | does work properly, indicating the mod itself is correctly aimed at the right element.
Could anyone please have a look?
Bugged mod for animation and color on fan tile
# tile_fan animate
style:
hui-card-features $:
hui-card-feature $:
hui-fan-speed-card-feature $:
ha-control-slider$: |
.container {
--control-slider-border-radius: var(--ha-card-border-radius);
}
.slider .slider-track-bar {
border-radius: var(--ha-card-border-radius) !important;
}
.slider .slider-track-bar::after {
border-radius: var(--ha-card-border-radius) !important;
}
.slider {
--control-slider-color:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int(0) %}
{% if perc <= 15 %} lightblue
{%- elif perc <= 33 %} lightskyblue
{%- elif perc <= 67 %} dodgerblue
{%- else %} darkblue
{%- endif %}
{%- else %} var(--state-inactive-color)
{%- endif %} !important;
--control-slider-background:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int(0) %}
{% if perc <= 15 %} lightblue
{%- elif perc <= 33 %} lightskyblue
{%- elif perc <= 67 %} dodgerblue
{%- else %} darkblue
{%- endif %}
{%- else %} var(--state-inactive-color)
{%- endif %} !important;
}
.: |
ha-tile-icon {
--tile-color:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int(0) %}
{% if perc <= 15 %} lightblue
{%- elif perc <= 33 %} lightskyblue
{%- elif perc <= 67 %} dodgerblue
{%- else %} darkblue
{% endif %}
{% else %} var(--state-inactive-color)
{% endif %};
}
ha-state-icon {
animation:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int(0) %}
{% set base =
'rotation infinite linear' %}
{% if perc <= 15 %} 4s {{base}}
{%- elif perc <= 33 %} 3s {{base}}
{%- elif perc <= 67 %} 1.5s {{ base}}
{%- else %} 0.75s {{base}}
{% endif %}
{% else %} none
{% endif %};
}
@keyframes rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
edit
wait, nvm⌠it was an indent issue⌠the .: | section was under the feautures section⌠this now works again, not sure how it got moved,
Working mod for animation and color in fan tile
# tile_fan animate
style:
hui-card-features $:
hui-card-feature $:
hui-fan-speed-card-feature $:
ha-control-slider$: |
.container {
--control-slider-border-radius: var(--ha-card-border-radius);
}
.slider .slider-track-bar {
border-radius: var(--ha-card-border-radius) !important;
}
.slider .slider-track-bar::after {
border-radius: var(--ha-card-border-radius) !important;
}
.slider {
--control-slider-color:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int(0) %}
{% if perc <= 15 %} lightblue
{%- elif perc <= 33 %} lightskyblue
{%- elif perc <= 67 %} dodgerblue
{%- else %} darkblue
{%- endif %}
{%- else %} var(--state-inactive-color)
{%- endif %} !important;
--control-slider-background:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int(0) %}
{% if perc <= 15 %} lightblue
{%- elif perc <= 33 %} lightskyblue
{%- elif perc <= 67 %} dodgerblue
{%- else %} darkblue
{%- endif %}
{%- else %} var(--state-inactive-color)
{%- endif %} !important;
}
.: |
ha-tile-icon {
--tile-color:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int(0) %}
{% if perc <= 15 %} lightblue
{%- elif perc <= 33 %} lightskyblue
{%- elif perc <= 67 %} dodgerblue
{%- else %} darkblue
{% endif %}
{% else %} var(--state-inactive-color)
{% endif %};
}
ha-state-icon {
animation:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int(0) %}
{% set base = 'rotation infinite linear' %}
{% if perc <= 15 %} 4s {{base}}
{%- elif perc <= 33 %} 3s {{base}}
{%- elif perc <= 67 %} 1.5s {{ base}}
{%- else %} 0.75s {{base}}
{% endif %}
{% else %} none
{% endif %};
}
@keyframes rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
Iâm really at a loss here trying to navigate down a few levels to animate an icon contained within a html container. If I define an animation that is already available in HA it is an easy feat. I just add it to the style section of the icon.
`<span style="font-size: 1rem"><ha-icon icon="ios:cloud-rain" style="width: 1.5rem; height: 1.5rem;"></ha-icon> ${states['sensor.home_precipitation'].state} mm/h</span>`
However, I want to customize the animation with some key frames but I donât know how I can access the icon through card mod.
The structure looks like this (starting from the button itself:
The Layout of the button card is pretty simple (with all fields just returning html blocks):
styles:
grid:
- grid-template-areas: |
"cond temp"
"cond feel"
"cond ."
"prec hum"
"wind UV"
- grid-template-columns: 1fr 1fr
- grid-template-rows: max-content max-content 1fr max-content max-content
Can anyone help me figure out how I can address the icon in the highlighted section of the above picture with card mod.
Thanks!
You first need to navigate to a parent element starting from your ha-card element and then use normal css to style your element.
Read up on DOM navigation with card_mod here.
In your case itâs pretty simple as you donât need to go through the shadow dom.
card_mod:
style: |
#container {
grid-template-areas:
"cond temp"
"cond feel"
"cond ."
"prec hum"
"wind UV";
grid-template-columns: 1fr 1fr;
grid-template-rows: max-content max-content 1fr max-content max-content;
}
#hi ha-icon {
your styles
}
Just make sure ha-icon is really what youâre trying to style. You can test that easily by first applying the styles through your browserâs dev tools to see what you need to target with card_mod
1 Like
That worked beautifully! Very much appreciated.
Sometimes you can also use âextra_stylesâ to inject your animation (e.g. custom:button-card and custom:paper-buttons-row allow that).
I may be blind, but I donât see itâŚ