- type: action ?
Does |- truncate spaces or the - not required?
- reduces spaces
1 Like
tapping on it brings up a bubble card.
Ahh didn’t know bubble card was involved. I probably missed that 
Also be aware, applying styles to a chip tends to be a bit trickier than normal cards when multiple chips are present.
Sorry not sure your card type is correct to start.
I am unfamiliar with type: custom:mushroom-template-badge
i change to mushroom-template-card 
how can i change the icon-size and icon-padding (to left side).
Thank you for your help!
Right. Did not know that.
Is there such a thing as too many conditions?
This works
ha-card {
--chip-background:
{% if is_state("weather.city_hourly", "clear-night") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "cloudy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "rainy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "lightning-rainy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "partlycloudy") %}
rgba(6, 148,148, 1);
{% else %}
rgba(6, 148,148, 0.2); /* Default color */
{% endif %}
padding: 0.5px !important;
border-radius: 100px !important;
}
This doesnt
ha-card {
--chip-background:
{% if is_state("weather.city_hourly", "clear-night") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "cloudy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "fog") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "hail") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "lightning") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "lightning-rainy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "partlycloudy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "pouring") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "rainy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "snowy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "snowy-rainy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "sunny") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "windy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "windy-variant") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "exceptional") %}
rgba(6, 148,148, 1);
{% else %}
rgba(6, 148,148, 0.2); /* Default color */
{% endif %}
padding: 0.5px !important;
border-radius: 100px !important;
}
Was thinking all different colors but might have to limit them somehow?
ok ignore. damn typo. background fixed now
What does not work is the icon
- type: action
tap_action:
action: navigate
navigation_path: "#Weather"
icon: |-
{% if is_state(weather.city_hourly, 'clear-night') %}
mdi:weather-night
{% elif is_state(weather.city_hourly, 'cloudy') %}
mdi:weather-cloudy
{% elif is_state(weather.city_hourly, 'fog') %}
mdi:weather-fog
{% elif is_state(weather.city_hourly, 'hail') %}
mdi:weather-hail
{% elif is_state(weather.city_hourly, 'lightning') %}
mdi:weather-lightning
{% elif is_state(weather.city_hourly, 'lightning-rainy') %}
mdi:weather-lightning-rainy
{% elif is_state(weather.city_hourly, 'partlycloudy') %}
mdi:weather-partlycloudy
{% elif is_state(weather.city_hourly, 'pouring') %}
mdi:weather-pouring
{% elif is_state(weather.city_hourly, 'rainy') %}
mdi:weather-rainy
{% elif is_state(weather.city_hourly, 'snowy') %}
mdi:weather-snowy
{% elif is_state(weather.city_hourly, 'snowy-rainy') %}
mdi:weather-snowy-rainy
{% elif is_state(weather.city_hourly, 'sunny') %}
mdi:weather-sunny
{% elif is_state(weather.city_hourly, 'windy') %}
mdi:weather-windy
{% elif is_state(weather.city_hourly, 'windy-variant') %}
mdi:weather-windy-variant
{% elif is_state(weather.city_hourly, 'exceptional') %}
mdi:weather-exceptional
{% endif %}
the City Hourly in developer tools actually has the icon stated which I was hoping to use. what I get now is
but since its raining expecting
icon: mdi:weather-rainy
temperature: 19.3
temperature_unit: °C
humidity: 68
…
…
icon: mdi:weather-rainy
friendly_name: City Hourly
supported_features: 2
You need single quotes around your entities
tried with single quotes no joy
icon: |-
{% if is_state('weather.city_hourly', 'clear-night') %}
mdi:weather-night
{% elif is_state('weather.city_hourly', 'cloudy') %}
mdi:weather-cloudy
{% elif is_state('weather.city_hourly', 'fog') %}
mdi:weather-fog
{% elif is_state('weather.city_hourly', 'hail') %}
mdi:weather-hail
{% elif is_state('weather.city_hourly', 'lightning') %}
mdi:weather-lightning
{% elif is_state('weather.city_hourly', 'lightning-rainy') %}
mdi:weather-lightning-rainy
{% elif is_state('weather.city_hourly', 'partlycloudy') %}
mdi:weather-partlycloudy
{% elif is_state('weather.city_hourly', 'pouring') %}
mdi:weather-pouring
{% elif is_state('weather.city_hourly', 'rainy') %}
mdi:weather-rainy
{% elif is_state('weather.city_hourly', 'snowy') %}
mdi:weather-snowy
{% elif is_state('weather.city_hourly', 'snowy-rainy') %}
mdi:weather-snowy-rainy
{% elif is_state('weather.city_hourly', 'sunny') %}
mdi:weather-sunny
{% elif is_state('weather.city_hourly', 'windy') %}
mdi:weather-windy
{% elif is_state('weather.city_hourly', 'windy-variant') %}
mdi:weather-windy-variant
{% elif is_state('weather.city_hourly', 'exceptional') %}
mdi:weather-exceptional
{% endif %}
Does this work in a sperate card? Edit the first clear-night and see if the icon changes to the last icon
type: custom:mushroom-template-card
primary: Test
secondary: weather
icon: |
{%- if is_state('weather.city_hourly', 'clear-night') -%}
mdi:weather-night
{% elif is_state('weather.city_hourly', 'cloudy') %}
mdi:weather-cloudy
{% elif is_state('weather.city_hourly', 'fog') %}
mdi:weather-fog
{% elif is_state('weather.city_hourly', 'hail') %}
mdi:weather-hail
{% elif is_state('weather.city_hourly', 'lightning') %}
mdi:weather-lightning
{% elif is_state('weather.city_hourly', 'lightning-rainy') %}
mdi:weather-lightning-rainy
{% elif is_state('weather.city_hourly', 'partlycloudy') %}
mdi:weather-partlycloudy
{% elif is_state('weather.city_hourly', 'pouring') %}
mdi:weather-pouring
{% elif is_state('weather.city_hourly', 'rainy') %}
mdi:weather-rainy
{% elif is_state('weather.city_hourly', 'snowy') %}
mdi:weather-snowy
{% elif is_state('weather.city_hourly', 'snowy-rainy') %}
mdi:weather-snowy-rainy
{% elif is_state('weather.city_hourly', 'sunny') %}
mdi:weather-sunny
{% elif is_state('weather.city_hourly', 'windy') %}
mdi:weather-windy
{% elif is_state('weather.city_hourly', 'windy-variant') %}
mdi:weather-windy-variant
{% elif is_state('weather.city_hourly', 'clear-night') %}
mdi:weather-cloudy-clock
{% endif %}
get this
So it works
Let’s go simplier
type: custom:mushroom-template-card
primary: Test
secondary: weather
entity: weather.forecast_home
icon: |
{% set weather = states(config.entity) %}
{% if weather == 'clear-night' %} mdi:weather-night
{% elif weather == 'cloudy' %} mdi:weather-cloudy
{% endif %}
This works too. sorry about the previous one. It works in a separate card but not where I want it to…
No worries, we just needed to eliminate some possibilities.
Can you share the entire card code?
Sure
type: custom:button-card
name: Living
icon: mdi:sofa
custom_fields:
temp: |
[[[ return states['sensor.living_aq_temperature'].state + '°C']]]
hum: |
[[[ return states['sensor.living_aq_humidity'].state + '%']]]
ug: |
[[[ return states['sensor.living_aq_2_5ug'].state + 'µg/m³']]]
T-voc: |
[[[ return states['sensor.living_aq_t_voc'].state + 'ppb']]]
Co2: |
[[[ return states['sensor.living_aq_co2'].state + 'ppm']]]
pres: |
[[[ return states['binary_sensor.living_presence_sensor_presence'].state]]]
Wea1:
card:
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(255, 165, 0, 1);
{% elif is_state("climate.living_ac_living_ac", "heat") %}
rgba(247, 2, 2, 1);
{% elif is_state("climate.living_ac_living_ac", "cool") %}
rgba(18, 60, 250, 1);
{% elif is_state("climate.living_ac_living_ac", "fan_only") %}
rgba(6, 148, 148, 1);
{% elif is_state("climate.living_ac_living_ac", "dry") %}
rgba(235, 157, 2, 1);
{% else %}
rgba(180, 160, 0, 0.2); /* Default color */
{% endif %}
padding: 0.5px !important;
border-radius: 100px !important;
}
- type: action
tap_action:
action: navigate
navigation_path: "#Weather"
icon: |
{% if is_state('weather.liverpool_hourly', 'clear-night') %}
mdi:weather-night
{% elif is_state('weather.liverpool_hourly', 'cloudy') %}
mdi:weather-cloudy
{% elif is_state('weather.liverpool_hourly', 'fog') %}
mdi:weather-fog
{% elif is_state('weather.liverpool_hourly', 'hail') %}
mdi:weather-hail
{% elif is_state('weather.liverpool_hourly', 'lightning') %}
mdi:weather-lightning
{% elif is_state('weather.liverpool_hourly', 'lightning-rainy') %}
mdi:weather-lightning-rainy
{% elif is_state('weather.liverpool_hourly', 'partlycloudy') %}
mdi:weather-partlycloudy
{% elif is_state('weather.liverpool_hourly', 'pouring') %}
mdi:weather-pouring
{% elif is_state('weather.liverpool_hourly', 'rainy') %}
mdi:weather-rainy
{% elif is_state('weather.liverpool_hourly', 'snowy') %}
mdi:weather-snowy
{% elif is_state('weather.liverpool_hourly', 'snowy-rainy') %}
mdi:weather-snowy-rainy
{% elif is_state('weather.liverpool_hourly', 'sunny') %}
mdi:weather-sunny
{% elif is_state('weather.liverpool_hourly', 'windy') %}
mdi:weather-windy
{% elif is_state('weather.liverpool_hourly', 'windy-variant') %}
mdi:weather-windy-variant
{% elif is_state('weather.liverpool_hourly', 'exceptional') %}
mdi:weather-exceptional
{% endif %}
card_mod:
style: |
ha-card {
--chip-background:
{% if is_state("weather.liverpool_hourly", "clear-night") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.liverpool_hourly", "cloudy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.liverpool_hourly", "fog") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.liverpool_hourly", "hail") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.liverpool_hourly", "lightning") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.liverpool_hourly", "lightning-rainy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.liverpool_hourly", "partlycloudy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.liverpool_hourly", "pouring") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.liverpool_hourly", "rainy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.liverpool_hourly", "snowy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.liverpool_hourly", "snowy-rainy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.liverpool_hourly", "sunny") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.liverpool_hourly", "windy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.liverpool_hourly", "windy-variant") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.liverpool_hourly", "exceptional") %}
rgba(6, 148,148, 1);
{% else %}
rgba(6, 148,148, 0.2); /* Default color */
{% endif %}
padding: 0.5px !important;
border-radius: 100px !important;
}
ha-icon {
color: white !important;
}
- type: template
tap_action:
action: navigate
navigation_path: "#Enviro"
icon: mdi:temperature-celsius
card_mod:
style: |
ha-card {
--chip-background: {{'rgba(6, 148, 148, 1)' if is_state('switch.front_lights_left', 'Sunny') else 'rgba(6, 148, 148, 0.2)'}};
padding: 0.5px!important;
border-radius: 100px!important;
}
btn1:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:lightbulb-on
entity: switch.stairs_living_1_lights_left
card_mod:
style: |
ha-card {
--chip-background: {{'rgba(180, 160, 0, 1)' if is_state('switch.stairs_living_1_lights_left', 'on') else 'rgba(180, 160, 0, 0.2)'}};
padding: 0.5px!important;
border-radius: 100px!important;
}
- type: template
tap_action:
action: toggle
icon: mdi:lightbulb-on
entity: switch.garage_living_2_lights_right
card_mod:
style: |
ha-card {
--chip-background: {{'rgba(180, 160, 0, 1)' if is_state('switch.garage_living_2_lights_right', 'on') else 'rgba(180, 160, 0, 0.2)'}};
padding: 0.5px!important;
border-radius: 100px!important;
}
- type: template
tap_action:
action: perform-action
perform_action: script.toggle_both_lights
target: {}
icon: mdi:lightbulb-group
entity: binary_sensor.both_living_room_lights
card_mod:
style: |
ha-card {
--chip-background: {{'rgba(1, 151, 252, 1)' if is_state('binary_sensor.both_living_room_lights', 'on') else 'rgba(1, 151, 252, 0.2)'}};
padding: 0.5px!important;
border-radius: 100px!important;
}
btn2:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:fan
entity: fan.skyfan_dc_fan
card_mod:
style: |
ha-card {
--chip-background: {{'rgba(105, 180, 71, 1)' if is_state('fan.skyfan_dc_fan', 'on') else 'rgba(105, 180, 71, 0.2)'}};
padding: 0.5px!important;
border-radius: 100px!important;
{% if is_state('fan.skyfan_dc_fan', 'on')%}animation: spin 1s linear infinite{% endif %};
}
btn3:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:outdoor-lamp
entity: switch.front_lights_left
card_mod:
style: |
ha-card {
--chip-background: {{'rgba(180, 160, 0, 1)' if is_state('switch.front_lights_left', 'on') else 'rgba(180, 160, 0, 0.2)'}};
padding: 0.5px!important;
border-radius: 100px!important;
}
- type: template
tap_action:
action: toggle
icon: mdi:door
entity: switch.front_lights_center
card_mod:
style: |
ha-card {
--chip-background: {{'rgba(6, 148, 148, 1)' if is_state('switch.front_lights_center', 'on') else 'rgba(6, 148, 148, 0.2)'}};
padding: 0.5px!important;
border-radius: 100px!important;
}
- type: template
tap_action:
action: toggle
icon: mdi:door-sliding
entity: switch.backyard_drop_lights_right
card_mod:
style: |
ha-card {
--chip-background: {{'rgba(255, 0, 880, 1)' if is_state('switch.backyard_drop_lights_right', 'on') else 'rgba(255, 0, 880, 0.2)'}};
padding: 0.5px!important;
border-radius: 100px!important;
}
btn4:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: |
[[[
return states['cover.entrance_curtain'].state === 'open' ? 'mdi:blinds-vertical' : 'mdi:blinds-vertical-closed';
]]]
entity: cover.entrance_curtain
card_mod:
style: |
ha-card {
--chip-background: {{'rgba(187, 51, 255, 1)' if is_state('cover.entrance_curtain', 'open') else 'rgba(180, 160, 0, 0.2)'}};
padding: 0.5px!important;
border-radius: 100px!important;
}
- type: template
tap_action:
action: toggle
icon: |
[[[
return states['cover.backyard_curtain'].state === 'open' ? 'mdi:blinds-vertical' : 'mdi:blinds-vertical-closed';
]]]
entity: cover.backyard_curtain
card_mod:
style: |
ha-card {
--chip-background: {{'rgba(187, 51, 255, 1)' if is_state('cover.backyard_curtain', 'open') else 'rgba(6, 148, 148, 0.2)'}};
padding: 0.5px!important;
border-radius: 100px!important;
}
- type: template
tap_action:
action: toggle
icon: |
[[[
return states['cover.kitchen_curtain'].state === 'open' ? 'mdi:blinds-vertical' : 'mdi:blinds-vertical-closed';
]]]
entity: cover.kitchen_curtain
card_mod:
style: |
ha-card {
--chip-background: {{'rgba(187, 51, 255, 1)' if is_state('cover.kitchen_curtain', 'open') else 'rgba(255, 0, 880, 0.2)'}};
padding: 0.5px!important;
border-radius: 100px!important;
}
btn5:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: |
[[[
return states['cover.entrance_shutter'].state === 'open' ? 'mdi:window-shutter-open' : 'mdi:window-shutter';
]]]
entity: cover.entrance_shutter
card_mod:
style: |
ha-card {
--chip-background: {{'rgba(255, 0, 0, 1)' if is_state('cover.entrance_shutter', 'open') else 'rgba(180, 160, 0, 0.2)'}};
padding: 0.5px!important;
border-radius: 100px!important;
}
- type: template
tap_action:
action: toggle
icon: |
[[[
return states['cover.backyard_shutter'].state === 'open' ? 'mdi:window-shutter-open' : 'mdi:window-shutter';
]]]
entity: cover.backyard_shutter
card_mod:
style: |
ha-card {
--chip-background: {{'rgba(255, 0, 0, 1)' if is_state('cover.backyard_shutter', 'open') else 'rgba(6, 148, 148, 0.2)'}};
padding: 0.5px!important;
border-radius: 100px!important;
}
- type: template
tap_action:
action: toggle
icon: |
[[[
return states['cover.kitchen_shutter'].state === 'open' ? 'mdi:window-shutter-open' : 'mdi:window-shutter';
]]]
entity: cover.kitchen_shutter
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(255, 0, 0, 1)' if is_state('cover.kitchen_shutter', 'open') else 'rgba(255, 0, 88, 0.2)' }};
padding: 0.5px!important;
border-radius: 100px!important;
}
tap_action:
action: navigate
navigation_path: "#Living"
styles:
grid:
- grid-template-areas: >-
"n St Wea1 btn1 btn2 btn3 btn4 btn5" "temp St Wea1 btn1 btn2 btn3 btn4
btn5" "hum St Wea1 btn1 btn2 btn3 btn4 btn5" "ug St Wea1 btn1 btn2 btn3
btn4 btn5" "T-voc St Wea1 btn1 btn2 btn3 btn4 btn5" "Co2 St Wea1 btn1
btn2 btn3 btn4 btn5" "pres St Wea1 btn1 btn2 btn3 btn4 btn5" "i St Wea1
btn1 btn2 btn3 btn4 btn5"
- grid-template-columns: >-
1fr min-content min-content min-content min-content min-content
min-content min-content
- grid-template-rows: >-
min-content min-content min-content min-content min-content min-content
min-content min-content 1fr
card:
- padding: 10px 8px 22px 10px
- height: 200px
custom_fields:
temp:
- justify-self: start
- font-size: 12px
- opacity: "0.7"
- padding-top: 10px
hum:
- justify-self: start
- font-size: 12px
- opacity: "0.7"
pres:
- justify-self: start
- font-size: 12px
- opacity: "0.7"
ug:
- justify-self: start
- font-size: 12px
- opacity: "0.7"
T-voc:
- justify-self: start
- font-size: 12px
- opacity: "0.7"
Co2:
- justify-self: start
- font-size: 12px
- opacity: "0.7"
St:
- justify-content: start
- position: absolute
- width: 100px
- height: 100px
- left: 10px
- top: 35px
Wea1:
- justify-content: end
- align-self: start
- padding-left: 2px
btn1:
- justify-content: end
- align-self: start
- padding-left: 2px
btn2:
- justify-content: end
- align-self: start
- padding-left: 2px
btn3:
- justify-content: end
- align-self: start
- padding-left: 2px
btn4:
- justify-content: end
- align-self: start
- padding-left: 2px
btn5:
- justify-content: end
- align-self: start
- padding-left: 2px
name:
- justify-self: start
- align-self: start
- font-size: 12px
- font-weight: 500
- color: grey
img_cell:
- justify-content: start
- position: absolute
- width: 80px
- height: 80px
- left: 0
- bottom: 0
- margin: 0 0 -10.5px -10.5px
- background: |
[[[
return states['binary_sensor.living_presence_sensor_presence'].state === 'on'
? 'linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)'
: 'rgba(255, 196, 126, 0.1)';
]]]
- border-radius: 500px
icon:
- position: relative
- width: 30.5px
- color: grey
- opacity: "0.6"
I believe it is because you are using a Mushroom Chips card. They are a whole different card to mod.
So does that mean not possible at all or just a pain?
I think switching to a template-chip card vs action will fix it
type: custom:mushroom-chips-card
chips:
- type: template
entity: weather.forecast_home
tap_action:
action: navigate
navigation_path: "#Weather"
icon: |
{% set weather = states(config.entity) %}
{% if weather == 'clear-night' %} mdi:weather-night
{% elif weather == 'cloudy' %} mdi:weather-cloudy
{% elif weather == 'fog' %} mdi:weather-fog
{% elif weather == 'hail' %} mdi:weather-hail
{% elif weather == 'lightning' %} mdi:weather-cloudy
{% elif weather == 'lightning-rainy' %} mdi:weather-lightning
{% endif %}
icon_color: |
{% set weather = states(config.entity) %}
{% if weather == 'clear-night' %} red
{% elif weather == 'cloudy' %} green
{% elif weather == 'fog' %} blue
{% endif %}
- type: template
entity: weather.forecast_home
tap_action:
action: navigate
navigation_path: "#Weather"
icon: |
{% set weather = states(config.entity) %}
{% if weather == 'clear-night' %} mdi:weather-night
{% elif weather == 'cloudy' %} mdi:weather-cloudy
{% elif weather == 'fog' %} mdi:weather-fog
{% elif weather == 'hail' %} mdi:weather-hail
{% elif weather == 'lightning' %} mdi:weather-cloudy
{% elif weather == 'lightning-rainy' %} mdi:weather-lightning
{% endif %}
icon_color: |
{% set weather = states(config.entity) %}
{% if weather == 'clear-night' %} blue
{% elif weather == 'cloudy' %} green
{% elif weather == 'fog' %} red
{% endif %}
1 Like