That looks like might do the trick, tough, can I implement that on the theme, rather on each card?
Hey there,
need some help. I want to use the mushroom cover cards to control my KNX shutters in my house. In generell everything works. The problem is, that for the position slider, i need an inverted value, because in KNX 0% is fully open and for Home Assistant is 100% fully opened. Before i used the mushroom cover cards, i build the cards myself and for the slider is used a seperate entity with the following code:
cover:
- platform: template
covers:
cover_og_buero_inverted: ##BĆ¼ro
friendly_name: Buero Rolladen inverted
position_template: >
{{100 - (state_attr(ācover.og_buero_rolladenā,ācurrent_positionā)|int)}}
set_cover_position:
service: cover.set_cover_position
data_template:
entity_id: cover.og_buero_rolladen
position: >
{{100 - position}}
But in the mushroom cover card its not possible to use an seperate entity only for the slider.
Up/down/hold works perfectly with the buttons.
Hope you can help. 
No, sorry, I donāt have a github repo (I donāt know how to use it)
If you need some code, just ask.
I have already change my room cardsā¦ I canāt stopā¦
I am trying to remove the stack-in-card custom card, so I can edit my cards with the ui.
This is the result
still work in progress
3 Likes
Someone know if there is a collection of themes optimized for mushroom?
Or if someone want to share theirs custom theme.
2 Likes
Please share that code In that new version i only miss the fact the āsecondaryā icons are outside of the main card
I just asked for the repo because you always change so was a better way to keep an eye in the repo.
Keep the good work
How can i create an pop-up of the graph? i want an pop-up when i press on the icon. but tried some things buth nothing is happen. So if i press the icon i want to see the temperature of the room.
2 Likes
In the new version, I have just 2 Entities card and 2 chips card, 2 Entities card and 2 chips card, repeated.
The chips row are a little closer to the top to separate the room card
Here the first 2 row
square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-entity-card
entity: sensor.temperatura_soggiorno
icon: mdi:sofa-outline
icon_color: blue
name: Soggiorno
tap_action:
action: navigate
navigation_path: soggiorno
- type: custom:mushroom-entity-card
entity: sensor.temperatura_camera_da_letto
icon: mdi:bed-double-outline
icon_color: purple
name: Camera
tap_action:
action: navigate
navigation_path: camere
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(config.entity, 'heat_cool') %}
mdi:autorenew
{% elif is_state(config.entity, 'heat') %}
mdi:fire
{% elif is_state(config.entity, 'cool') %}
mdi:snowflake
{% elif is_state(config.entity, 'dry') %}
mdi:water-percent
{% elif is_state(config.entity, 'fan_only') %}
mdi:fan
{% else %}
mdi:air-conditioner
{% endif %}
entity: climate.soggiornoknx
icon_color: |-
{% if is_state_attr(config.entity,'hvac_action', 'cooling') %}
blue
{% elif is_state_attr(config.entity,'hvac_action', 'heating') %}
red
{% else %}
{% endif %}
tap_action:
action: more-info
- type: light
entity: light.tavolo_knx
content_info: none
tap_action:
action: toggle
- type: light
entity: light.isola_knx
content_info: none
tap_action:
action: toggle
- type: entity
entity: sensor.umidita_soggiorno_knx
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: -10px;
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(config.entity, 'heat_cool') %}
mdi:autorenew
{% elif is_state(config.entity, 'heat') %}
mdi:fire
{% elif is_state(config.entity, 'cool') %}
mdi:snowflake
{% elif is_state(config.entity, 'dry') %}
mdi:water-percent
{% elif is_state(config.entity, 'fan_only') %}
mdi:fan
{% else %}
mdi:air-conditioner
{% endif %}
entity: climate.cameradalettoknx
icon_color: |-
{% if is_state_attr(config.entity,'hvac_action', 'cooling') %}
blue
{% elif is_state_attr(config.entity,'hvac_action', 'heating') %}
red
{% else %}
{% endif %}
tap_action:
action: more-info
- type: light
entity: light.camera_da_letto_knx
content_info: none
tap_action:
action: toggle
- type: light
entity: light.lamp1_cloud_180911
content_info: none
icon: mdi:desk-lamp
tap_action:
action: toggle
- type: entity
entity: cover.camera_da_letto_tenda_alta_knx
content_info: none
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: -10px;
2 Likes
Ok i adjust your code a bit to have everything inside the same ācardā
square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-entity-card
entity: sensor.temperatura_soggiorno
icon: mdi:sofa-outline
icon_color: blue
name: Soggiorno
tap_action:
action: navigate
navigation_path: soggiorno
card_mod:
style: |
ha-card {
height:95px !important;
padding-top: 10px !important;
flex-direction: row !important;
justify-content: flex-start !important;
}
- type: custom:mushroom-entity-card
entity: sensor.temperatura_camera_da_letto
icon: mdi:bed-double-outline
icon_color: purple
name: Camera
tap_action:
action: navigate
navigation_path: camere
card_mod:
style: |
ha-card {
height:95px !important;
padding-top: 10px !important;
flex-direction: row !important;
justify-content: flex-start !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(config.entity, 'heat_cool') %}
mdi:autorenew
{% elif is_state(config.entity, 'heat') %}
mdi:fire
{% elif is_state(config.entity, 'cool') %}
mdi:snowflake
{% elif is_state(config.entity, 'dry') %}
mdi:water-percent
{% elif is_state(config.entity, 'fan_only') %}
mdi:fan
{% else %}
mdi:air-conditioner
{% endif %}
entity: climate.soggiornoknx
icon_color: |-
{% if is_state_attr(config.entity,'hvac_action', 'cooling') %}
blue
{% elif is_state_attr(config.entity,'hvac_action', 'heating') %}
red
{% else %}
{% endif %}
tap_action:
action: more-info
- type: light
entity: light.tavolo_knx
content_info: none
tap_action:
action: toggle
- type: light
entity: light.isola_knx
content_info: none
tap_action:
action: toggle
- type: entity
entity: sensor.umidita_soggiorno_knx
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: -40px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(config.entity, 'heat_cool') %}
mdi:autorenew
{% elif is_state(config.entity, 'heat') %}
mdi:fire
{% elif is_state(config.entity, 'cool') %}
mdi:snowflake
{% elif is_state(config.entity, 'dry') %}
mdi:water-percent
{% elif is_state(config.entity, 'fan_only') %}
mdi:fan
{% else %}
mdi:air-conditioner
{% endif %}
entity: climate.cameradalettoknx
icon_color: |-
{% if is_state_attr(config.entity,'hvac_action', 'cooling') %}
blue
{% elif is_state_attr(config.entity,'hvac_action', 'heating') %}
red
{% else %}
{% endif %}
tap_action:
action: more-info
- type: light
entity: light.camera_da_letto_knx
content_info: none
tap_action:
action: toggle
- type: light
entity: light.lamp1_cloud_180911
content_info: none
icon: mdi:desk-lamp
tap_action:
action: toggle
- type: entity
entity: cover.camera_da_letto_tenda_alta_knx
content_info: none
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: -40px;
}
2 Likes
Try this:
type: custom:swipe-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Licht
secondary: ''
icon: mdi:lightbulb
icon_color: yellow
layout: vertical
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: entities
entities:
- entity: light.alle_lichter
I think you were just missing the content row after your data row
2 Likes
thanks for your reply. ive got it working now like this. But to my surprise the swiper card doenst work with hold or double_tap action. There goes my idea for my dashboard 
Wanted to mostly create swiper cards in stacks with the browser mod popup.
Du u maybe know how i could auto entities (all lights .ie) within the pop up?
type: custom:swipe-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Licht
secondary: ''
icon: mdi:lightbulb
icon_color: yellow
layout: vertical
tap_action:
action: call-service
service: browser_mod.popup
data:
title: Lichter
content:
type: entities
entities:
- entity: light.tv_board
name: TV Board
- entity: light.hyperhdr
name: Ambilight
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Temperatur
secondary: ''
icon: mdi:thermometer
icon_color: blue
layout: vertical
tap_action:
action: navigate
navigation_path: temperatur
here you are, pop up with autoentities - it shows only the lights that are on
- type: template
icon: |
{% if is_state('sensor.total_lights_on', '0') %}
mdi:lightbulb-multiple-off
{% else %}
mdi:lightbulb-multiple
{% endif %}
icon_color: |
{% if is_state('sensor.total_lights_on', '0') %}
grey
{% else %}
amber
{% endif %}
entity: sensor.total_lights_on
content: '{{ states(''sensor.total_lights_on'') }} ,'
card_mod: null
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: WÅÄ
czone
content:
type: custom:auto-entities
filter:
include:
- domain: light
state: 'on'
exclude:
- domain: light
attributes:
type: browser_mod
- entity_id: '*gu10*'
card:
type: entities
show_header_toggle: false
target: {}
6 Likes
This is great! Would love to be able to do this with up to 4 buttons too, all for different light scenes.
There is a way to join the battery status on the same chip card with a person entity?
3 Likes
Hi Valdemar,
for this i use the custom: stack-in-card.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-entity-card
Greets
Basti
1 Like
Hello togeher,
I have a question.
I would like to move the two marked chips a little to the left. I have already tried a few things, but it was not successful.
Does anyone have any ideas?
- type: custom:mushroom-chips-card
alignment: end
style: |
ha-card {
--chip-box-shadow: 1px 1px 1px 1px lightgrey;
--chip-background: none;
--chip-spacing: 10px;
--chip-padding: 20px;
}
chips:
- type: action
tap_action:
action: call-service
service: timer.start
data: {}
target:
entity_id: timer.restlauftzeit_sauna
icon: mdi:play
- type: action
tap_action:
action: call-service
service: timer.finish
data: {}
target:
entity_id: timer.restlauftzeit_sauna
icon: mdi:stop
Thanks
Basti
try with margin-left:
card_mod:
style: |
ha-card {
margin-left: 20px;
}
Thanks for your reply. If i copy your code 1:1 without doing anything to it it shows me the following. I also tried to adapt to my entities but the result is the same.
you need to set the indentation correct
ĆÆcon should be at the same level as type, then you need to undo all off below lines,
please copy your code, and I will try to coorect it for you, then you will be able to do similar stuff on your own
1 Like