Probably using browser mod and a combo of conditional cards. You can add a drop down select to any card using card mod and layout card and then create helpers for all your sources.
1 Like
Txs. I’ll try this as I have all the helpers already.
Have you been able to disable the 'more page dialogue?
Also @rolfokevin this may answer another query I had. Where do you add this code to? A blank YAML card or a particular mushroom card?
Might be obvious but how are refreshing?
Have your seen this post?
it was already here, but wanted to share the FINAL dashboard of mine, i spent days and nights to work on the shadowing, borders, backgrounds etc, and I hope this is the final one!
PS please stop sharing new ideas in this topic 
!!! (joking of course)
6 Likes
Sure, it is not mine. I saw it in this thread (I believe) but cannot remember who did this. Thus credits go to John “Mushroom” Doe, kudos man (or woman )
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Front Door
secondary: >-
{% if is_state('sensor.nuki_frontdoor_door_security_state','Opened &
Unlocked')%}
Open and Unlocked
{% elif is_state('binary_sensor.nuki_frontdoor_door_open','on') %}
Door Open
{% elif is_state('lock.nuki_frontdoor_lock','unlocked') %}
Unlocked
{% else %}
Closed & Locked
{% endif%}
icon: >-
{% if is_state('sensor.nuki_frontdoor_door_security_state','Opened &
Unlocked')%}
mdi:door-open
{% elif is_state('binary_sensor.nuki_frontdoor_door_open','on') %}
mdi:door-open
{% elif is_state('lock.nuki_frontdoor_lock','unlocked') %}
mdi:lock-open
{% else %}
mdi:door-closed-lock
{% endif%}
layout: vertical
icon_color: >-
{% if is_state('sensor.nuki_frontdoor_door_security_state','Closed &
Locked')%}
green
{% else %}
red
{% endif%}
badge_icon: >
{% set battery_level = (states(entity) | int / 10) | round(0) | int * 10
%} {% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
badge_color: |-
{% set battery_level = states(entity) | int %}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
tap_action:
action: more-info
entity: sensor.nuki_frontdoor_battery
hold_action:
action: toggle
- type: custom:mushroom-lock-card
entity: lock.nuki_frontdoor_lock
name: Front Door
primary_info: none
secondary_info: none
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
{% if is_state('sensor.nuki_frontdoor_door_security_state','Closed & Locked')%}
background: rgba(101,170,91,0.2);
{% else %}
background: rgba(226,84,66,0.2);
{% endif %}
}
I use Nuki lock which have the door and lock status in one sensor but it should work with two sensors too.
You can add the player name to the Mushroom Media Card like this:
type: custom:mushroom-media-player-card
entity: media_player.currently_playing
use_media_info: true
icon_type: icon
collapsible_controls: true
show_volume_level: false
volume_controls:
- volume_set
- volume_buttons
media_controls:
- previous
- play_pause_stop
- next
icon: mdi:play
card_mod:
style:
mushroom-state-info$: |
.primary:before {
content: "{{ state_attr(state_attr(config.entity, "active_child"), "friendly_name") }} - ";
}
This example is based on a Universal Media Player and displays the active players name.
4 Likes
I’ve been tinkering with this. You can blend the album art like this:
Mushroom Media Card with faded album art:
type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon: mdi:play
use_media_info: true
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
{% set media_type = state_attr(config.entity, 'media_content_type') %}
--card-mod-icon:
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'movie' %}
mdi:movie-open
{% elif media_type == 'music' %}
mdi:music
{% elif media_type == 'playlist' %}
mdi:music
{% else %}
mdi:play
{% endif %};
}
ha-card {
{% if not is_state(config.entity, 'off') and not is_state(config.entity, 'idle') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
background-size: 50%, cover;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
{% endif %}
}
Update: Change background-blend-mode to saturation. This looks a bit nicer and allows me to remove the stack-in-card.
22 Likes
Just a little tweak to the Mushroom Climate Card to animate the fan icon:
type: custom:mushroom-climate-card
entity: climate.air_conditioner
name: Air Conditioner
show_temperature_control: true
hvac_modes:
- heat_cool
- heat
- cool
- dry
- fan_only
card_mod:
style: |
mushroom-shape-icon {
--card-mod-icon:
{% if is_state(config.entity, 'heat_cool') %}
mdi:autorenew
{% elif is_state(config.entity, 'heat') %}
mdi:fire
{% elif is_state(config.entity, 'cool') %}
mdi:snowflake
{% elif is_state(config.entity, 'dry') %}
mdi:water-percent
{% elif is_state(config.entity, 'fan_only') %}
mdi:fan
{% else %}
mdi:air-conditioner
{% endif %};
display: flex;
{% if is_state(config.entity, 'fan_only') %}
animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
18 Likes
Great how the albumart fades across the card. Noticed the entity media_player.currently_playing. You mind elaborating on this as this doesn’t look familiar?
1 Like
Thank you. Most of this has been done, but I’ll give the remaining ideas a try.
Looks great. Out of curiosity is that a slider of sorts on the right? What does it do?
it is only sound / voice slider from my phone . while taking the screenshot
4 Likes
Hi everyone, this is a great thread to get new ideas. I wanted to show a feature I made for my CCT LED strips. I wanted to have the ability to turn on/off, as well as select the colour temperature without fiddling with a slider. This is what I came up with. Uses a combination of stack-in card, grid cards, and mushroom templates.
Happy to share the YAML if someone is interested.
5 Likes
great!! yes, please YAML. 
Here’s the code for the first entity, the others are a copy-paste with just the entity id changed.
- type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: rgba(28,28,28,0.6)
}
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 90% 10%
cards:
- type: custom:mushroom-light-card
entity: light.living_room_strip
fill_container: true
show_brightness_control: true
show_color_control: false
show_color_temp_control: false
use_light_color: true
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: action
icon_color: blue
tap_action:
action: call-service
service: light.turn_on
data:
color_temp: 154
target:
entity_id: light.living_room_strip
icon: mdi:lightbulb
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-blue), 0.2);
}
- type: custom:mushroom-chips-card
chips:
- type: action
icon_color: amber
icon: mdi:lightbulb
tap_action:
action: call-service
service: light.turn_on
data:
color_temp: 267
target:
entity_id: light.living_room_strip
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-amber), 0.2);
}
- type: custom:mushroom-chips-card
chips:
- type: action
icon_color: orange
icon: mdi:lightbulb
tap_action:
action: call-service
service: light.turn_on
data:
color_temp: 500
target:
entity_id: light.living_room_strip
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-orange), 0.2);
}
Here is a visualization to understand the sections of the card:
8 Likes
If my fan has 6 speeds. Is there a way to use the slider on the fan card to choose which speed I want?
I currently have 6 seperate buttons on card
for example 1-16% would be speed 1
17-33% woudl be speed 2
and so on.
1 Like
Another option is to use the template card and media card (whiteout icon, primary info and secondary info) and use the stack card. Than you don’t need to use card mod and are flexible where what info is presented.
for example:
type: custom:stack-in-card
keep:
margin: true
cards:
- square: false
columns: 1
type: grid
cards:
- type: custom:mushroom-template-card
primary: |-
{% set s = state_attr(entity, 'source') %}
{% if s %} Spotify - {{s}}
{% else %} Spotify
{% endif %}
secondary: |-
{% set a = state_attr(entity, 'media_artist') %}
{% set t = state_attr(entity, 'media_title') %}
{% if a %} {{a}} - {{t}}
{% else %} Beschikbaar
{% endif %}
icon: mdi:spotify
entity: media_player.spotify_secondary
icon_color: |-
{% set s = state_attr(entity, 'source') %}
{% if s %} deep-orange
{% else %} disabled
{% endif %}
fill_container: true
tap_action:
action: more-info
- type: custom:mushroom-media-player-card
entity: media_player.spotify_secondary
fill_container: true
media_controls:
- shuffle
- previous
- play_pause_stop
- next
- repeat
collapsible_controls: true
icon_type: none
primary_info: none
secondary_info: none
1 Like
Hey I know your one of the coding experts on here . I’m trying to use the mushroom fan card slider to control my 6 speeds on fan . Currently I have 6 seperate buttons set as scripts for the RF BroadLink hub
I found entity-row-slider but my issue is I need it to look like a mushroom card and mushroom slider. Am this be done with fan or template card?
HA and Mushroom should automatically take care of it. I have a tuya based fan controller and I didn’t have to do anything special in Mushroom to get the slider on the fan card to work.
I feel like I still might have trouble because I had to manually program each speed button as a script for this fan. The fan itself is in a smart fan I had to use an RF hub. Good to know though for future fans I might set up. Thanks