There is only 1 link in the end of the 1st post
sorry, found this, which I believe you are ferring to: 
Card-mod - Add css styles to any lovelace card - #3907 by Ildar_Gabdullin
But not sure how to apply this? What is wrong in my example?
No, not the link you posted.
Follow that one about ācombiningā
I started with this one (š¹ Card-mod - Add css styles to any lovelace card - #3905 by Ildar_Gabdullin) but it seemed the other one was the explanation. Tried adding .: | but it seemed to make no difference.
(This also does not work):
card_mod:
style:
ha-tile-info$: |
.secondary {
color: grey !important;
font-weight: bold !important;
visibility: hidden;
}
.secondary:before {
visibility: visible;
content: {% if is_state('media_player.samsung_ue75ju7000', 'on') %}
'TV is on'
{% else %}
'{{state_attr('climate.floorC82B96A543E8_4_climate', 'current_temperature')}} Ā°C'
{% endif %}
}
.: |
ha-tile-icon {
--mdc-icon-size: 12px;
}
I would suggest to try on simpler examples w/o templates, pseudoclasses etc.
Thanks! This helped me see the indentation error. This works!:
card_mod:
style:
ha-tile-info$: |
.secondary {
color: grey !important;
font-weight: bold !important;
visibility: hidden;
}
.secondary:before {
visibility: visible;
content: {% if is_state('media_player.samsung_ue75ju7000', 'on') %}
'TV is on'
{% else %}
'{{state_attr('climate.floorC82B96A543E8_4_climate', 'current_temperature')}} Ā°C'
{% endif %}
}
.: |
ha-tile-icon {
--mdc-icon-size: 20px;
}
Thank you so much for your time,
Iām still not sure exactly what you meant by thisā¦
Assume we have this multi-level structure:
element A ā element B ā element C ā element D
For simplicity - assume that on each level an element has only one child.
Assume we need to apply some property like ācolor: redā.
We need to go down only to the level (not deeper) where this property is really meaningful (even may be not used yet - but the child element may inherit this property; this is a trick which MAY be useful if the child element is changed in some version of HA).
Means - no need to set the property to the element D if it is sufficient on a level C.
Next, assume this feature (color) may be set by some variable.
I.e. on this level C the color is by default defined as āvar(āha-super-color, #ff00ff)ā.
Means - you may set this āāha-super-colorā on the level A - and this will work.
But if there is only ONE level - check a simple example based on your+mine codes:
hui-generic-entity-row $: |
state-badge {
--card-mod-icon-color: orange;
}
.: |
div.entity:nth-child(1) state-badge {
--card-mod-icon-color: cyan;
}
div.entity:nth-child(2) state-badge {
--card-mod-icon-color: red;
}
No need to use vars here. On this level a property may be used.
1 Like
I believe I understand now what you were getting at.
I have a question though on a related note: Is there a way to refer to a secondary entity?
config.entity seems to be the primary one but can I refer to the entity in the div.entity.nth-child(2) rather than using 'sensor.[[blind]]_battery_level'?
Summary
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
--card-mod-icon: {{ is_state(config.entity,'open')|iif('phu:blind-tilt-open;','phu:blind-tilt-closed','mdi:help-circle') }};
--card-mod-icon-color: {{ is_state(config.entity,'open')|iif('gold','beige','red') }};
}
.: |
div.entity:nth-child(2) state-badge {
{% set percentage = states('sensor.[[blind]]_battery_level')|int(0) %}
{% set r, g, b = 0, 0, 0 %}
{% if (percentage <= 51) %}
{% set r = 255 %}
{% set g = (5.0 * percentage) | round | int %}
{% else %}
{% set g = 255 %}
{% set r = (505 - 4.89 * percentage) | round | int %}
{% endif %}
--card-mod-icon-color: {{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }};
}
PS I just learned about [details="<some text>"] and have compressed my original post considerably!
Yet you are still using ā-card-mod-icon-colorā vars.
I would not recommend using āiifā since it may give wrong results.
Even there is an issue in core.
Besides, I do not recommend using templates INSIDE a property definition. You will see what I mean if search my posts with templates in card-mod.
As for using config-entity-like variable in m-e-r - it is possible like āconfig.entities[ā¦].entityā.
So, is this better?
card_mod: style:
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
{% if is_state(config.entity,'open') %}
--card-mod-icon: phu:blind-tilt-open; color: green;
{% elif is_state(config.entity,'closed') %}
--card-mod-icon: phu:blind-tilt-closed; color: beige;
{% else %}
--card-mod-icon: mdi:help-circle; color: red;
{% endif %}
}
.: |
div.entity:nth-child(2) state-badge {
{% set percentage = states(config.entities[0].entity)|int(0) %}
{% set r, g, b = 0, 0, 0 %}
{% if (percentage <= 51) %} {% set r = 255 %}
{% set g = (5.0 * percentage) | round | int %}
{% else %}
{% set g = 255 %} {% set r = (505 - 4.89 * percentage) | round | int %}
{% endif %}
color: {{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }};
}
Probably like this:
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
{% if is_state('cover.[[blind]]','open') %}
--card-mod-icon: phu:blind-tilt-open;
color: green;
{% elif is_state('cover.[[blind]]','closed') %}
--card-mod-icon: phu:blind-tilt-closed;
color: beige;
{% else %}
--card-mod-icon: mdi:help-circle;
color: red;
{% endif %}
}
.: |
div.entity:nth-child(2) state-badge {
{% set percentage = states(config.entities[0].entity)|int(0) %}
{% set r, g, b = 0, 0, 0 %}
{% if (percentage <= 51) %}
{% set r = 255 %}
{% set g = (5.0 * percentage) | round | int %}
{% else %}
{% set g = 255 %}
{% set r = (505 - 4.89 * percentage) | round | int %}
{% endif %}
color: {{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }};
}
2 Likes
Is this still up to date? In my case it successfully changes the colors but not the font-sizeā¦ Thank you, a lot, for helping!
In general - yes. Ofc you need to add ācard_modā keyword. And suggest to remove āha-cardā, no need in fact (but will work anyway).
If smth does not work - check with Code Inspector. Some DOM paths should be fixed probably.
This is my code:
- type: custom:mod-card
card:
type: vertical-stack
cards:
- show_current: true
show_forecast: true
type: weather-forecast
entity: weather.spieshome
forecast_type: hourly
name: ' '
card_mod:
style: |
ha-card {
--card-primary-font-size: 18px;
--card-secondary-font-size: 14px;
--card-primary-font-weight: normal;
background: none;
border: none;
}
.name-state .name {
color: orange;
font-size: 20px;
}
.name-state .state {
color: red;
font-size: 10px;
}
.temp-attribute .temp {
color: green;
font-size: 10px;
}
.temp-attribute .temp span {
color: blue;
font-size: 30px;
}
.temp-attribute .attribute {
color: cyan;
font-size: 20px;
}
.forecast .temp {
color: orange;
}
.forecast .templow {
color: blue;
}
.forecast div {
color: magenta;
}
- show_current: false
show_forecast: true
type: weather-forecast
entity: weather.spieshome
forecast_type: daily
name: ' '
card_mod:
style: |
ha-card {
--card-primary-font-size: 18px;
--card-secondary-font-size: 14px;
--card-primary-font-weight: normal;
background: none;
border: none;
}
card_mod:
style: |
ha-card {
background: #2A282D;
ha-card-box-shadow: 'inset 0px 0px 0px 0px var(--divider-color)';
border: 1px solid #37373D;
}
It does change color bot not font size. Same when removing
ha-card {
--card-primary-font-size: 18px;
--card-secondary-font-size: 14px;
--card-primary-font-weight: normal;
background: none;
border: none;
}
Any idea?
Same idea: check with code inspector as was suggested.
Iām trying to change the absolute positioning of a button within custom:expander-card and canāt figure out the correct path for card-mod.
JS Path
document.querySelector(ābody > home-assistantā).shadowRoot.querySelector(āhome-assistant-mainā).shadowRoot.querySelector(āha-drawer > partial-panel-resolver > ha-panel-lovelaceā).shadowRoot.querySelector(āhui-rootā).shadowRoot.querySelector(ā#view > hui-view > grid-layoutā).shadowRoot.querySelector(ā#root > stack-in-card:nth-child(2)ā).shadowRoot.querySelector(āha-card > div > hui-vertical-stack-cardā).shadowRoot.querySelector(ā#root > expander-cardā).shadowRoot.querySelector(āha-card > div > buttonā)
Card-mod-helper
ābody>home-assistant$home-assistant-main$ha-drawer>partial-panel-resolver>ha-panel-lovelace$hui-root$#view>hui-view>grid-layout$#root>stack-in-card:nth-child(2)$ha-card>div>hui-vertical-stack-card$#root>expander-card$ha-card>div>buttonā
Iād like to set right: 50% to the .header-overlay class.
Iāve tried the below and multiple other variations.
card_mod:
style: |
ha-card > div.title-card-header-overlay > button {
right: 50% !important;
}
Try to just use button instead. You might need to set the position to absolute or relative as well depending on your usecase.
card_mod:
style: |
button {
position: relative;
right: 50%;
}
1 Like
Thanks for your help. Unfortunately that doesnāt work.
No styles are shown in the card-mod dom either:
Is it possible to make an entities card show an input_text with like break (to ensure the entire content is shown)?
Or maybe even as an automatically scrolling text in case of overflow?