Thanks for the help. I think I figured out why it’s happening. Not sure how to fix it yet. It’s the theme that is set. I switch to a different theme and all the card_mods worked. My best guess is there is something defined in the HKI Default theme that is causing some sort of conflict
must be then. but !important should override most themes unless the theme itself has everything set to !important.
Something like this where you are making the chips slightly smaller to fit might work (but they are very small now, so might be hard to tap if that is your intention):
Code
square: false
type: grid
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: WZ
subtitle: com eco night
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1px outset rgb(255, 191, 0, 0.5) !important;
padding: 10px 0px 0px 1px !important;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: EZ
subtitle: com eco night
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1px outset rgb(255, 191, 0, 0.5) !important;
padding: 10px 0px 0px 1px !important;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: BA
subtitle: com eco night
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1px outset rgb(255, 191, 0, 0.5) !important;
padding: 10px 0px 0px 1px !important;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: KÜ
subtitle: com eco night
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1px outset rgb(255, 191, 0, 0.5) !important;
padding: 10px 0px 0px 1px !important;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
alignment: center
columns: 4
1 Like
Oh yes, this is much clearer and also prettier 
In the current final configuration it looks like this with me.
How could I make the not “active” chips still grey?
square: false
type: grid
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: com eco night
card_mod:
style: |
ha-card {
--title-font-size: 10px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 3px outset rgb(255, 191, 0, 0.4) !important;
padding: 2px 0px 0px 1px !important;
height: 20px !important;
width: 120px !important;
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: com eco night
card_mod:
style: |
ha-card {
--title-font-size: 10px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 3px outset rgb(255, 191, 0, 0.4) !important;
padding: 2px 0px 0px 1px !important;
height: 20px !important;
width: 120px !important
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: com eco night
card_mod:
style: |
ha-card {
--title-font-size: 10px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 3px outset rgb(255, 191, 0, 0.4) !important;
padding: 2px 0px 0px 1px !important;
height: 20px !important;
width: 120px !important
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: WZ
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1.5px outset rgb(255, 191, 0, 0.4) !important;
padding: 0px 0px 0px 1px !important;
height: 25px !important;
width: 120px !important;
}
alignment: center
vertical-align: middle
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.heizung_wz_comfort
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
width: 20px !important;
}
- type: entity
entity: input_boolean.heizung_wz_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.heizung_wz_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ESZ
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1.5px outset rgb(255, 191, 0, 0.4) !important;
padding: 0px 0px 0px 1px !important;
height: 25px !important;
width: 120px !important;
}
alignment: center
vertical-align: middle
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.heizung_esz_comfort
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
width: 20px !important;
}
- type: entity
entity: input_boolean.heizung_esz_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.heizung_esz_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: KÜ
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1.5px outset rgb(255, 191, 0, 0.4) !important;
padding: 0px 0px 0px 1px !important;
height: 25px !important;
width: 120px !important;
}
alignment: center
vertical-align: middle
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.heizung_kueche_comfort
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
width: 20px !important;
}
- type: entity
entity: input_boolean.heizung_kueche_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.heizung_kueche_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: SZ
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1.5px outset rgb(255, 191, 0, 0.4) !important;
padding: 0px 0px 0px 1px !important;
height: 25px !important;
width: 120px !important;
}
alignment: center
vertical-align: middle
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.heizung_sz_comfort
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
width: 20px !important;
}
- type: entity
entity: input_boolean.heizung_sz_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.heizung_sz_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ANNE
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1.5px outset rgb(255, 191, 0, 0.4) !important;
padding: 0px 0px 0px 1px !important;
height: 25px !important;
width: 120px !important;
}
alignment: center
vertical-align: middle
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.heizung_anne_comfort
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
width: 20px !important;
}
- type: entity
entity: input_boolean.heizung_anne_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.heizung_anne_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: BEN
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1.5px outset rgb(255, 191, 0, 0.4) !important;
padding: 0px 0px 0px 1px !important;
height: 25px !important;
width: 120px !important;
}
alignment: center
vertical-align: middle
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.heizung_ben_comfort
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
width: 20px !important;
}
- type: entity
entity: input_boolean.heizung_ben_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.heizung_ben_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: TIM
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1.5px outset rgb(255, 191, 0, 0.4) !important;
padding: 0px 0px 0px 1px !important;
height: 25px !important;
width: 120px !important;
}
alignment: center
vertical-align: middle
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.heizung_tim_comfort
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
width: 20px !important;
}
- type: entity
entity: input_boolean.heizung_tim_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.heizung_tim_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: WAKÜ
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1.5px outset rgb(255, 191, 0, 0.4) !important;
padding: 0px 0px 0px 1px !important;
height: 25px !important;
width: 120px !important;
}
alignment: center
vertical-align: middle
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.heizung_wz_comfort
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
width: 20px !important;
}
- type: entity
entity: input_boolean.heizung_wz_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.heizung_wz_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: STUDIO
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1.5px outset rgb(255, 191, 0, 0.4) !important;
padding: 0px 0px 0px 1px !important;
height: 25px !important;
width: 120px !important;
}
alignment: center
vertical-align: middle
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.heizung_sz_comfort
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
width: 20px !important;
}
- type: entity
entity: input_boolean.heizung_sz_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.heizung_sz_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
}
alignment: center
columns: 3
Unfortunately, I have another question today. I somehow do not manage
here to swap the secondary with the original room temperature sensor
Habe das hier in verschiedensten Varianten probiert.
secondary_info: '{{states(sensor.wand_wz_temperature) | int }}°C'
You cant use templates in card that isnt a template card.
you will need to use card mod to achieve this.
i would do something like this:
before:
after:
type: custom:mushroom-climate-card
entity: climate.bedroom_heating_real
show_temperature_control: true
name: Bedroom Heating
secondary_info: state
card_mod:
style:
mushroom-state-info$: |
.secondary {
color: transparent !important;
position: relative;
}
.secondary:after {
content: '{{state_attr('climate.bedroom_heating','hvac_action') | capitalize }} - {{states('sensor.bedroom_temperature_humidity_temperature')}} °C';
color: var(--secondary-text-color);
position: absolute;
left: 0px;
}
maybe the attribute hvac_action isnt right for you, but check what attribute your climate entity gives and use that 
1 Like
I’m really going crazy … the result is so crass … must say again dear THANK YOU for it
So my work currently looks like this:
Here is a screenshot of the macbook pro - top slightly offset
It will then look correct on the iPhone:
can you show me the finished code for the top section that is offset?
very much
square: false
type: grid
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: com eco night
card_mod:
style: |
ha-card {
--title-font-size: 10px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 3px outset rgb(255, 191, 0, 0.4) !important;
padding: 2px 0px 0px 1px !important;
height: 20px !important;
width: 120px !important;
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: com eco night
card_mod:
style: |
ha-card {
--title-font-size: 10px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 3px outset rgb(255, 191, 0, 0.4) !important;
padding: 2px 0px 0px 1px !important;
height: 20px !important;
width: 120px !important
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: com eco night
card_mod:
style: |
ha-card {
--title-font-size: 10px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 3px outset rgb(255, 191, 0, 0.4) !important;
padding: 2px 0px 0px 1px !important;
height: 20px !important;
width: 120px !important
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: WZ
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1.5px outset rgb(255, 191, 0, 0.4) !important;
padding: 0px 0px 0px 1px !important;
height: 25px !important;
width: 120px !important;
}
alignment: center
vertical-align: middle
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.heizung_wz_comfort
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
width: 20px !important;
}
- type: entity
entity: input_boolean.heizung_wz_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.heizung_wz_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ESZ
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1.5px outset rgb(255, 191, 0, 0.4) !important;
padding: 0px 0px 0px 1px !important;
height: 25px !important;
width: 120px !important;
}
alignment: center
vertical-align: middle
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.heizung_esz_comfort
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
width: 20px !important;
}
- type: entity
entity: input_boolean.heizung_esz_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.heizung_esz_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: KÜ
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1.5px outset rgb(255, 191, 0, 0.4) !important;
padding: 0px 0px 0px 1px !important;
height: 25px !important;
width: 120px !important;
}
alignment: center
vertical-align: middle
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.heizung_kueche_comfort
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
width: 20px !important;
}
- type: entity
entity: input_boolean.heizung_kueche_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.heizung_kueche_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: SZ
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1.5px outset rgb(255, 191, 0, 0.4) !important;
padding: 0px 0px 0px 1px !important;
height: 25px !important;
width: 120px !important;
}
alignment: center
vertical-align: middle
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.heizung_sz_comfort
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
width: 20px !important;
}
- type: entity
entity: input_boolean.heizung_sz_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.heizung_sz_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ANNE
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1.5px outset rgb(255, 191, 0, 0.4) !important;
padding: 0px 0px 0px 1px !important;
height: 25px !important;
width: 120px !important;
}
alignment: center
vertical-align: middle
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.heizung_anne_comfort
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
width: 20px !important;
}
- type: entity
entity: input_boolean.heizung_anne_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.heizung_anne_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: BEN
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1.5px outset rgb(255, 191, 0, 0.4) !important;
padding: 0px 0px 0px 1px !important;
height: 25px !important;
width: 120px !important;
}
alignment: center
vertical-align: middle
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.heizung_ben_comfort
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
width: 20px !important;
}
- type: entity
entity: input_boolean.heizung_ben_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.heizung_ben_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: TIM
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1.5px outset rgb(255, 191, 0, 0.4) !important;
padding: 0px 0px 0px 1px !important;
height: 25px !important;
width: 120px !important;
}
alignment: center
vertical-align: middle
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.heizung_tim_comfort
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
width: 20px !important;
}
- type: entity
entity: input_boolean.heizung_tim_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.heizung_tim_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: WAKÜ
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1.5px outset rgb(255, 191, 0, 0.4) !important;
padding: 0px 0px 0px 1px !important;
height: 25px !important;
width: 120px !important;
}
alignment: center
vertical-align: middle
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.heizung_wz_comfort
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
width: 20px !important;
}
- type: entity
entity: input_boolean.heizung_wz_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.heizung_wz_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
}
alignment: center
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: STUDIO
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1.5px outset rgb(255, 191, 0, 0.4) !important;
padding: 0px 0px 0px 1px !important;
height: 25px !important;
width: 120px !important;
}
alignment: center
vertical-align: middle
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.heizung_sz_comfort
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
width: 20px !important;
}
- type: entity
entity: input_boolean.heizung_sz_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.heizung_sz_eco
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
border: 0.6px outset rgb(255, 191, 0, 0.5) !important;
height: 20px !important;
}
alignment: center
columns: 3
only caused by you having a fixed width set on your title cards.
change it to:
width: 100% !important;
and it should work fine.
OK and how do I scale the 3 chips card correctly.
So that they are quite small and still round respectively, have the same aspect ratio?
I’m having the same problem with my Switch/Entity buttons, which are currently on
the row. I want 5 buttons per row
Upper row is with `width: 100% !important;
Lower row with the arbitrary height/width, which then
but does not work consistently on all devices.
Its hard to get things to scale correctly for both mobile and larger displays dynamically. but the way that it can be achieved (but with more code and technically not dynamic) is using media queries. this checks the size of the display being under a certain size and then uses the mobile size you set, and then you can have another media query with another set of sizes for larger displays. like this:
On large display:
On Small Display:
Code
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:test-tube
card_mod:
style: |
@media only screen and (max-width: 768px) {
ha-card {
/* Small Display */
min-width: 0px !important;
width: 20px !important;
height: 20px !important;
border-radius: 50% !important;
justify-content: center;
}
}
@media only screen and (min-width: 768px) {
ha-card {
/* Large Display */
min-width: 0px !important;
width: 50px !important;
height: 50px !important;
border-radius: 50% !important;
justify-content: center;
}
}
- type: template
icon: mdi:test-tube
- type: template
icon: mdi:test-tube
alignment: center
FYI the /* */ is not required it is just a comment in the code
1 Like
It’s very tricky. But it works
With this I will now design my Switch Buttons … try
But what comes to my mind, with custom:button-card I have created templates in the RAW
so I can save lines of code. By the whole card_mod:: styles come nevertheless quite nicely
a lot of code lines.
How do you do that or how do you handle it?
And last question for today. I would like to add a box-shadow: effect to the on state in the
Mush-Enity a box-shadow: effect behind?
How do I do this with as little code as possible ?
You dont. you could use the decluttering card from HACS - i think it works with card mod code. but otherwise you just deal with the fact that the code is long…
OK many thanks… i will test it
… is a good idea from custom:button-card with the templates
Maybe there is also for Mushroom and others once this possibility to find for recurring
code blocks, to insert them as template abbreviations in the main code.
If you have another tip for the box-shadow: effect for the status “on”, you would help me a lot again.
For a few days I can only say - i like, i love Mushroom-Card
Thanks for all you work - Thank you for letting me learn so many new things
Before I get to the box-shadow-on effect, I have one more problem,
if you compare the screenshot Macbook vs iPhone, is
the icon (circle) on the iPhone is too far up?
Can I solve something like that? Or where did I make the mistake?
iphone
macbook
Im not going to help you unless you write in english please. Other people need to be able to read your question and my answer.
OK 
Whereby I think that other users can also take a lot from these examples.
Because thereby also much is explained and example codes flow in. But good
I was already personally wg. the originated Views addressed and have help the user pn
Yes. Same way that you set a different width with the @media query. You can set anything to be a different size on different displays.
So you could change the height of the card itself beetween the 2 to to account for it needing more space on the iphone.
You could make the icon itself different sizes between the 2 displays. Something like this:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:test-tube
card_mod:
style: |
@media only screen and (max-width: 768px) {
mushroom-shape-icon {
/* Small Display */
--icon-size: 30px;
--icon-symbol-size: 10px;
}
}
@media only screen and (min-width: 768px) {
mushroom-shape-icon {
/* Large Display */
--icon-size: 90px;
--icon-symbol-size: 40px;
}
- type: custom:mushroom-template-card
icon: mdi:test-tube
- type: custom:mushroom-template-card
icon: mdi:test-tube
2 Likes
I had trouble changing the main icon background color with
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: orange !important;
}
This worked. On the latest version of Firefox at least.
card_mod:
style: |
mushroom-shape-icon {
--shape-color: orange !important;
}