Yes, it also works very slowly for me and does not respond on the phone or tablet, very strange why
Will do, thank you for the input!
Thank you @andyblac
height: 200px !important; did it 
With the adjustment of the card size, the icon becomes very small. Is there a way to adjust the icon location / offset after force its size?
Hello, I’m trying to do one card but need your help because I’m a beginner 
This is what I got so far:
What I want to change is the lights information on the chips card, I want it to be a conditional card/entity, if no lights of that group are on then it doesn’t show up, if any light is on it shows up, and instead of telling the state ON I want it to show up the number of lights turned on in that group.
Here is the chip card code:
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:door
entity: light.hall_de_entrada_luz_hall_95
icon_color: >-
{% set count =
states|selectattr('entity_id','in',state_attr('light.luzes_entrada','entity_id'))|selectattr('state','eq','on')|list|count
%} {% if count > 0 %} orange {%endif%}
tap_action:
action: navigate
navigation_path: entrada
hold_action:
action: toggle
multiline_secondary: true
primary: Entrada
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.temperatura_entrada_2
icon_color: red
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: entity
entity: light.luzes_entrada
icon_color: amber
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
alignment: center
Anyone can help me please?
Thanks.
1 Like
I manage to do the first part, conditional card. Now I need help changing the on state to number os devices in that group turned on…
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:door
entity: light.hall_de_entrada_luz_hall_95
icon_color: >-
{% set count =
states|selectattr('entity_id','in',state_attr('light.luzes_entrada','entity_id'))|selectattr('state','eq','on')|list|count
%} {% if count > 0 %} orange {%endif%}
tap_action:
action: navigate
navigation_path: entrada
hold_action:
action: toggle
multiline_secondary: true
primary: Entrada
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.temperatura_entrada_2
icon_color: red
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: conditional
conditions:
- entity: light.luzes_entrada
state: 'on'
chip:
type: entity
icon_color: amber
entity: light.luzes_entrada
icon: mdi:lightbulb-group
tap_action:
action: toggle
alignment: center
1 Like
Here is my code which I know needs tidying up but it’ll give you a number when any of the lights listed are on.
type: conditional
conditions:
- entity: light.downstairs_lights
state: 'on'
chip:
type: template
content: |-
{% set total = 0 %}
{% if is_state('light.hallway_driveway_light_1', 'on') %}
{% set total = total + 1 %}
{% endif %}
{% if is_state('light.kitchen_lights', 'on') %}
{% set total = total + 1 %}
{% endif %}
{% if is_state('light.living_dining_room_lights_1', 'on') %}
{% set total = total + 1 %}
{% endif %}
{% if is_state('light.living_dining_room_lights_2', 'on') %}
{% set total = total + 1 %}
{% endif %}
{% if is_state('light.wc_light_fan_1', 'on') %}
{% set total = total + 1 %}
{% endif %}
{% if is_state('light.gym_lights_1', 'on') %}
{% set total = total + 1 %}
{% endif %}
{% if is_state('light.gym_lights_2', 'on') %}
{% set total = total + 1 %}
{% endif %}
{% if is_state('light.pantry_lights', 'on') %}
{% set total = total + 1 %}
{% endif %}
{% if is_state('light.downstairs_landing_light', 'on') %}
{% set total = total + 1 %}
{% endif %}
{{total}} lights are on
icon: mdi:lightbulb-group
icon_color: |-
{% if is_state('light.hallway_driveway_light_1', 'on') %}
orange
{% elif is_state("light.kitchen_lights", "on") %}
orange
{% elif is_state("switch.kitchen_cabinet_lights", "on") %}
orange
{% elif is_state("light.living_dining_room_lights_1", "on") %}
orange
{% elif is_state("light.living_dining_room_lights_2", "on") %}
orange
{% elif is_state("light.gym_lights_1", "on") %}
orange
{% elif is_state("light.gym_lights_2", "on") %}
orange
{% elif is_state("light.pantry_lights", "on") %}
orange
{% elif is_state("light.wc_light_fan_1", "on") %}
orange
{% elif is_state("light.downstairs_landing_light", "on") %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
double_tap_action:
action: none
entity: light.downstairs_lights
hold_action:
action: none
try now readjusting the icon size try % instead of px, you can do above 100% ie 140% to compensate for the resize of card.
Does anyone have a nice pop up card design that displays everything that is on, I’m looking for inspiration
hi, did you finally get that bar to work? I really like the design of it but I can’t get it to work completely. thanks :))
Since the new 2.8 series where the title card was moved to ha-card the height is suddenly very off with me, messing up my layouts on my tablet displays. The height is a lot bigger, especially when I only use the subtitle (to create a smaller title). See example below. Created this realtime by downgrading to 2.7.1 and refreshing cache properly.
Just to confirm:
- this is the only yaml for the card, so no card_mod here:
type: custom:mushroom-title-card
title: ''
subtitle: Weer
- I do have a theming in place with the mushroom css variables for the title where only the padding differs from the default values I found on the mushroom CSS github. Could it be that the padding isn’t correctly used?
mush-title-padding: 12px 12px 6px
mush-title-spacing: 12px
mush-title-font-size: 24px
mush-title-font-weight: normal
mush-title-line-height: 1.2
I use this:
mush-title-padding: 8px 8px 0px
to put the title quite close to the card, but just test the value yourself.
1 Like
I now updated my theme to this. Limiting all these values a little. Now my layout is restored.
It is odd though that the ha-card had such different padding values than the previous card.
mush-title-padding: 8px 8px 0px
mush-title-spacing: 8px
mush-title-line-height: 1.1
Here is the light chip on my room card.
Replace group.lights_office with a light group
- type: template
entity: group.lights_office
icon: '{{ iif(is_state(entity, "on"), "mdi:lightbulb-on", "mdi:lightbulb") }}'
icon_color: '{{ iif(is_state(entity, "on"), "amber", "disabled") }}'
card_mod:
style:
.: |
{% if is_state(config.entity, "on") %}
ha-card:after {
content: "{{ expand(config.entity) | selectattr('state', '==', 'on') | list | count }}";
position: absolute;
color: var(--amber-color);
font-weight: bolder;
top: -2px;
right: 2px;
font-size: 12px;
}
{% endif %}
9 Likes
Hello you all,
when using Mushroom Chips, how is it possible to have the name of the entity and the value of the entity shown in the chip?
Example:
HVAC 22°C
I think it probably only works using a template. But how? Thank you in advance!
Under ha-card add box-shadow: none;
All good! It was actually a mushroom bug. It was fixed in the latest version 
Love your work!
Apparently I lack knowledge on the subject.
Where can I add the Rooms JSON file?
And also the code for “Roborock Rooms”?
I need your help
What would be the best way to assign / layout the two chip cards in the template card
i want them to be like that
The Coding at the moment looks like:
type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Homeassistant
secondary: '{{ states(''sensor.docker_homeassistant_status'') }}'
icon: mdi:home-assistant
icon_color: blue
badge_icon: >
{% if is_state('update.wud_container_local_homeassistant', 'on') %}
mdi:update
{% elif is_state('update.wud_container_local_homeassistant',
'unknown') %}
mdi:help
{% else %}
disabled
{% endif %}
badge_color: >
{% if is_state('update.wud_container_local_homeassistant', 'on') %}
disabled
{% elif is_state('update.wud_container_local_homeassistant',
'unknown') %}
orange
{% else %}
transparent
{% endif %}
multiline_secondary: false
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
style: |
ha-card {
margin-top: 5px;
margin-right: -10px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:chip
tap_action:
action: navigate
navigation_path: home
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:memory
tap_action:
action: navigate
navigation_path: home