I used 3.50. I tried it with 3.43 and i have the same problem.
Hello,
how can i change the card height und icon size for mushroom-template-badge ?
An example…
type: custom:mushroom-template-card
primary: Badge Size
entity: xxxx.xxxx
icon: mdi:curtains
icon_color: white
badge_icon: mdi:battery
badge_color: red
tap_action:
action: toggle
card_mod:
style: |
mushroom-badge-icon {
--badge-icon-size: 15px;
--badge-size: 20px;
left: 27px;
top:-10px;
}
1 Like
Hiya.
Trying to give my chip background a different colour based on the AC mode(heat_cool, cool, heat, fan_only, dry but no joy. Any help would be appreciated.
Would be really happy if I can show the degrees its set at as well but I’ll take what I can.
thanks
type: custom:mushroom-chips-card
chips:
- type: action
tap_action:
action: navigate
navigation_path: '#ACLiving'
icon: mdi:air-conditioner
card_mod:
style: |
ha-card {
--chip-background: |
{% if is_state('climate.living_ac_living_ac', 'heat_cool') %}
rgba(180, 165, 0, 0.2);
{% elif is_state('climate.living_ac_living_ac', 'heat') %}
rgba(255, 123, 0, 0.2);
{% elif is_state('climate.living_ac_living_ac', 'cool') %}
rgba(255, 165, 0, 0.2);
{% elif is_state('climate.living_ac_living_ac', 'fan_only') %}
rgba(255, 250, 0, 0.2);
{% elif is_state('climate.living_ac_living_ac', 'dry') %}
rgba(0, 165, 0, 0.2);
{% else %}
rgba(255, 255, 255, 0.2); /* Default color */
{% endif %}
padding: 0.5px !important;
border-radius: 100px !important;
}
I haven’t tested, but try removing | (above the red dot)
This seems to have some effect.
chip:
type: template
tap_action:
action: toggle
entity: input_boolean.kiosk_mode_toggle
icon: mdi:menu
card_mod:
style: |
ha-card {
border: 2px solid rgb(220,220,220,0.8) !important;
{% if is_state('climate.air_conditioning', 'heat_cool') %}
--chip-background: rgba(180, 165, 0, 0.2);
{% elif is_state('climate.air_conditioning', 'heat') %}
--chip-background: rgba(255, 123, 0, 0.2);
{% elif is_state('climate.air_conditioning', 'cool') %}
--chip-background: rgba(255, 165, 0, 0.2);
{% elif is_state('climate.air_conditioning', 'fan_only') %}
--chip-background: rgba(255, 250, 0, 0.2);
{% elif is_state('climate.air_conditioning', 'dry') %}
--chip-background: rgba(0, 165, 0, 0.2);
{% else %}
--chip-background: rgba(255, 255, 255, 0.2); /* Default color */
{% endif %}
}
}
When I make these types of templates for colours I create a template sensor.
Reference in Card, lovelace dashboard
card_mod:
style: |
ha-card {
{{states('sensor.swc_dewpoint_colour_outside')}}
Sensor, goes in configuration.yaml file
The output of the template in the sensor must be below 250 characters for this to work. Sensor State character limit.
sensor:
# TEMPLATE SENSORS -----------------------------------------------------------
- platform: template
sensors:
# Template Simple Weather Card - Dewpoint Colour - Outside
swc_dewpoint_colour_outside:
unique_id: 8883f463-f1fe-4e46-97ef-ab827670f130
friendly_name: "SWC Dewpoint Colour Outside"
value_template: >-
{% if is_state('sensor.text_dewpoint_comfort_outside','Very Dry') %}
--ha-card-background: radial-gradient(circle, deepskyblue, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% elif is_state('sensor.text_dewpoint_comfort_outside','Dry') %}
--ha-card-background: radial-gradient(circle, mediumaquamarine, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% elif is_state('sensor.text_dewpoint_comfort_outside','Pleasant') %}
--ha-card-background: radial-gradient(circle, limegreen, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% elif is_state('sensor.text_dewpoint_comfort_outside','Comfortable') %}
--ha-card-background: radial-gradient(circle, yellowgreen, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% elif is_state('sensor.text_dewpoint_comfort_outside','Sticky Humid') %}
--ha-card-background: radial-gradient(circle, yellow, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% elif is_state('sensor.text_dewpoint_comfort_outside','Muggy') %}
--ha-card-background: radial-gradient(circle, gold, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% elif is_state('sensor.text_dewpoint_comfort_outside','Sweltering') %}
--ha-card-background: radial-gradient(circle, orange, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% elif is_state('sensor.text_dewpoint_comfort_outside','Stifling') %}
--ha-card-background: radial-gradient(circle, crimson, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% endif %}
It’s a typo… you cant have two of these | unless there is a code break.
1 Like
yeah lol I knew it was something silly of me.
Oh that interesting. So does the template go in the configuration.yaml and the Ref card is the frontenbut it?
Yes it certainly is. I have edited my above post to make it a bit clearer. The output of the template in the sensor must be below 250 characters for this to work. Sensor State character limit.
The code may be easier to interpret like this
value_template: >-
--ha-card-background:
{%- set dew = states('sensor.text_dewpoint_comfort_outside') %}
{%- if dew == 'Very Dry' %} radial-gradient(circle, deepskyblue, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)
{%- elif dew == 'Dry' %} radial-gradient(circle, mediumaquamarine, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15))
{%- elif dew == 'Pleasant' %} radial-gradient(circle, limegreen, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15))
etc...
{%- endif %} !important;
2 Likes
Right so if I wanted to add a generic one considering I want to keep the colors constant between all AC Split units, how would I achieve this?
The entities I have are
climate.living_ac_living_ac
climate.garage_ac_garage_ac
climate.master_ac_master_ac
Dont think I have deciphered how to do this.
This effect is what I need.
ha-card {
--chip-background:
{% if is_state("climate.living_ac_living_ac", "heat_cool") %}
rgba(255, 165, 0, 0.2);
{% elif is_state("climate.living_ac_living_ac", "heat") %}
rgba(255, 99, 71, 0.2);
{% elif is_state("climate.living_ac_living_ac", "cool") %}
rgba(0, 191, 255, 0.2);
{% elif is_state("climate.living_ac_living_ac", "fan_only") %}
rgba(60, 179, 113, 0.2);
{% elif is_state("climate.living_ac_living_ac", "dry") %}
rgba(147, 112, 219, 0.2);
{% else %}
rgba(180, 160, 0, 0.2); /* Default color */
{% endif %}
padding: 0.5px !important;
border-radius: 100px !important;
}
# TEMPLATE SENSORS -----------------------------------------------------------
- platform: template
sensors:
# Template AC Color display
ac_color:
unique_id: 99999999999999
friendly_name: "AC Color"
value_template: >-
{% if is_state('ac_color','heat_cool') %}
--ha-card-background: rgba(255, 165, 0, 1);
{% if is_state('ac_color','auto') %}
--ha-card-background: rgba(255, 165, 0, 1);
{% if is_state('ac_color','heat') %}
--ha-card-background: rgba(247, 2, 2, 1);
{% if is_state('ac_color','cool') %}
--ha-card-background: rgba(18, 60, 250, 1);
{% if is_state('ac_color','fan_only') %}
--ha-card-background: rgba(6, 148, 148, 1);
{% if is_state('ac_color','dry') %}
--ha-card-background: rgba(235, 157, 2, 1);
{% else %}
--ha-card-background: rgba(180, 160, 0, 0.2);
{% endif %}
card_mod:
style: |
ha-card {
{{states('ac_color')}}
Yep that is how you would do it. But you would need a sensor for each A/C to reflect the state colour. Unless you set them all to the same mode everytime.
Oh right. This is why I could not understand how its going to know which AC to cater for
Whats the benefit of doing this in the config.yaml in that case?
Advantage is if it is a long template repeated on multiple lovelace dashboards like the
sticky floating navigation menu or simple air comfort card. You just change the colours from configuration.yaml and it will update all.
Plus reduces the amount of scrolling when editing lovelace dashboards in yaml. I have reduced 100’s of lines in my dashboards.
I forgot one level
sensor:
- platform: template
sensors:
Yes but the --ha-card-background: has to be Infront of radial-gradient.
The output of the template sensor, creates the full line of code that would be used in the card-mod to change the colour.
This is an example of what my template colour sensors output.
Try
sensor:
- platform: template
sensors:
color:
friendly_name: "Color"
unique_id: color
value_template: |
--ha-card-background:
{%- set dew = states('climate.living_room') %}
{%- if dew == 'heat' %} orange
{%- elif dew == 'cool' %} green
{%- elif dew == 'off' %} red
{%- endif %} !important;
not perfect, but should provide an example of what I mean.
1 Like
The --ha-card-background has to output inline with the colour. You create the sensor to output the line of code you would insert into the card mod.
sensor:
- platform: template
sensors:
color:
friendly_name: "Color"
unique_id: color
value_template: >-
{%- set dew = states('climate.living_room') %}
{%- if dew == 'heat' %}--ha-card-background: orange;
{%- elif dew == 'cool' %}--ha-card-background: green;
{%- elif dew == 'off' %}--ha-card-background: red;
{%- endif %} !important;
1 Like
I also create sensors that combine attribute states
fan_direction_speed:
friendly_name: "Fan Direction Speed"
unique_id: fan2
value_template: |
{% set direction = state_attr('fan.bedroom_fan', 'direction') %}
{% set speed = state_attr('fan.bedroom_fan', 'percentage') %}
{{[direction,speed]|join("")}}
entity_picture_template: >-
{% set direction = state_attr('fan.bedroom_fan', 'direction') %}
{% set path = "/local/animated/" %}
{% set speed = state_attr('fan.bedroom_fan', 'percentage') %}
{% set ext = ".svg"%}
{{[path,direction,speed,ext]|join("")}}
This one was for applying different SVGs
1 Like
