No special sauce here. Just using the mushroom theme. Unless you meant something else?
Hi everyone, I’ve been trying to use the standard theme icon colors for a template mushroom card. This is as far as I’ve gotten:
card_mod:
style:
mushroom-card:
mushroom-state-item:
mushroom-state-info: |
mushroom-shape-icon {
--icon-color: var(--paper-item-icon-active-color) !important;
--shape-color: rgba(var(--rgb-blue), 0.2) !important;
--shape-color-disabled: none !important;
}
… the icon_color is the correct theme color, yellow. However, I don’t know how to make the circle shape-color the same color, --paper-item-icon-active-color. If I replace the --rgb-blue it does not seem to recognize it.
Any thoughts?
I only applied the theme to my lovelace views but updating the main theme to mushroom fixed it, thanks!
1 Like
–paper-item-icon-active-color is HEX while rgba() requires RGB color.
That makes sense @rhysb . When I replace the entire shape-color like this:
card_mod:
style:
mushroom-card:
mushroom-state-item:
mushroom-state-info: |
mushroom-shape-icon {
--icon-color: var(--paper-item-icon-active-color) !important;
--shape-color: var(--paper-item-icon-active-color) !important;
--shape-color-disabled: none !important;
}
I get this:
Any idea how to achieve the 20% opacity for the shape-color like the standard mushroom card icon?
Ok who would like an animated weather card in which the animations changes dynamically with the weather conditions? For example if the weather turns out to rainy the animation also changes to rainy.
Here is the video of how it works
And here are the icons that I used in the card. Feel free to download them. After downloading don’t forget to change the path in the code. And also for the weather card you to have to install custom weather card from HACS. It is also animated
Weather Card:
Anfd finally the code :
type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: grid
columns: 1
square: false
cards:
- type: vertical-stack
cards:
- type: picture-entity
entity: weather.colak_ismail_2
show_state: false
show_name: false
state_image:
clear-night: /local/png2/weather/clear-night2.png
cloudy: /local/png2/weather/cloudy.gif
exceptional: /local/png2/weather/exceptional.png
fog: /local/png2/weather/fog3.gif
hail: /local/png2/weather/hail2.gif
lightning: /local/png2/weather/lightning3.gif
lightning-rainy: /local/png2/weather/lightning-rainy.jpeg
partlycloudy: /local/png2/weather/partly-cloudy.gif
pouring: /local/png2/weather/pouring.gif
rainy: /local/png2/weather/rainy.gif
snowy: /local/png2/weather/snowy.gif
snowy-rainy: /local/png2/weather/snowy-rainy.gif
sunny: /local/png2/weather/sunny.gif
windy: /local/png2/weather/windy.gif
windy-variant: /local/png2/weather/windy.gif
tap_action:
action: call-service
service: script.turn_on
data: {}
target:
entity_id: script.browser_mode_pop_up_close
hold_action:
action: none
theme: Mushroom
card_mod:
style: |
:host {
--ha-card-background: transparent;
}
ha-card {
margin-top: auto;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 5px;
padding: 15px;
width: auto;
}
- type: custom:weather-card
entity: weather.home
number_of_forecasts: '6'
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.1);
--paper-item-icon-active-color: #2196f3;
--paper-item-icon-color: #6f6f6f;
}
6 Likes
Thanks! Can you also please post the code for the script? 
script.browser_mode_pop_up_close
Thanks
I’m struggling to style a custom:mushroom-title-card card (Which center justfies and wraps my text nicely) The yelllow and font size are ignored.
type: custom:mushroom-title-card
title: ''
subtitle: |
{{ states('sensor.clone_wars')}}
alignment: center
card_mod:
style: |
ha-card {
color: yellow;
font-size: 18px;
}
I’ve also played with a template card, which does style as expected. But I can’t get it to justify center and the text sometimes scrolls off. (The quotes in the text are from the opening crawl of Clone Wars : ) )
type: custom:mushroom-template-card
primary: |
{{ states('sensor.clone_wars')| string }}
card_mod:
style: >
mushroom-card {
text-align: center;
--primary-text-color: yellow;
background: black
center 0px;
height: 40px;
width: 600px;
--card-primary-font-size: 20px;
--primary-font-size: 100px;}
}
Thanks
[edit] - I should probably add that my CSS knowledge is slim and most bits are just cherry picked from others code.
[edit 27 days later] This works :
type: markdown
content: |
{{ states('sensor.clone_wars')}}
aligment: center
theme: Mushroom
card_mod:
style: |
ha-card {
color: yellow;
font-size: 25px;
text-align: center;
background: center / cover url('/local/space.jpg') no-repeat;
}
Your error description is a bit…not there. 
What doesn’t load? The pictures you download and put correctly in your www folder and linked correctly to?
Show us your code and point out what really doesn’t work.
This is a wonderful Project, I love it.
But i have a question about the ‘climate card’. Is it possible to get a slider instant of the ‘+’ and the “-” or additionally to it. I need the card for my Heating Thermostats (Danfoss LC13). We place the Thermostat every day from 4 degree to about 19 or 22 degree or back from high Temperature to 4 degree. With the ‘+’ Button we have to touch it too often, so we can’t use it 
1 Like
I have a few conditional chips on top of my page to see my open doors, widows and lights. Now I would like to see the entities of the chips in a popup when I click on that conditional chip. Can anybody help?
1 Like
i do something similar with lights. I have a all lights chip, that when clicked on opens a browser mod pop up. The post is linked below. Let me know how I can help
Install browser mod, then you can do what you want. That is also what I do.
This is my popup for lights. It uses auto-entities to populate with Mushroom Light cards:
- type: conditional
conditions:
- entity: group.all_lights
state: 'on'
chip:
type: template
icon: mdi:lightbulb
content: >-
{{ expand(states.group.all_lights) | selectattr( 'state', 'eq',
'on') | list | count }}
entity: group.all_lights
icon_color: grey
tap_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID:
- this
title: Lights On
card:
type: custom:auto-entities
filter:
include:
- group: group.all_lights
state: 'on'
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
--ha-card-box-shadow: 0px;
}
- entity_id: group.all_lights
state: 'on'
options:
type: custom:mushroom-light-card
layout: horizontal
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.03);
--ha-card-box-shadow: 0px;
}
exclude: []
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
23 Likes
Hey,
Had a look at your setup. Does the kiosk input Boolean call for a script? 
Any chance you could share it? I’ve been looking for a good way of going in and out of kiosk mode - if it’s even possible
Not the kios mode is set up using the entity settings to dynamically change based on the input boolean. I’ve just mapped the input boolean to my chip bar so I can always toggle my header and other things.
kiosk_mode:
entity_settings:
- entity:
input_boolean.kiosk_header: 'off'
hide_header: true
- entity:
input_boolean.kiosk_sidebar: 'off'
hide_sidebar: true
- entity:
input_boolean.kiosk_menubutton: 'off'
hide_menubutton: true
- entity:
input_boolean.kiosk_overflow: 'off'
hide_overflow: true
1 Like
Nice! Thank you
Here is from my own setup
When I double click the menu chip it activates kiosk mode and when I hold, it disables.
Here is the code for the first line.
`square: false
columns: 1
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: null
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.chip_dropdown
state: 'off'
chip:
type: template
icon_color: ''
icon: mdi:menu
tap_action:
action: call-service
service: input_boolean.turn_on
data: {}
target:
entity_id: input_boolean.chip_dropdown
double_tap_action:
action: call-service
service: input_boolean.turn_on
data: {}
target:
entity_id: input_boolean.kiosk_mode
hold_action:
action: call-service
service: input_boolean.turn_off
data: {}
target:
entity_id: input_boolean.kiosk_mode
- type: conditional
conditions:
- entity: input_boolean.chip_dropdown
state: 'off'
chip:
type: template
entity: binary_sensor.ewelink_ds01_19b22025_ias_zone
icon: |-
{% set state=states(entity) %}
{% if state=='off' %}
mdi:lock
{% elif state=='on' %}
mdi:lock-open-variant
{% else %}
grey
{% endif %}
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='off %}
green
{% elif state=='on' %}
red
{% else %}
grey
{% endif %}
- type: conditional
conditions:
- entity: input_boolean.chip_dropdown
state: 'off'
chip:
type: template
entity: group.allhouse
content: |
{{ states('sensor.open_light_total') }}
icon: |-
{% set state=states(entity) %}
{% if state=='off' %}
mdi:lightbulb
{% elif state=='on' %}
mdi:lightbulb
{% else %}
mdi:door
{% endif %}
icon_color: |-
{% set state=states(entity) %}
{% if state=='off' %}
grey
{% elif state=='on' %}
amber
{% else %}
grey
{% endif %}
tap_action:
action: more-info
double_tap_action:
action: call-service
service: light.turn_off
data: {}
target:
entity_id: light.all_house_lights
- type: conditional
conditions:
- entity: input_boolean.chip_dropdown
state: 'off'
- entity: switch.all_house_switches
state: 'on'
chip:
type: template
entity: switch.all_house_switches
content: |
{{ states('sensor.open_switch_total') }}
icon: |-
{% set state=states(entity) %}
{% if state=='off' %}
mdi:light-switch-off
{% elif state=='on' %}
mdi:light-switch
{% else %}
mdi:door
{% endif %}
icon_color: |-
{% set state=states(entity) %}
{% if state=='off' %}
grey
{% elif state=='on' %}
amber
{% else %}
grey
{% endif %}
tap_action:
action: more-info
double_tap_action:
action: call-service
service: switch.turn_off
data: {}
target:
entity_id: switch.all_house_switches
- type: conditional
conditions:
- entity: input_boolean.chip_dropdown
state: 'off'
chip:
type: alarm-control-panel
entity: alarm_control_panel.ha_alarm
tap_action:
action: navigate
navigation_path: alarm
- type: conditional
conditions:
- entity: input_boolean.zone_google_maps
state: 'off'
- entity: input_boolean.chip_dropdown
state: 'off'
chip:
type: template
content: |
{{ states('sensor.google_ev_is') }} dk.
entity: sensor.google_ev_is
icon: mdi:map
icon_color: amber
double_tap_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID:
- this
title: Trafik
card:
type: vertical-stack
cards:
- type: grid
columns: 1
square: false
cards:
- type: vertical-stack
cards:
- type: iframe
url: >-
https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d96336.99948573063!2d28.9780563504497!3d41.01363228367648!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e6!4m5!1s0x14cac706417cc3d9%3A0x510da53686119327!2zw4dvbGFrIMSwc21haWwgU2suLCBTdWFkaXllLCAzNDc0MCBLYWTEsWvDtnkvxLBzdGFuYnVs!3m2!1d40.962209!2d29.0830187!4m5!1s0x14cab653d1296785%3A0x2af5a6a24d8d396a!2zR2F5cmV0dGVwZSwgWcSxbGTEsXogUG9zdGEgQ2QuLCBCZcWfaWt0YcWfL8Swc3RhbmJ1bA!3m2!1d41.065672299999996!2d29.008391099999997!5e0!3m2!1str!2str!4v1658418919304!5m2!1str!2str%22%20width=%22600%22%20height=%22450%22%20style=%22border:0;%22%20allowfullscreen=%22%22%20loading=%22lazy%22%20referrerpolicy=%22no-referrer-when-downgrade
title: Google Maps
aspect_ratio: 80%
tap_action:
action: call-service
service: script.turn_on
data: {}
target:
entity_id: script.browser_mode_pop_up_close
hold_action:
action: none
theme: Mushroom
tap_action:
action: more-info`
I connected kiosk mode to an input boolean named “input_boolean.kiosk_mode”.
And to activate kiosk mode you have to enter boolean details to the raw configuration editor of my main page.
The config is as follows:
kiosk_mode:
entity_settings:
- entity:
input_boolean.kiosk_mode: 'on'
hide_sidebar: true
- entity:
input_boolean.kiosk_mode: 'off'
hide_sidebar: false
- entity:
input_boolean.kiosk_mode: 'on'
hide_header: true
- entity:
input_boolean.kiosk_mode: 'off'
hide_header: false
This should look like as in the below example
Remember to place inout boolean kiosk details at top before view.
Hope this helps.
7 Likes
This looks really good, however, im having issues getting the image/background to show up. What url do i write when i upload it to /config?