Didnt work
Oh, right. I think I discovered that too. You can just use a hyphen - as a placeholder.
1 Like
Iām just trying to replicate this the below. Just with a temperature in front of it (and not a lock, obviously).
Buddy, this may offend you, butā¦
Your plan to have these fancy cards without having any coding background and/or patience is like getting your driverās liscence and insisting to buy a ferrari: you canāt handle it! (And probably crash it the first hour).
Hereās something to start with although almost all guys shared their code with similar cards before:
type: horizontal-stack
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Hallways
secondary: up & down
icon: mdi:light-recessed
entity: light.MAYBEAGROUPOFYOURHALLWAYLIGHTS
icon_color: |-
{% if is_state('light.MAYBEAGROUPOFYOURHALLWAYLIGHTS', 'on') %}
orange
{% endif %}
fill_container: false
multiline_secondary: true
tap_action:
action: navigate
navigation_path: CARDTOYOURHALLWAYCOMBINATIONVIEW
hold_action:
action: toggle
double_tap_action:
action: none
- square: false
columns: 4
type: grid
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: null
double_tap_action:
action: none
content: 'ā{{ states(''sensor.DOWNSTAIRSHALLWAYTEMP') | float }}Ā°C'
entity: sensor.DOWNSTAIRSHALLWAYTEMP
tap_action:
action: more-info
hold_action:
action: none
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: template
icon: null
double_tap_action:
action: none
content: 'ā{{ states(''sensor.UPSTAIRSHALLWAYTEMP'') | float }}Ā°F'
entity: sensor.UPSTAIRSHALLWAYTEMP
tap_action:
action: more-info
hold_action:
action: none
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
alignment: center
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Whatever
secondary: Room
icon: mdi:light-recessed
entity: light.WHATEVERROOM
icon_color: |-
{% if is_state('light.WHATEVERROOM', 'on') %}
orange
{% endif %}
fill_container: false
multiline_secondary: true
tap_action:
action: navigate
navigation_path: WHATEVERROOM
hold_action:
action: toggle
double_tap_action:
action: none
- square: false
columns: 4
type: grid
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: null
double_tap_action:
action: none
content: 'ā{{ states(''sensor.WHATEVERROOM_1'') | float }}Ā°F'
entity: sensor.WHATEVERROOM_1
tap_action:
action: more-info
hold_action:
action: none
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: template
icon: null
double_tap_action:
action: none
content: 'ā{{ states(''sensor.WHATEVERROOM_2') | float }}Ā°F'
entity: sensor.WHATEVERROOM_2
tap_action:
action: more-info
hold_action:
action: none
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
alignment: center
And now itās your turn toā¦
ā¦read this whole thread.
ā¦read about Horizontal Stack Card.
ā¦read about Stack-In-Card
ā¦read about templating
ā¦read about card-mod.
ā¦read this whole thread again.
We all want it all and of course rightnow but that aināt gonna work! Just copying code of everyone is the redneck-repair-version auf coding. And as I for myself have zero coding background I learned things the hard way AND had a steep learning curve as I just read and tested everything over and over again.
3 Likes
That bottom row is a Mushroom Chips card. You would use a Template or Weather chip for temperature.
To template, youāll need to learn templating as @RodgerDodger mentioned. Itās actually not too difficult once you learn the basic structure. Pay attention to using {{ vs {% and start with otherās working templates substituting your own entities to start.
That and a couple stack-in cards to wrap around the Template and Chips card is all you would need to get the look and function in the screenshot.
Card_mod (and themes) would allow you to further customize the look as youāre seeing with some of these more recent posts.
Also, YouTube is your friend 
1 Like
Iām having a bit of trouble with this card:
- type: custom:mushroom-entity-card
entity: switch.tv
icon: mdi:lightbulb
name: Entertainment Group
tap_action:
action: toggle
style: |
ha-card {
background-color: rgba(255, 255, 255, .1);
}
It runs the switch.tv to on and everything runs as expected problem is itās not turning it off. Hereās the entire thing. Any suggestions/help would be greatly appreciated!!! Thank you!
tv switch ā
- platform: template
switches:
tv:
value_template: "{{ is_state('media_player.vizio_smartcast', 'on') }}"
turn_off:
service: script.turn_off
target:
entity_id: script.tv_off
turn_on:
service: script.turn_on
target:
entity_id: script.tv_on
tv script ā
tv_on:
alias: turn on tv
sequence:
- service: media_player.turn_on
data:
entity_id: media_player.shield
- service: light.turn_on
data:
entity_id: light.tv_stand_2
- service: media_player.turn_on
data:
entity_id: media_player.vizio_smartcast
- delay: "00:01:00"
- service: media_player.select_source
target:
entity_id: media_player.vizio_smartcast
data:
source: HDMI-3
- service: switch.turn_on
data:
entity_id: switch.living_room_ambient_tv
- delay: "00:01:30"
tv_off:
alias: turn off tv
sequence:
- service: light.turn_off
data:
entity_id: light.tv_stand_2
- service: switch.turn_off
data:
entity_id: switch.living_room_ambient_tv
- service: media_player.turn_off
data:
entity_id: media_player.vizio_smartcast
- service: media_player.turn_off
data:
entity_id: media_player.shield
Buddy, yes, your response was offensive. Iāve read through this thread and Iāve seen how incredibly helpful you can be; so this was a surprise. (Who said I didnāt have patience and tenacity?)
I was missing a few key details: Stack-In-Card and card-mod. Iāve read up on them and am off and running now. Thank you.
Maybe donāt assume someoneās aptitude and willingness to learn next time? Ironically, you mentioned it in your last statement. You learned things the hard way. You were me once scratching your head trying to pull stuff together. Thatās all Iām doing here.
While somewhat crass, I appreciate the response nonetheless. You set me on the proper course.
1 Like
From a fellow aviation enthusiast, thank you. I was missing Stack-In-Card and card-mod reading. For some reason, I had it in my head that this was all done with mushroom. Thanks again.
p.s. Mushroom and YT is what got me down this rabbit hole! Well, that and Vera alienating its original userbase and forcing them to look elsewhere. Happy to be here now.
2 Likes
Anyone had any luck inserting the Mushroom theme variables into a non-Mushroom theme? Specifically, Iām trying to affect font sizes. As a test, I copied all of the font-size variables from here, inserted them in my current theme (iOS) and set them really high, but it doesnāt do anything.
mush-title-font-size: 44px
mush-subtitle-font-size: 44px
mush-card-primary-font-size: 44px
mush-card-secondary-font-size: 44px
mush-chip-font-size: 44em
EDIT: Nevermind, apparently reloading themes requires an HA restart or calling the frontend.reload_themes service. I looked under Developer Tools|YAML, but it wasnāt there (seemingly because those only reload backend things). Anyways, those font settings are working like a champ now!
Yes it is a steep learning curveā¦ thatās why I [am not a coder either] will post my successes to share with others who may have a similiar issue. I ask may questions and about 50% go unanswered and I realize that no one is obligted to help but I do appreciate those who do without making me feel like an idiot.
My educational background is a teacherā¦ my profession is I own my own contracting business. It took me years to learn php, js and now Iām trying to learn this. It takes some longer then others but if someone is trying helping them is and/or sharing knowledge is what furthers all of this.
I Thank you for help youāve given me and yes people do want it right now but if not now then when?
I am in process of writing things that take a few moving pieces to make them work and I have just posted one of them today that I have a question about. If no one helps thatās okay sooner or later Iāll figure it outā¦ or I wonāt right now. Not the end of the world. But you canāt learn if you donāt at least try. So if someone is trying no matter if I think theyāre over their head or not Iāll still help them if I can.
We all started somewhere.
3 Likes
Hang in there!! Mushroom cards are awesome. Iām just starting myself and am very happy with the results so far. I do constant searches here and on Google looking for examplesā¦ things I can try or taking ideas from what I find to better enhance my setup.
Youāre doing greatā¦ keep it up!
These are the 3 bedrooms in my house. Iām happy so far with the results but I know Iāll want to make changes as soon as I get some time under my belt with thisā¦
1 Like
I think it is doneā¦ at least for now. 
3 Likes
As weāre all living in a world where everybody gets offended by nearly everything.
The point I wanted to state is:
Donāt want/try too much from the beginning or you maybe get frustrated because nothing works.
Climb the ladder rung by rung. Of course you can set your goal to a no handed superman tailwhip over a burning RadioShack but youād probably better off by starting to ride without training wheels, right?
Maybe it was a stressful morning but it felt like: gimme the code now!
Keep it up, read a lot, be disappointed because trial and error sucks sometimes or your SO doesnāt give a damn about that wobbling green mushy whatever thing you handcoded in a 5h evening session butā¦ be happy as a kid if that one tweak you almost googled back to Alta Vista now works and put on that honest little smile on your face.
TL;DR
And now back to work! Code has to be coded!
9 Likes
This would be awesome!
Can you change the switch state in Developer Tools or even see the state? Does the service call in Developer Tools show you something?
Do them scripts work if you fire them individually?
Looking for some advice on how best to handle this problem. Or should I be looking for other solutions with other cards?
I have been trying to get a mushroom template card to produce the results I am after and I am almost there.
This card changes entity value (run time) based on whether the AC is idle or cooling. My styling also changes the background color when cooling. (Will update for heating and idle later if this gets sorted.)
Now the problem: I find no way to center that value on the card. Tried various card-mod styles I have researched and none seem to apply. Example below.
If it is NOT possible to center this template card, is there another suggested card where I can still template the states I need to show?
Cheers!
- type: custom:mushroom-template-card
primary: |
{% set state=states('sensor.hvac_action')%}
{% if state == 'idle' %}
{{states('sensor.idle_time_last_hh_mm_ss')}}
{% elif state == 'cooling' %}
{{states('sensor.cool_time_last_hh_mm_ss')}}
{% endif %}
secondary: null
icon: null
style: |
ha-card {
--card-primary-font-size: 28px;
--card-primary-font-weight: normal;
{% set state=states('sensor.hvac_action')%}
{% if state == 'idle' %}
{% elif state == 'cooling' %}
--ha-card-background: rgba(0, 190, 255, 0.1);
{% endif %}
}
Was asked to share my welcome card code by @Boostin4HP on the HA Facebook group, so here you go!
-Center weather chip navigates to the weather page
-Right temp pops up thermostat card and shows cooling/heating/idle states with colors on icon
-Google calendar card
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.weatherflow_air_temperature_2
icon: mdi:sun-thermometer-outline
icon_color: yellow
content: '{{ states(entity) }} Ā°F'
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
card_mod: null
alignment: center
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: weather
entity: weather.weatherflow_day_based_forecast_2
show_conditions: true
show_temperature: false
tap_action:
action: navigate
navigation_path: weather
hold_action:
action: more-info
double_tap_action:
action: none
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.thermostat_temperature
content: '{{ states(entity)}} Ā°F'
icon_color: |-
{% set state=states('sensor.hvac_action') %}
{% if state=='cooling' %}
blue
{% elif state=='heating' %}
red
{% elif state=='idle' %}
grey
{% endif %}
icon: mdi:thermometer
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Thermostat
card:
type: thermostat
entity: climate.z_wave_thermostat_2
hold_action:
action: none
double_tap_action:
action: none
alignment: end
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
alignment: end
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: custom:mushroom-title-card
title: >-
{% if now().hour < 5 %} Night{% elif now().hour < 12 %} Morning{% elif
now().hour < 18 %} Afternoon{% else %} Evening{% endif %}, {{user}}!
subtitle: Welcome to Home Assistant
- type: custom:atomic-calendar-revive
entities:
- entity: calendar.your_calendar_here
name: null
enableModeChange: true
firstDayOfWeek: 1
maxDaysToShow: 1
refreshInterval: 240
showLoader: false
hideFinishedEvents: true
showLocation: false
hideDuplicates: true
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
icon: mdi:flask
icon_color: red
layout: vertical
tap_action:
action: navigate
navigation_path: lab
hold_action:
action: none
double_tap_action:
action: none
secondary: Lab
multiline_secondary: false
- type: custom:mushroom-template-card
icon: mdi:outdoor-lamp
layout: vertical
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
entity: input_boolean.auto_back_porch_lights
icon_color: orange
secondary: >-
BP Auto
{{ iif(is_state('input_boolean.auto_back_porch_lights', 'on'), '',
'off') }}
multiline_secondary: true
- type: custom:mushroom-template-card
icon: mdi:home-assistant
icon_color: blue
layout: vertical
tap_action:
action: navigate
navigation_path: system
hold_action:
action: none
double_tap_action:
action: none
secondary: System
- type: custom:mushroom-template-card
icon: mdi:coach-lamp
layout: vertical
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
icon_color: green
secondary: >-
FP Auto
{{ iif(is_state('input_boolean.auto_front_porch_lights', 'on'), '',
'off') }}
entity: input_boolean.auto_front_porch_lights
multiline_secondary: true
fill_container: false
- type: custom:mushroom-template-card
icon: mdi:lightbulb-on
icon_color: purple
layout: vertical
tap_action:
action: navigate
navigation_path: lights
hold_action:
action: none
double_tap_action:
action: none
secondary: ' Lights'
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
2 Likes
It was actually your nice blue scene card but I love the welcome card too!
Well, thatās embarrassing lol. Hereās the scene card:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Scenes
secondary: All
icon: mdi:home-roof
icon_color: white
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
background: #3d5afe
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
icon: mdi:power-sleep
icon_color: white
layout: vertical
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.good_night_lights
secondary: Night
- type: custom:mushroom-template-card
icon: mdi:television
icon_color: white
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.tv_lights
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
secondary: Media
- type: custom:mushroom-template-card
layout: vertical
entity: script.1590801199735
icon: mdi:lightbulb-on
icon_color: white
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.living_area_lights_100
double_tap_action:
action: none
hold_action:
action: none
secondary: 'On'
card_mod:
style: |
ha-card {
--chip-box-shadow: 0px 0px;
background: #3d5afe
}
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
card_mod: null
style: |
ha-card {
background: #3d5afe
}
2 Likes
Thanks! I fixed the box shadow issue, hereās the code.
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Scenes
secondary: All
icon: mdi:home-roof
icon_color: white
- type: custom:stack-in-card
mode: horizontal
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:power-sleep
icon_color: white
layout: vertical
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.good_night_lights
secondary: Night
- type: custom:mushroom-template-card
icon: mdi:television
icon_color: white
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.tv_lights
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
secondary: Media
- type: custom:mushroom-template-card
layout: vertical
entity: script.1590801199735
icon: mdi:lightbulb-on
icon_color: white
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.living_area_lights_100
double_tap_action:
action: none
hold_action:
action: none
secondary: 'On'
style: |
ha-card {
box-shadow: none;
background: #3d5afe
}
style: |
ha-card {
background: #3d5afe
}
3 Likes