Does anyone have a good input datetime UI selector? I’ve seen a few for time only but I’d like a nice visual way of selecting a date and time using a helper that’s not the rubbish entity version.
hi @PskNorz @dimitri.landerloos
Brilliant card! I just tried your code and a few other peoples and no matter what I do the card does not seem to over on top of each other properly. For example I can see your values are overlaid nicely onto the graph yet no matter what I do my values always sit above so the car ends up much larger then most examples…
None of them overlay ont op of each other?
I feel like there is some other HACs pFront End plugin for some custom CSS or something I am missing?
PS. I am brand new to HA and am just trying to read through this thread (Wow I have never seen a thread so large) to figure out things as I go…
First things first you will need card mod from HACS.
you will also need stack in card from HACS.
from looking at it, that looks like its about it 
2 Likes
OK I just found it literally after writing the post… I was missing the “Card Mod” plugin!
Sorry guys
2 Likes
Thanks so much for replying… I think this thread is brilliant to learn and get ideas. There are so many people on here that know their stuff.
I am finding it quite an uphill battle trying to learn the syntax for YAML and what I can and can’t do with it all but the imagination of people on here and what they have done is crazy!
You can do some really cool stuff with Card Mod so enjoy that journey as it allows you to modify all cards with CSS styling 
to help with that for mushroom cards specifically i made this thread here:
but this is not meant to help with the yaml part, just the CSS part
that is brilliant… I am getting lost trying to find what guides/documenation to read…
Re: YAML, understood! I have JS coding experience and thought I would be able to use that but YAML seems a bit different…
PS you nailed it with the card mod…
Hoping this means I can try and get my person cards laid out properly taking up much less space now
thanks again!!! 
1 Like
Happy to help! you might like the button card by @RomRider then. you can use JS templates in some parts of that card:
1 Like
OK this looks brilliant! Thank you again!
Hello! How can I make the gear button be to the right of the mushroom-template-card? Like on the screen below?
Thanks
Current card code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Увлажнитель
secondary: >-
{% if states(entity) == 'off' %}
Выключено | Целевая влажность {{ state_attr(entity,
'humidifier.target_humidity') }} %
{% else %}
Включено | Целевая влажность {{ state_attr(entity,
'humidifier.target_humidity') }} %
{% endif %}
icon: mdi:air-humidifier
icon_color: |-
{% if states(entity) == 'off' %}
{% else %}
green
{% endif %}
entity: humidifier.deerma_jsq2w_c041_humidifier
tap_action:
action: toggle
multiline_secondary: true
layout: horizontal
fill_container: true
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:cog
tap_action:
action: call-service
service: browser_mod.popup
target: {}
data:
dismissable: true
autoclose: false
title: Настройка увлажнителя
content:
type: custom:stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: light.deerma_jsq2w_c041_indicator_light
name: Световой индикатор
tap_action:
action: toggle
double_tap_action:
action: none
layout: vertical
- type: custom:mushroom-entity-card
entity: switch.deerma_jsq2w_c041_alarm
icon: mdi:alarm-light
tap_action:
action: toggle
double_tap_action:
action: none
layout: vertical
fill_container: true
layout: horizontal
Add mode: horizontal to your stack in card.
You may want to add the card mod that i added to each card too, to make the layout look a bit nicer, but up to you
Code
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Увлажнитель
secondary: >-
{% if states(entity) == 'off' %}
Выключено | Целевая влажность {{ state_attr(entity,
'humidifier.target_humidity') }} %
{% else %}
Включено | Целевая влажность {{ state_attr(entity,
'humidifier.target_humidity') }} %
{% endif %}
icon: mdi:air-humidifier
icon_color: |-
{% if states(entity) == 'off' %}
{% else %}
green
{% endif %}
entity: humidifier.deerma_jsq2w_c041_humidifier
tap_action:
action: toggle
multiline_secondary: true
layout: horizontal
fill_container: true
card_mod:
style: |
ha-card {
width: max-content;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:cog
tap_action:
action: call-service
service: browser_mod.popup
target: {}
data:
dismissable: true
autoclose: false
title: Настройка увлажнителя
content:
type: custom:stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: light.deerma_jsq2w_c041_indicator_light
name: Световой индикатор
tap_action:
action: toggle
double_tap_action:
action: none
layout: vertical
- type: custom:mushroom-entity-card
entity: switch.deerma_jsq2w_c041_alarm
icon: mdi:alarm-light
tap_action:
action: toggle
double_tap_action:
action: none
layout: vertical
fill_container: true
layout: horizontal
card_mod:
style: |
ha-card {
width: fit-content;
right: -90px;
}
2 Likes
Hi,
I’m trying to use mushroom card with card_mod and few things not working. what I’m doing wrong here why only few things works and few not works.
font size not working
font color not working
icon change not working
THX
type: custom:mushroom-entity-card
entity: switch.garden_lights_l1
name: only_mushroom-entity-card
layout: vertical
fill_container: false
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:lamp
card_mod:
style: |
:host {
color: white;
text-align: left;
font-size: 20px;
--card-mod-icon-color:
{% if states(config.entity)=='on' %}
yellow;
color: red;
--card-mod-icon: mdi:car;
{% else %}
green;
--card-mod-icon: mdi:lamp;
{% endif %}
}
Hi, check out my guide below to find out how to style each element of the mushroom cards with card mod.
Its important with css that you are specific about which element you want to change. Changing things globally with :host will not always work or will sometimes have unintended behaviour.
Thanks a lot
1 Like
I’ve looked at the topic but couldn’t fix my issue.
simple grid with mushroom entity card not working on testing change icon.
why? what i’m doing wrong here?
square: false
type: grid
cards:
- type: custom:mushroom-entity-card
entity: switch.guest_bathroom_lights_l1
layout: vertical
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:mushroom-off
card_mod:
style: |
ha-state-icon {
--card-mod-icon: mdi:car;
}
columns: 3
Move the card mod over to the card you are actually styling. Like this:
square: false
type: grid
cards:
- type: custom:mushroom-entity-card
entity: switch.guest_bathroom_lights_l1
layout: vertical
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:mushroom-off
card_mod:
style: |
ha-state-icon {
--card-mod-icon: mdi:car;
}
columns: 3
thanks it’s working.
i can’t believe that i failed because of the tabs and spaces.
is there any good website for learning how to code yaml for beginners?
Well what you are doing with card mod is actually CSS.
The way that i have learned tends to be reading the documentation of the cards i install thoroughly. All of the options tend to be clearly explained
1 Like
Hello,
I’m sorry, but I can’t understand why my cookie, with your example 
doesn’t rotate when I use it on my HA ?
(I try to animate my chip icon)
Check out the updated animations here:
for your chip you should just be able to change it to ha-state-icon instead of ha-icon.
if you have multiple chips it may start to get more complex
if you need more help feel free to send me a direct message
1 Like