show_name: true
show_icon: true
type: button
entity: sun.sun
card_mod:
style: |
span {
font-size: 50px;
color: orange;
}
Styles should not be added āby a guessā - always use Code Editor.
Doesnāt work for me. Adding this without code to update the icon it works. My problem is once I start to combine it with the css to update the svg-icon it doesnāt. Itās probably really simple, but I just am not seeing it. Probably because everytone now falls under the ha-state-icon and ha-icon?
style:
ha-state-icon $ ha-icon $: |
ha-svg-icon {
color: #2196f3;
background-color: #1c3447;
width: 25px;
height: 25px;
padding: 10px;
border: 0px solid blue;
border-radius: 100%;
}
span {
font-size: 50px;
color: orange;
}
Hope these schema will help you:
element_1:
$: |
element_1_1 {
...
}
element_1_2 {
...
}
.: |
element_1 {
...
}
element_1 element_1_3 {
...
}
element_2 {
...
}
element_2 element_2_1 {
...
}
Here:
ā āelement_1ā & āelement_2ā are on the same level
ā āelement_1_3ā is inside āelement_1ā
ā āelement_1_1ā & āelement_1_2ā are inside shadowRoot of āelement_1ā
ā āelement_2_1ā is inside āelement_2ā
Hi all.
In another topic I had a question to change the color of my media player icon. That worked fine thanks to the help of the community.
Now, I want to change the color of this item:
I cannot seem to find the correct element to change the color. Is there a tutorial on how to find the right elements? I have searched in this topic but without succesā¦
trying to mod the header (title) of a type: grid card
- type: custom:mod-card
card_mod:
style: |
.card-header {
color: red;
}
card:
type: grid
title: Verlichting Cards
columns: 4
# square: false
cards:
without succes yet.
the DOM
and elements:
(nevermind the red there, Ive set the manually to check if its the correct elementā¦)
nvm me either:
- type: custom:mod-card
card_mod:
style:
hui-grid-card $: |
.card-header {
color: red;
}
the DOM was telling it, I just missed itā¦
Trying to combine things posted by š¹ Card-mod - Add css styles to any lovelace card - #4280 by Ildar_Gabdullin to achieve a slightly better look to my tabs.
Hereā a picture:
I got the āVividā look but what I am trying to accomplish is coloring the āactiveā tabs so that it is easier to see the level of selected tabs that are active. The green underline and text is great but I want a slight tint to the active tabs to further stand out.
Right now, I have this for tabs snipped to the important piece:
tabs:
- attributes:
label: NHL
icon: mdi:ballot
card:
type: custom:mod-card
card_mod:
style:
tabbed-card $: |
mwc-tab {
background: var(--ha-card-background, var(--card-background-color, white) );
border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
border-width: 2px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-style: solid;
overflow: hidden;
}
And cannot figure out how to combine this with the example for the active tab background sample:
card_mod:
style:
tabbed-card $:
mwc-tab:
$: |
.mdc-tab--active {
background: lightgreen !important;
}
Any help is appreciated!
Hmm, try these recommendations:
one
two
What you are asking is a thing which you have to face very often. So it is better to learn it.
If you experience any troubles with navigation - ping me.
What I was missing I got now. I just wanted to modify the āactiveā ones and all I needed was:
mwc-tab[active] {
background: #EBFFD8 !important;
}
If you want to hide the scrollbar, but keep a section scrollable, add this:
card_mod:
style: |
::-webkit-scrollbar {
display: none;
}
1 Like
Trying to mod a core entities card Title content so we can add dynamic templating, I could not find a way to completely set it via card_mod (and replace the title field in the card config itself)
I did find a way to add an āafterā section though like:
type: entities
title: Air quality dashboard
card_mod:
class: class-header-no-margin-no-color
style: |
.card-header .name::after {
content:"{{': ' + states('sensor.u_s_air_pollution_level')}}";
}
.card-header {
background: {% set aqi = states('sensor.u_s_air_quality_index')|int(0) %}
{% if aqi <= 50 %} seagreen
{% elif aqi <= 100 %} gold
{% elif aqi <= 150 %} orange
{% elif aqi <= 200 %} crimson
{% elif aqi <= 300 %} purple
{% else %} maroon
{% endif %};
color: {{'var(--text-color-off)' if 51 < states('sensor.u_s_air_quality_index')|int(0) < 101
else 'ivory'}};
}
Note the class only sets some other card/font specifics.
Normally I restructure these entities cards to vertical-stacks and have a default button title card do that trick, but this ofc is kind of nice too.
As you can see the colon is preceded by a space, which my eyes donāt like, I want it to be
Airquality dashboard: Good
or, as it would be with the button card:
- type: custom:button-card
template: button_default_title
name: >
[[[ return 'Airquality dashboard: '
+ states['sensor.u_s_air_pollution_level'].state; ]]]
styles:
card:
- background: seagreen
So, the question for now: can we remove the empty space in the card_mod on the entities card title?
1 Like
I have a list of battery entities like this:
And I would like to make the font red if any of the values are under 20%
I know this is to be added to the card which makes all red for example.
card_mod:
style: |
ha-card {
color: red;
}
And there is a way to add to each entities but I have a lot more than 3 entities so what is the way to only add it once per card? Not sure sure how to set it if any state is < 20% then make it red.
You are aware that current Frontend does just that by itself? Wel, the icon that is
Just set the card to use state_color: true and youāre set. No need for card_mod at all
Current battery level thresholds are weird - smth like 20% & 70% instead of usual 33% & 66%.
That is why I do not use default colors.
agreed they could use some more granularityā¦ Iāve asked for that some time ago, but no response. still, what we can do core is better than using extra system resources in the Frontend.
Especially since this core option also changes the more-info.
trying to cut down on any customization possibleā¦
1 Like
- Created a PR to change thresholds to 33 & 66 - was refused by Paul ))). Reason was like āwe use x10 values to change an icon - that is why we use same x10 values for thresholdsā, no comments.
- Your Custom UI allows to override colors in more-info too.
Yes I have seen it and enabled it in the past but I would like to set my own % values and colors.
Yes, thereās even an example using dynamic levels in custom-ui/EXAMPLES.md at 9d7890d9a8546a438b3ae418779f67cd717465d3 Ā· Mariusthvdb/custom-ui Ā· GitHub 
or, use a fixed granularity:
sensor.*_bewegingssensor:
templates: &battery_color
icon_color: >
if (['unavailable','unknown'].includes(state)) return 'steelblue';
if (state > 75) return 'green';
if (state > 50) return 'gold';
if (state > 25) return 'orange';
if (state > 10) return 'brown';
return 'red';
Having said that, it was designed for entities card and some of the more modern cards donāt use this attribute
this is my current battery card, and it allows you to only show those cards below a certain threshold:
type: entities
title: Batterij
card_mod:
class: class-header-no-margin
show_header_toggle: false
state_color: true
entities:
- type: custom:config-template-card
entities:
- input_number.battery_alert_level
variables:
threshold: states['input_number.battery_alert_level'].state
row:
type: section
label: >-
${'Below: ' + threshold}
- type: custom:slider-entity-row
entity: input_number.battery_alert_level
# - type: custom:auto-entities
# card:
# type: entities
# card_mod: &mod
# style: |
# ha-card {
# box-shadow: none;
# margin: -16px -16px 0px -16px;
# }
# filter:
# template: >
# {% set threshold = states('input_number.battery_alert_level')|float(0) %}
# {% set ns = namespace(below_threshold=[]) %}
# {% for s in expand('group.battery_sensors')|rejectattr('state','in',['unknown','unavailable'])
# if s.state|float(0) < threshold %}
# {% set ns.below_threshold = ns.below_threshold + [s.entity_id] %}
# {% endfor %}
# {{ns.below_threshold}}
# sort:
# method: state
# numeric: true
# - type: divider
- type: custom:auto-entities
card:
type: entities
state_color: true
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 0px -16px;
}
#title: Threshold buttons battery template
filter:
template: >
{% set threshold = states('input_number.battery_alert_level')|float(0) %}
{% set batteries =
states.sensor
|selectattr('attributes.device_class','defined')
|selectattr('attributes.device_class','eq','battery')
|map(attribute='entity_id')|list %}
{% for s in expand(batteries)
if s.state|is_number and s.state|float(0) < threshold %}
{{s.entity_id}}
{%- endfor %}
# {% set threshold = states('input_number.battery_alert_level')|float(0) %}
# {% for s in states.sensor|selectattr('attributes.device_class','eq','battery')
# if s.state|is_number and s.state|float(0) < threshold %}
# {{s.entity_id}}
# {%- endfor %}
sort:
method: state
numeric: true
- entity: sensor.low_level_batteries
secondary_info: last-changed
- entity: binary_sensor.battery_alert
secondary_info: last-changed
state_color: true
- type: custom:fold-entity-row
head:
type: section
label: All batteries
card_mod: &label
style: |
.label {
margin-left: 0px;
}
padding: 0
entities:
- type: custom:auto-entities
card:
#title: Batteries
type: entities
state_color: true
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 0px -16px;
}
.card-content {
max-height: 300px;
overflow-y: scroll;
}
filter:
exclude:
- domain: binary_sensor
- state: unavailable
include:
- attributes: {device_class: battery}
options:
secondary_info: last-updated
# style: |
# :host {
# --card-mod-icon-color: {% if states(config.entity)|int(-1) < 30 %}red
# {% elif states(config.entity)|int(-1) < 60 %}orange
# {% else %}green
# {% endif %};
# }
sort: {method: state, numeric: true}
- entity: automation.alert_when_batteries_are_below_alert_level
secondary_info: last-triggered
# state_color: true
- entity: automation.create_battery_group
secondary_info: last-triggered
openend a new discussion on the matter here: Add more granularity to device_class:battery colors Ā· home-assistant/frontend Ā· Discussion #15791 Ā· GitHub
please chime in if you +1 or add new info helping the devs to implement this
Trying to change the padding on a vertical stack card header without success, this is what i got so far, any ides?
type: vertical-stack
title: Kitchen
style: |
.card-header {
padding: 6px 16px 2px !important;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.temperature_77
- type: entity
entity: sensor.humidity_76
- type: entity
entity: sensor.lightlevel_48
alignment: end
style: |
.chip-container {
padding-right: 4px;
margin-top: -30px
}
