Love the cards but would like pointers on getting a mushroom style gauge card?
I’ve set up recurring reminders which I’d like to display as horizontal bar type gauges to track percentage of remaining time.
Also in progress of building water softener salt level sensor which id like to track percentage with a horizontal bar gauge too.
I see the fan and lights have a horizontal bar gauge but cannot use sensor entities with these?
Ah thank you so I need to install card mod to do this?
Also, is there anyone to change the colour depending on state for when something is playing and when it’s idle? I worked out how to do this using other template cards but how would it work using card mod?
Thanks again
This is awesome. Could we customize it so instead of the icon, we can display the current/preset temperature (via a template)? Also, would be cool if we could show the climate presets as buttons.
It’s “Offices” not “Office’s”
(gratuitous apostrophe police - moi?)
Nice dashboard. Thanks for the github link. Many good examples in there.
you can help? the files that you uploaded to github in which path do I have to copy them
Yes, the first method requires card_mod. Adding the variable to your theme does not.
You can change the Mushroom Media Player icon and it’s color based on the media type like this:
type: custom:mushroom-media-player-card
entity: media_player.currently_playing
volume_controls:
- volume_set
media_controls:
- next
- previous
- play_pause_stop
use_media_info: true
collapsible_controls: false
card_mod:
style: |
ha-card {
{% set media_type = state_attr(config.entity,
'media_content_type') %}
--rgb-state-media-player:
{% if media_type == 'tvshow' %}
var(--rgb-blue)
{% elif media_type == 'movie' %}
var(--rgb-green)
{% elif media_type == 'music' %}
var(--rgb-red)
{% elif media_type == 'playlist' %}
var(--rgb-light-blue)
{% else %}
var(--rgb-amber)
{% endif %};
}
mushroom-shape-icon {
--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:plex
{% endif %};
}
Hey! Great job. Could you share how to make the pop-uo as you show on second image?
Thank you
It is a hacs add on called browser mode.
You can find it on here :
and here is the code :
type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: picture-entity
show_name: false
show_state: false
camera_view: auto
entity: light.duvar_sag
image: /local/png2/hue3.png
tap_action:
action: toggle
double_tap_action:
action: call-service
service: script.turn_on
data: {}
target:
entity_id: script.browser_mode_pop_up_close
- type: custom:mushroom-template-card
primary: Hue Sağ
entity: light.duvar_sag
secondary: Salon
picture: /local/png/colorbulb15.png
tap_action:
action: toggle
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 43px;
height: 66px;
margin-left: -5px !important;
}
ha-card {
padding: 1px;
background: rgba(var(--rgb-primary-background-color), 0.1);
}
- type: custom:light-entity-card
shorten_cards: false
consolidate_entities: true
child_card: false
hide_header: true
header: ''
color_wheel: true
persist_features: true
brightness: true
color_temp: true
white_value: false
color_picker: true
smooth_color_wheel: true
speed: false
intensity: false
force_features: true
show_slider_percent: true
full_width_sliders: false
brightness_icon: weather-sunny
white_icon: file-word-box
temperature_icon: thermometer
speed_icon: speedometer
intensity_icon: transit-connection-horizontal
entity: light.duvar_sag
effects_list: false
card_mod:
style: |
ha-card {
padding: -15px;
background: rgba(var(--rgb-primary-background-color), 0.1);
}
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;
}
:host {
--ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
}
Thank you so much
Hi,
Sorry for late reply.
I set the cover card param
icon_type: entity-picture
And added attribute to cover entity using cutomize.yaml
cover.volet_amis_prop:
entity_picture: "/local/images/devices/volets/volet65.png"
Can you share info on your salt level sensor? I’ve considered doing this so I’d like to see how you get on.
Anyone have any ideas on this?
I finally switched to mushroom themes from google theme.
but how can i get rid of this line seperating the two entries?
This is a Mushroom Horizontal Bar Gauge you could use:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 42px auto
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
entity: sensor.disk_use
icon: mdi:harddisk
icon_color: green
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:bar-card
entity: sensor.disk_use
height: 42px
min: '0'
max: '250'
entity_row: true
color: rgb(var(--mush-rgb-green))
positions:
icon: 'off'
indicator: 'off'
card_mod:
style: |
ha-card {
padding: 12px;
margin-left: 12px;
--bar-card-border-radius: 12px;
}
bar-card-value {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-name {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-backgroundbar {
opacity: 0.2;
filter: brightness(1);
}
This uses stack-in-card, card-mod, layout-card, mushroom-template-card & bar-card.
Update: Removed box shadow and improved bar color to match Mushroom
I’m not sure what you are trying to do? Do you want the bottom cards to look like the Master bedroom card?
I want the first card that’s a custom template card (the one with a picture) to look like the bottom card that uses a mushroom light card. Meaning the same size. The card size is significantly different right now. I prefer the big boxy look for this application.
You can comment out or remove these background bits like this:
card_mod:
style: |
:host([dark-mode]) {
#background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
#background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
}
Thanks 
it works and looks so much better.
Perfect, will give it a go!
This is the code for the regular light card…
All I changed is from a light card to a template card.
type: custom:auto-entities
card:
type: grid
columns: 2
square: false
card_param: cards
filter:
include:
- domain: light
state: 'on'
entity_id: /[li]ghts/
options:
type: custom:mushroom-light-card
vertical: true
tap_action: none
hold_action:
action: toggle
double_tap_action:
action: more-info
card_mod: null
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;}
ha-card {
--ha-card-background: transparent;
--card-primary-font-size: 12px;
--icon-symbol-size: 55px;
}
sort:
method: entity_id
Template card.
type: custom:auto-entities
card:
type: grid
columns: 2
square: false
card_param: cards
filter:
include:
- domain: light
state: 'on'
entity_id: /[li]ghts/
options:
type: custom:mushroom-template-card
primary: '{{ states[entity].name }}'
secondary: '{{ states(entity) | title }}'
picture: local/icons/custom_icons/ceiling-lamp.png
vertical: true
tap_action: none
hold_action:
action: toggle
double_tap_action:
action: more-info
card_mod: null
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;}
ha-card {
background: transparent;
width: px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
sort:
method: entity_id