step by step, all will come.
Will update my stack-related styles soon.
1 Like
I hope somebody can help me out. Iām stuck for ages 
Picture for reference:
Question1: Change field 1
I want another sensorās data to be displayed. I worked out how to do it in field 2, see example code below:
card_mod:
style:
.: |
ha-state-control-climate-temperature:
$: |
.label:nth-of-type(2) {
display: inline-block !important;
visibility: hidden;
text-align: center;
width: 100%;
}
.label:nth-of-type(2):before {
content: "{{ states('sensor.mytemperaturesensor') | round(1) }} Ā°C";
visibility: visible;
display: inline-block;
width: 100%;
text-align: center;
}
I dont know how to adress field 1
Question 2: Change icons of field 3 & 4
The icons in field 3 (fan speed) and field 4 (vane angle) are not picked up. How do i assign icons to this buttons?
I expected something like this, but it doenst work:
card_mod:
style:
hui-card-features $ hui-climate-fan-modes-card-feature $ ha-control-select $: |
div#option-1 ha-svg-icon {
content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='magenta' d='M20 22H4V20C4 17.8 7.6 16 12 16S20 17.8 20 20M8 9H16V10C16 12.2 14.2 14 12 14S8 12.2 8 10M19 4C18.4 4 18 4.4 18 5V6H16.5L15.1 3C15 2.8 14.9 2.6 14.7 2.5C14.2 2 13.4 1.9 12.7 2.2L12 2.4L11.3 2.1C10.6 1.8 9.8 1.9 9.3 2.4C9.1 2.6 9 2.8 8.9 3L7.5 6H6V5C6 4.4 5.6 4 5 4S4 4.4 4 5V6C4 7.1 4.9 8 6 8H18C19.1 8 20 7.1 20 6V5C20 4.5 19.6 4 19 4Z'/%3E%3C/svg%3E");
}
This refers to:
Strange thing is that changing the icon of HVAC modes does work with the above mentioned method
Hello All
Firstly very sorry for my absolute terrible HA knowledge. So here is what Iām trying to do. I have a grid card and using the awesome card mod and some codes I found online, I managed to make them transparent and coloured the way I like.
My query is that I have a title for my grid card āRoomsā
itās to the left and really small as compared to the rest of my buttons.
Iām trying to center it, change the font colour to white and increase the font size and maybe the form weight.
If I do an inspect element I can change the stuff in browser, however I have no idea how to change it in my dashboard. Below is my code.
Thanks
square: true
type: grid
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: ''
entity: sensor.sonoff_a4b00139e7_temperature
name: Living Room
icon: mdi:sofa
hold_action:
action: none
card_mod:
style: |
ha-card {
--ha-card-background: rgba(247, 248, 242, 0.0);
color: #36013f;
font-weight: 800;
font-size: 30px!important;
--card-mod-icon-color: #36013f;
}
}
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: ''
entity: sensor.sonoff_a4b0013f1d_temperature
name: Kitchen
icon: mdi:silverware-fork-knife
hold_action:
action: none
card_mod:
style: |
ha-card {
--ha-card-background: rgba(247, 248, 242, 0.0);
color: #006A4E;
font-weight: 800;
font-size: 30px!important;
--card-mod-icon-color: #006A4E;
}
}
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: ''
entity: sensor.sonoff_a4b001433a_temperature
name: Passage
icon: mdi:shower
hold_action:
action: none
card_mod:
style: |
ha-card {
--ha-card-background: rgba(247, 248, 242, 0.0);
color: #9B1C31;
font-weight: 800;
font-size: 30px!important;
--card-mod-icon-color: #9B1C31;
}
columns: 3
title: Rooms
view_layout:
grid-area: c2
Hi there, I have an I frame card with the embed Radar from windy.com. I would really like to hide the controls from card. But windys embed doesnāt allow for that anymore. I am now trying to get that done with some custom css.
First of all is that even possible? And second if it is possible what am I doing wrong?
Thanks in advance for any help!
type: iframe
url: >-
https://embed.windy.com/embed.html?type=map&location=coordinates&metricRain=default&metricTemp=default&metricWind=default&zoom=11&overlay=radar&product=radar&level=surface&lat=<lat>&lon=<lon>&message=true
aspect_ratio: 70%
card_mod:
style:
iframe: |
plugins-bottom-desktop {
visibility: hidden;
}
To change the text styling you could just add the following right under your ha-card styling:
card_mod:
style: |
ha-card {
...
}
span {
<the text styling>
}
But I dont fully understand what you mean with left and really small ā¦
Hey thanks for getting back to me. Here is a screen shot of my card, if you see the title room in the grid card is to the left and is really small. I just want to change it to the centre and make it larger
Ah I see, probably easiest to use a vertical stack card and the title card from lovelace-mushroom.
You could then use the following code:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Rooms
alignment: center
- square: true
type: grid
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: ''
entity: sensor.sonoff_a4b00139e7_temperature
name: Living Room
icon: mdi:sofa
hold_action:
action: none
card_mod:
style: |
ha-card {
--ha-card-background: rgba(247, 248, 242, 0.0);
color: #36013f;
font-weight: 800;
font-size: 30px!important;
--card-mod-icon-color: #36013f;
}
}
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: ''
entity: sensor.sonoff_a4b0013f1d_temperature
name: Kitchen
icon: mdi:silverware-fork-knife
hold_action:
action: none
card_mod:
style: |
ha-card {
--ha-card-background: rgba(247, 248, 242, 0.0);
color: #006A4E;
font-weight: 800;
font-size: 30px!important;
--card-mod-icon-color: #006A4E;
}
}
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: ''
entity: sensor.sonoff_a4b001433a_temperature
name: Passage
icon: mdi:shower
hold_action:
action: none
card_mod:
style: |
ha-card {
--ha-card-background: rgba(247, 248, 242, 0.0);
color: #9B1C31;
font-weight: 800;
font-size: 30px!important;
--card-mod-icon-color: #9B1C31;
}
columns: 3
view_layout:
grid-area: c2
are you sure this is correct?
if the entity for the button is that sensor, it should be aligned with the main type, and, why set action navigate if not setting a path, simply set action none
Yes, the navigation part should be left out. Just copied his code and applied the styling. Feel free to optimise it. Not saying its a perfect solution. But it should workā¦
right, I now scroll back a bit further and see what was the source there, my bad, should have replied to that one.
--ha-card-background: rgba(247, 248, 242, 0.0); can be
background: rgba(247, 248, 242, 0.0);
Ah no, the indentation is my bad. Probably just slipped in there. Removed it.
Thanks for the tip! Some some other questions
I want to edit the mushroom title card
Iāve managed to change the size and font weight
I just need to change the colour.
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Rooms
alignment: center
title_tap_action:
action: none
subtitle_tap_action:
action: none
card_mod:
style: |
.title {
font-weight: 1000;
font-size: 70px!important;
color: #1d1b20;
}
Just add !important behind the color. It is overwritten by some other styling. The same problem seems to be with the font-weight
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Rooms
alignment: center
title_tap_action:
action: none
subtitle_tap_action:
action: none
card_mod:
style: |
.title {
font-weight: 1000!important;
font-size: 70px!important;
color: #1d1b20!important;
}
I want to change the text fontā¦ How can I see what font family do exist ?
ha-card {
font-family: "brandon-grotesque";
}
Iām having an issue with my chip spacing after the updates, I know there was a fix rolled out but it doesnāt seem to have worked for me.
So If I add a positive spacing this pushes the cards further out but if I try to use minus to bring them closer together it doesnāt work anymore.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Kitchen
secondary: >-
{{ states('sensor.kitchen_temperature') | round (1) }}Ā°C - {{
states('sensor.kitchen_humidity') }}%
icon: none
entity: light.kitchen_lights
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: /home-v2/kitchen
icon_color: none
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 0px 0px 5px black;
--card-primary-font-weight: 350;
--card-primary-color: white;
--card-primary-font-size: 20px;
align-items: end;
margin-top: 175px;
margin-left: -40px;
inline-size: 180px;
height: 25px;
}
.secondary {
--card-secondary-font-size: 13px;
text-shadow: 0px 0px 5px black;
--card-secondary-color: white;
--card-secondary-font-weight: 350;
margin-top: -2px;
margin-left: -40px;
}
.: |
ha-card {
background: url('/local/images/areas/kitchen.jpg') center !important;
background-size: cover !important;
background-blend-mode: overlay !important;
height: 220px !important;
margin-left: -15px !important;
margin-top: -70px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: lock.back_door
state: unlocked
chip:
type: template
entity: lock.back_door
icon_color: red
icon: mdi:lock-open-variant
tap_action:
action: more-info
hold_action:
action: none
- type: conditional
conditions:
- entity: binary_sensor.back_door
state: 'on'
chip:
type: template
entity: binary_sensor.back_door
icon_color: red
icon: mdi:door-open
tap_action:
action: more-info
hold_action:
action: none
- type: conditional
conditions:
- entity: media_player.kitchen_echo
state: playing
chip:
type: template
entity: media_player.kitchen_echo
icon_color: grey
icon: mdi:music
tap_action:
action: more-info
- type: template
entity: light.kitchen_lights
icon: >-
{{ 'mdi:lightbulb' if expand(area_entities('Kitchen')) |
selectattr('domain','eq','light') | selectattr('state','eq','on') |
list | count > 0 else 'mdi:lightbulb-outline' }}
icon_color: >
{% set lights_in_kitchen = expand(area_entities('Kitchen')) |
selectattr('domain', 'eq', 'light') | list %} {{ 'orange' if
lights_in_kitchen | selectattr('state', 'eq', 'on') | list | count > 0
else 'grey' }}
content: >-
{{ expand(area_entities('kitchen')) |
selectattr('domain','eq','light') | selectattr('state','eq','on') |
list | count }}
tap_action:
action: call-service
service: light.toggle
target:
area_id: kitchen
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: -5px;
margin-top: -10px;
}
card_mod:
style: |
ha-card {
height: 180px;
width: 180px;
margin-left: auto;
margin-right: auto;
{% if is_state('light.kitchen_lights', 'on') %}
#box-shadow: 0 0 20px rgba(245, 173, 66, 0.6);
#border-radius: 10px;
#background: rgba(245, 173, 66, 0.1); {% endif %}
}
This has been a long time, and because I never really had use for colorizing the state, I guess I never noticed.
But, now that I do want it to be correct, let me please post this:
- type: entities
entities:
- type: custom:template-entity-row
entity: sensor.studenten_hygro_temp_battery
state: >
{{states(config.entity,with_unit=True)}}
secondary: >
Battery type: {{states(config.entity ~'_type')}}
card_mod: &perc
style: |
div#wrapper:
.: |
.state {
color: magenta;
}
.info {
color: cyan;
border: 2px solid var(--ha-color);
background:
{% set perc = states(config.entity)|float(0) %}
{% set rest = 100 - perc %}
{% if perc <= 10 %} {% set bar = '255,0,0' %}
{% elif perc <= 20 %} {% set bar = '128,0,0' %}
{% elif perc <= 30 %} {% set bar = '255,140,0' %}
{% elif perc <= 40 %} {% set bar = '255,165,0' %}
{% elif perc <= 50 %} {% set bar = '255,255,0' %}
{% elif perc <= 60 %} {% set bar = '154,205,5' %}
{% elif perc <= 70 %} {% set bar = '144,238,144' %}
{% elif perc <= 80 %} {% set bar = '50,205,50' %}
{% elif perc <= 90 %} {% set bar = '0,128,0' %}
{% else %} {% set bar = '0,100,0' %}
{% endif %}
/*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/
linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%,
rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%);
}
.info .secondary {
color: white;
}
:host {
--card-mod-icon-color:
{% set perc = states(config.entity)|float(0) %}
{% if perc <= 10 %} red
{% elif perc <= 20 %} darkred
{% elif perc <= 30 %} darkorange
{% elif perc <= 40 %} orange
{% elif perc <= 50 %} yellow
{% elif perc <= 60 %} yellowgreen
{% elif perc <= 70 %} lightgreen
{% elif perc <= 80 %} limegreen
{% elif perc <= 90 %} green
{% else %} darkgreen
{% endif %};
}
I am planning to add this to an auto-entities, and noticed the card doesnt really like it, because the colors are not applied correctly in that case, especially the background (which is the whole idea of this card in the first place)
so, 2 challenges, color the state, and feed it in auto-entities.
Please have a look if my
.state {
color: magenta;
}
is still the correct way.
btw, I first tried it without explicit state template, because the template-entity-row takes that off of the config.entity, but when it didnt colorize, I figured to add it explicitly. No change though
current state in auto-entities:
separateā¦ found it, I had a stray pipe after the top style:
style: |
div#wrapper:
.: |
fixed that and added the icon color under the host, this works:
Working color mods
card_mod:
style:
div#wrapper:
.: |
.state {
color:
{% set perc = states(config.entity)|float(0) %}
{% if perc <= 10 %} red
{% elif perc <= 20 %} darkred
{% elif perc <= 30 %} darkorange
{% elif perc <= 40 %} orange
{% elif perc <= 50 %} yellow
{% elif perc <= 60 %} yellowgreen
{% elif perc <= 70 %} lightgreen
{% elif perc <= 80 %} limegreen
{% elif perc <= 90 %} green
{% else %} darkgreen
{% endif %};
}
.info {
color: black;
border: 2px solid var(--ha-color);
background:
{% set perc = states(config.entity)|float(0) %}
{% set rest = 100 - perc %}
{% if perc <= 10 %} {% set bar = '255,0,0' %}
{% elif perc <= 20 %} {% set bar = '128,0,0' %}
{% elif perc <= 30 %} {% set bar = '255,140,0' %}
{% elif perc <= 40 %} {% set bar = '255,165,0' %}
{% elif perc <= 50 %} {% set bar = '255,255,0' %}
{% elif perc <= 60 %} {% set bar = '154,205,5' %}
{% elif perc <= 70 %} {% set bar = '144,238,144' %}
{% elif perc <= 80 %} {% set bar = '50,205,50' %}
{% elif perc <= 90 %} {% set bar = '0,128,0' %}
{% else %} {% set bar = '0,100,0' %}
{% endif %}
/*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/
linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%,
rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%);
}
.info .secondary {
color: white;
}
.: |
:host {
--card-mod-icon-color:
{% set perc = states(config.entity)|float(0) %}
{% if perc <= 10 %} red
{% elif perc <= 20 %} darkred
{% elif perc <= 30 %} darkorange
{% elif perc <= 40 %} orange
{% elif perc <= 50 %} yellow
{% elif perc <= 60 %} yellowgreen
{% elif perc <= 70 %} lightgreen
{% elif perc <= 80 %} limegreen
{% elif perc <= 90 %} green
{% else %} darkgreen
{% endif %};
}
1 Like
really nice!
did you create your battery type using customize.yaml??
sensor.studenten_hygro_temp_battery:
friendly_name: Studenten hygro temp Battery
device_class: battery
battery_type: CR2477
no, I did think about that, but I installed Battery Notes custom integration
update
setting the secondary line to use the last_replaced was a bit of a challenge, but using this:
filter:
include:
- entity_id: sensor.*_battery
options:
type: custom:template-entity-row
state: >
{{states(config.entity,with_unit=True)}}
secondary: >
Batterij: {{states(config.entity ~'_type')}},
sinds: {{states(config.entity ~'_last_replaced')|as_timestamp(default=none)|timestamp_custom('%d-%m-%y %X',True,'Nog niet geactiveerd')}}
makes the magic happen. the 2 filters both need a default, and setting the first to none, makes the second jump to its default string I want in the card:
and when actually set:
ofc we can use any format we like, this is still an experiment 
the unknown on the battery type entities is because somehow the object_idās are different on my Ikea sensor entities. I still need to re-edit those, which is a mystery, and not an issue.
1 Like