Yep, added one for you.
1 Like
You can do it like this:
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: sensor.lounge_sensor_temperature
state_not: 'null'
chip:
type: entity
entity: sensor.lounge_sensor_temperature
1 Like
If you want to use the original aspect ratio, you can do it like this:
type: custom:mushroom-template-card
picture: /local/formula1/flags/United_Arab_Emirates.jpg
primary: ABU DHABI GRAND PRIX 2022
secondary: 18 NOV 2022 - 20 NOV 2022
layout: vertical
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
height: auto !important;
}
.: |
ha-card {
font-family: "Formula1-regular";
--card-primary-font-size: 16px;
--card-secondary-font-size: 12px;
}
:host {
--mush-icon-border-radius: 6px;
}
A work in progress with Netflix/FireTV-AndroidTV page. It will include :
- A live view of AndroidTV screen
- Fast remote control
- Start Netlix shows
- Tv Usage statistics
- App starting buttons
- Alexa integration of non amazon store contents
- Bypass netflix auth. screen and start show directly
- tv and all other IR controls can be made from the page
This is a work in progress and wiki page will be ready soon.
10 Likes
Thanks for adding the correct Yaml code!
So I created something similar, without changing your config and when I look at my mobile…I don’t have the issue you’re experiencing 
The only change I’ve made, is that I use the vertical-stack-in-card instead.
Someone who can help to make the slider less in height?
Any advise?
I have 2 side by side in one column in the mobile screen. I think your screenshot is just 1 over the full screen, not?
p.s. strange that you have this bar behind the icons.
Hi, can you explain how create all sensors? thank you
I just took a screenshot of my mobile phone screen.
I don’t have a dashboard made for mobile or whatsoever. I took only your config, changed stack-in-card to vertical-stack-in-card and amended the sensors to my personal sensors. That’s it 
I absolut love this! You have helped me so much and it looks so great. There is just one thing I can’t figure out. I want to have a background color in the card and also animate the Icon. I got both working separately, but I can’t figure out how to get both at the same time.
type: custom:mushroom-template-card
primary: '{{ state_attr(''binary_sensor.warning_blaubeuren_stadt_1'',''headline'') }}'
secondary: '{{ state_attr(''binary_sensor.warning_blaubeuren_stadt_1'',''description'') }}'
icon: mdi:alert-circle
entity: binary_sensor.warning_blaubeuren_stadt_1
multiline_secondary: true
icon_color: white
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;;
}
@keyframes ping {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-white), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes blink {
100% {opacity: 0;}
}
mushroom-state-info$: |
{% if (states.binary_sensor.warning_blaubeuren_stadt_1.attributes.severity=='Severe')%}
ha-card {
background: red;
--primary-text-color: AliceBlue;
--secondary-text-color: white
}
{% endif %}
This is my current try. Some help would be greatly appreciated
1 Like
Try something like this:
type: custom:mushroom-template-card
primary: '{{ state_attr(entity, ''headline'') }}'
secondary: '{{ state_attr(entity, ''description'') }}'
icon: mdi:alert-circle
entity: binary_sensor.warning_blaubeuren_stadt_1
multiline_secondary: true
icon_color: white
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;;
}
@keyframes ping {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-white), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes blink {
100% {opacity: 0;}
}
.: |
ha-card {
{% if state_attr(config.entity, 'severity') == 'Severe') %}
background: red;
--primary-text-color: AliceBlue;
--secondary-text-color: white
{% endif %}
}
Nice man & can you share code pleas ?
Thank you so much! It worked perfectly.
1 Like
Looking at the new state home proposed default layout, I loved the nav bar at the bottom of the screen for easier navigation.
Any idea on how to approach a static nav bar at the bottom of the screen? Especially useful for quick and easy mobile navigation? Can it be done with this theme or is that a larger HACS integration needed?
1 Like
it is not finished yet. I will when its complete.
Greetings to you all. I have been to figure out how to make this card work.
with my netatmo climate ratiators, but no luck i get no blinking ratiator icon.
here is my template code, what am i doing wrong here? thanks in advanced.
- type: template
entity: climate.living_room
content_info: none
use_light_color: false
card_mod: null
icon: |2-
{% if is_state_attr("climate.living_room", "hvac_action", "heating") %}
red
{% if state=='heating' %}
mdi:radiator
{% elif state=='idle' %}
mdi:radiator-disabled
{% endif %}
icon_color: |2-
{% if is_state_attr("climate.living_room", "hvac_action", "heating") %}
{% if state=='heating' %}
red
{% elif state=='idle' %}
black
{% endif %}
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
box-shadow: 0px 0px;
animation: rotation linear infinite;
{% if states('climate.living_room') == 'heating' %}
animation-duration: 3s;
{%- else -%}
{%- endif %}
template
alignment: center
Its possible to create something similar but its limited to your dashboard and in order for the bar to stick to the bottom screen the dashboard page needs to be longer than what’s visible (ie. scrollable)
Sticky Nav Bar
type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-template-card
primary: Home
icon: mdi:home
tap_action:
action: navigate
navigation_path: home
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
- type: custom:mushroom-template-card
primary: Media
icon: mdi:play-box-multiple-outline
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
--shape-color: none;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
- type: custom:mushroom-template-card
primary: Energy
icon: mdi:lightning-bolt-outline
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
--shape-color: none;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
- type: custom:mushroom-template-card
primary: Map
icon: mdi:map-outline
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
--shape-color: none;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
card_mod:
style: |
:host {
z-index: 999;
position: sticky;
position: -webkit-sticky;
bottom: 0;
}
ha-card {
background: rgb(30,30,30);
padding-bottom: 15px;
margin: 0px -8px -10px -8px;
border-radius: 0px;
}
10 Likes
Thank you.
1 Like
I have this media player card with buttons to select radio stations, everything works great.
How can I set the volume to 10% when I press one of the buttons?
square: false
columns: 1
type: grid
cards:
- type: custom:vertical-stack-in-card
cards:
- type: grid
square: false
columns: 1
cards:
- type: custom:mushroom-media-player-card
entity: media_player.living_room
use_media_info: true
media_controls:
- play_pause_stop
- previous
- next
collapsible_controls: true
volume_controls:
- volume_set
show_volume_level: false
fill_container: false
icon: mdi:music
card_mod:
style: |
ha-card {
{% if not is_state(config.entity, 'off') %}
background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color),0.5);
{% endif %}
#--icon-symbol-size: 32px;
#--icon-size: 64px;
}
- type: grid
square: false
columns: 4
cards:
- type: custom:mushroom-template-card
primary: Topradio
secondary: ''
icon: mdi:music
tap_action:
action: call-service
service: media_player.select_source
data:
source: TOPradio
target:
device_id: f68de1583e7b807342d53504d0dbe200
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
--icon-symbol-size: 32px;
--icon-size: 64px;
}
- type: custom:mushroom-template-card
primary: MNM
secondary: ''
icon: mdi:music
tap_action:
action: call-service
service: media_player.select_source
data:
source: VRT MNM
target:
device_id: f68de1583e7b807342d53504d0dbe200
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
--icon-symbol-size: 32px;
--icon-size: 64px;
}
Kind regards
Kurt
4 Likes