Oh and remove the | from behind your style 
2 Likes
This! This is it! Thank you.
No problemo
1 Like
i will split your problems up into the 3 sections you have and first i want to see if i have understood you correctly.
-
do you want to remove the background of the lightbulb icon or of the dropdown menu icon?
-
yes. you can use the below:
card_mod:
style:
mushroom-light-brightness-control$: |
mushroom-slider {
--bg-color: #d1eced !important;
--main-color: teal !important;
}
.: |
Rest of your code. just remove any reference to other background color in the ha-card section.
- is there any reason it needs to be 200%? i changed it to 100% and seems fine to me?
the issue you have with your center not being clickable is because your chip is technically taking up the space. i added a border so you can see.
just add the below:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
tap_action:
action: toggle
entity: input_boolean.living_room_toggle
icon_color: 31,31,31
card_mod:
style: |
ha-card {
--chip-icon-size: 0.7em;
--chip-padding: 0px 6px;
--chip-height: 35px;
--chip-border-radius: 100px;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: white;
margin: 34px 215px;
width: 0px;
}
let me know if you need more help on this one.
2 Likes
Yeah, doesnt change from current color.
This is what I currently have:
/* Define Person State colors. Can be added to theme */
--state-person-Home: var(--red-color);
--state-person-home: var(--red-color);
--state-person-not-home: var(--indigo-color);
--state-person-zone: var(--light-blue-color);
--state-person-unknown: var(--grey-color);
/* Set Person State color */
--state-person:
{% if is_state(config.entity, ['Home', 'home','not_home', 'unknown']) %}
var(--state-person-{{ states(config.entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
Thanks for the help! Trying to remove the lightbulb background. The background on the chip is desired.
I might be doing something wrong with the width. When I don’t set it to 200% it only covers half the card. Removing the width on the chip might fix that though…. I’ll mess around with it tonight but this seems like it’ll get me going in the right direction. Thank you!
Then sorry i am really not sure. the only thing i would ask, and this may seem like a dumb question. but do you have Card Mod installed?
it works for me hence why i really dont know at this point.
@dimitri.landerloos Hey I was able to accomplish what I needed thanks to your help. I went back and looked at a few of your other posts as well. Thanks again! Here are the final results:
11 Likes
Very happy to hear it! post your yaml it looks gorgeous
2 Likes
Love the look! Do you mind sharing the final code? Thx.
1 Like
Good day, I updated the below animation with ha-state-icon but it’s no longer working. Any guidance is much appreciated
type: custom:mushroom-entity-card
entity: '[[entity]]'
name: '[[name]]'
layout: horizontal
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
ha-state-icon {
{% if is_state('[[entity]]', 'on')%}
animation: rotation 2s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
you cant use ha-state-icon under mushroom-shape-icon anymore it seems.
try like this:
type: custom:mushroom-entity-card
entity: '[[entity]]'
name: '[[name]]'
layout: horizontal
tap_action:
action: toggle
card_mod:
style: |
ha-state-icon {
{% if is_state('[[entity]]', 'on')%}
animation: rotation 2s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
Yes, that works .
Thank you very much for your help.
1 Like
If you want to count which light from a special list of lights are “on” you can define a template-sensor like this:
#eingeschaltete_lichter:
- unique_id: eingeschaltete_lichter
state: "{{expand(state_attr('light.verwendete_lichter', 'entity_id'))|selectattr('state','eq','on')|map(attribute='entity_id')| reject('is_hidden_entity')|list|count|int(default=0)}}"
It counts the lights that are in state “on” and in group “light.verwendete_lichter”. You can create a group of lights as a helper direct from ui.
you could use a mushroom-chips-card for that. It will look like this:
Here is the yaml-code for that card:
type: custom:mushroom-chips-card
alignment: start
chips:
- type: template
content: Speicherschutz
tap_action: none
icon: mdi:shield-outline
card_mod:
style: |
ha-card {
padding: 0px !important;
border: none !important; #don`t show border line for that chip
font-size: 3.5rem !important; #set font-size for that chip
background: none !important; #don't show backgroud for that chip
}
- type: entity
entity: sensor.esp_jk_bms_temperature_sensor_1
icon_color: red
card_mod:
style: |
ha-card {
padding: 0px !important;
#border: none !important;
font-size: 2.5rem !important;
background: rgba(var(--rgb-primary-text-color), 0.05) !important;
}
- type: entity
entity: sensor.esp_jk_bms_temperature_sensor_2
icon_color: red
card_mod:
style: |
ha-card {
padding: 0px !important;
#border: none !important;
font-size: 2.5rem !important;
background: rgba(var(--rgb-primary-text-color), 0.05) !important;
}
1 Like
Hi, whats is wrong ?
card_mod:
style:
mushroom-shape-icon:
$: |
{% if is_state('script.sifao_2_hora','off') %}
ha-state-icon {
animation: spin 1s linear infinite;
}
{% else %}
{% endif %}
.: |
ha-card {
--secondary-text-color:
{% if is_state('script.sifao_2_hora','off') %}
green
{% else %}
red
{% endif %}
}don’t spin
Do post the full card yaml next time. makes it easier to trouble shoot.
but try like this. just replace the entities with your own
card_mod:
style: |
ha-state-icon {
{% if is_state('media_player.office_speaker','off') %}
animation: spin 1s linear infinite;
{% else %}
{% endif %}
}
ha-card {
--secondary-text-color:
{% if is_state('media_player.office_speaker','off') %}
green
{% else %}
red
{% endif %}
}
1 Like
Sure, here you go. If anyone takes it and cleans it up or does it more efficiently please let me know. I’m a big time beginner so this is all new to me. Having more fun learning how to do css and theme than actually setup my devices and use them 
type: custom:stack-in-card
cards:
- square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-light-card
entity: light.living_room_lights
name: Living room
show_brightness_control: true
tap_action:
action: toggle
icon_color: none
card_mod:
style:
mushroom-light-brightness-control$: |
mushroom-slider {
--bg-color: rgb(255,239,201) !important;
--main-color: rgb(255,224,130) !important;
}
.: |
mushroom-light-brightness-control {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
opacity: 1;
--control-height: 102px;
--control-border-radius: var(--ha-card-border-radius, 12px);
--rgb-disabled: var(--rgb-card-background-color);
}
mushroom-state-item {
z-index: 1;
max-width: fit-content;
margin-bottom: 0px;
pointer-events: none;
}
mushroom-shape-icon {
pointer-events: auto;
--shape-color: transparent !important;
--shape-color-disabled: transparent !important;
{% if is_state(config.entity, 'on') %}
--card-mod-icon: fapro:light-group-fill;
--card-mod-icon-color: rgb(115,92,0);
{% else %}
--card-mod-icon: fapro:light-group;
--card-mod-icon-color: rgb(31,31,31);
{% endif %}
}
ha-card {
--icon-symbol-size: 0.6em;
padding: 30px 10px !important;
width: 204% !important;
border-radius: 35px !important;
--card-primary-font-weight: 700;
--card-secondary-font-weight: 700;
--keep-background: true;
{% if is_state(config.entity, 'on') %}
--primary-text-color: rgb(115,92,0);
--secondary-text-color: rgb(115,92,0);
{% else %}
background: rgb(242,246,252);
--primary-text-color: rgb(31,31,31);
--secondary-text-color: rgb(31,31,31);
{% endif %}
}
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
tap_action:
action: toggle
entity: input_boolean.living_room_toggle
icon_color: 31,31,31
card_mod:
style: |
ha-card {
--chip-icon-size: 0.7em;
--chip-padding: 0px 6px;
--chip-height: 40px;
--chip-border-radius: 100px;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: white;
padding: 31px 23px 0px 0px;
}
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
- type: conditional
conditions:
- entity: input_boolean.living_room_toggle
state: 'on'
card:
type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.main_light
name: Ceiling light
show_brightness_control: true
tap_action:
action: toggle
icon_color: none
card_mod:
style:
mushroom-light-brightness-control$: |
mushroom-slider {
--bg-color: rgb(255,239,201) !important;
--main-color: rgb(255,224,130) !important;
}
.: |
mushroom-light-brightness-control {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
opacity: 1;
--control-height: 102px;
--control-border-radius: var(--ha-card-border-radius, 12px);
--rgb-disabled: var(--rgb-card-background-color);
}
mushroom-state-item {
z-index: 1;
max-width: fit-content;
margin-bottom: 0px;
pointer-events: none;
}
mushroom-shape-icon {
pointer-events: auto;
--shape-color: transparent !important;
--shape-color-disabled: transparent !important;
{% if is_state(config.entity, 'on') %}
--card-mod-icon: fapro:lightbulb-google-fill;
--card-mod-icon-color: rgb(115,92,0);
{% else %}
--card-mod-icon: fapro:lightbulb-google;
--card-mod-icon-color: rgb(31,31,31);
{% endif %}
}
ha-card {
--icon-symbol-size: 0.6em;
padding: 30px 10px !important;
margin: 10px 0px 0px 0px !important;
width: 98% !important;
border-radius: 35px !important;
--card-primary-font-weight: 700;
--card-secondary-font-weight: 700;
--keep-background: true;
{% if is_state(config.entity, 'on') %}
--primary-text-color: rgb(115,92,0);
--secondary-text-color: rgb(115,92,0);
{% else %}
background: rgb(242,246,252);
--primary-text-color: rgb(31,31,31);
--secondary-text-color: rgb(31,31,31);
{% endif %}
}
- type: custom:mushroom-light-card
entity: light.reading_light
name: Couch light
show_brightness_control: true
tap_action:
action: toggle
icon_color: none
card_mod:
style:
mushroom-light-brightness-control$: |
mushroom-slider {
--bg-color: rgb(255,239,201) !important;
--main-color: rgb(255,224,130) !important;
}
.: |
mushroom-light-brightness-control {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
opacity: 1;
--control-height: 102px;
--control-border-radius: var(--ha-card-border-radius, 12px);
--rgb-disabled: var(--rgb-card-background-color);
}
mushroom-state-item {
z-index: 1;
max-width: fit-content;
margin-bottom: 0px;
pointer-events: none;
}
mushroom-shape-icon {
pointer-events: auto;
--shape-color: transparent !important;
--shape-color-disabled: transparent !important;
{% if is_state(config.entity, 'on') %}
--card-mod-icon: fapro:lightbulb-google-fill;
--card-mod-icon-color: rgb(115,92,0);
{% else %}
--card-mod-icon: fapro:lightbulb-google;
--card-mod-icon-color: rgb(31,31,31);
{% endif %}
}
ha-card {
--icon-symbol-size: 0.6em;
padding: 30px 10px !important;
margin: 10px 0px 0px 5px !important;
width: 98% !important;
border-radius: 35px !important;
--card-primary-font-weight: 700;
--card-secondary-font-weight: 700;
--keep-background: true;
{% if is_state(config.entity, 'on') %}
--primary-text-color: rgb(115,92,0);
--secondary-text-color: rgb(115,92,0);
{% else %}
background: rgb(242,246,252);
--primary-text-color: rgb(31,31,31);
--secondary-text-color: rgb(31,31,31);
{% endif %}
}
The font is google sans and the icons are from googles material design icon database. Can save the svgs and use as custom icons.
18 Likes
Leaving this comment here, but i have since realised that because i am using Margin it doesnt look good an all screen sizes. so beware of that. it works on pc screen size but not on phone. you can probably play with the margins to get it to work on just a phone if that is all you want to use it for. but for now back to the drawing table for me on how to solve this problem
Add this:
margin: 31px 23px 0px 172px;
width: 44px;
border-radius: 100px !important;
to your below code block:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
tap_action:
action: toggle
entity: input_boolean.thermostat_dropdown
icon_color: 31,31,31
card_mod:
style: |
ha-card {
--chip-icon-size: 0.7em;
--chip-padding: 0px 6px;
--chip-height: 40px;
--chip-border-radius: 100px;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: white;
margin: 31px 23px 0px 172px;
width: 44px;
border-radius: 100px !important;
and remove your padding.
prevents what you currently have which is this:
instead becomes this:
No weird clicking around the chip 
7 Likes