Amazing, thanks so much! And how do I use variables from my own theme for the icon color? Would it just be icon_color: var(—blah) where blah is a egg or hex value?
1 Like
Add the following values to your theme and re-define them in RGB:
mush-rgb-red: 244, 67, 54
mush-rgb-pink: 233, 30, 99
mush-rgb-purple: 156, 39, 176
mush-rgb-deep-purple: 103, 58, 183
mush-rgb-indigo: 63, 81, 181
mush-rgb-blue: 33, 150, 243
mush-rgb-light-blue: 3, 169, 244
mush-rgb-cyan: 0, 188, 212
mush-rgb-teal: 0, 150, 136
mush-rgb-green: 76, 175, 80
mush-rgb-light-green: 139, 195, 74
mush-rgb-lime: 205, 220, 57
mush-rgb-yellow: 255, 235, 59
mush-rgb-amber: 255, 193, 7
mush-rgb-orange: 255, 152, 0
mush-rgb-deep-orange: 255, 87, 34
mush-rgb-brown: 121, 85, 72
mush-rgb-grey: 158, 158, 158
mush-rgb-blue-grey: 96, 125, 139
mush-rgb-black: 0, 0, 0
mush-rgb-white: 255, 255, 255
3 Likes
Thanks for the reply. I just copied your code and modified a few things and I feel like I’m really close. I’m using an RF fan with a BroadLink hub. Each of the six speeds are set as their own script in Home Assistant. I need to be able to target a specific script based on what percentage the slider is up.
And also how come I can’t slide the slider with my finger I actually have to press wherever I want the slider to go to?
seems you are master from styling!, any idea about the below ?
I have 2 separate cards
1 musroom template with Media Player entity (why not mushroom media player ?
Cause I want the name of the station playing as the secondary)
2nd mushroom media player for volume slider
i want to modify the height of the second card - to be consistent
how to style this mushroom media player card ?
The code I was trying is 
card:
type: custom:mushroom-media-player-card
entity: media_player.gh_mini
volume_controls:
- volume_mute
- volume_set
show_volume_level: true
secondary_info: ''
primary_info: ''
media_controls: []
collapsible_controls: true
icon: mdi
tap_action:
action: none
layout: default
card_mod:
style: |
ha-card {
height: 60px;
}
Like this?
type: custom:mushroom-media-player-card
entity: media_player.gh_mini
layout: horizontal
primary_info: none
secondary_info: none
icon_type: none
volume_controls:
- volume_mute
- volume_set
tap_action:
action: none
1 Like
of course it works… so simple… i was overcomplicating !
thank you!
1 Like
Perhaps look at the Template Fan.
My-Slider-v2 styled for Mushroom may work better for you:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: fan.lounge_cabinet_fan
icon: mdi:fan
icon_color: teal
primary: Fan
- type: custom:my-slider-v2
entity: fan.lounge_cabinet_fan
styles:
card:
- height: 42px
container:
- border-radius: 12px
track:
- background: >
[[[ if (entity.state == "off") return
"rgba(var(--mush-rgb-disabled), 0.2)";
else return "rgba(var(--mush-rgb-teal), 0.2)";
]]]
progress:
- background: >
[[[ if (entity.state == "off") return
"rgb(var(--mush-rgb-disabled))";
else return "rgb(var(--mush-rgb-teal))";
]]]
thumb:
- width: 0px
card_mod:
style: |
ha-card {
padding: 0px 12px 12px;
--mush-rgb-disabled: 189,189,189;
--mush-rgb-teal: 0, 150, 136;
}
2 Likes
mind me asking… how to change the slider color but not for the light control but for the volume ?
based on below ?
mushroom-light-brightness-control {
--slider-color: green !important;
--slider-bg-color: grey !important;
}
Like this:
card_mod:
style: |
:host {
--mush-rgb-state-media-player: var(--rgb-green);
}
2 Likes
I feel like the first one you sent me is closer to what im looking for because that already had the statements telling the icon to change based on the percentage. I need a certain script(speed) to run based on percentage. Thats the main part I cant figure out.
This is clearly the very wrong way to do it lol but this is what Im tryigkn to achieve in cse Im not explaining it right.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: input_number.fan_slider
icon: |
{% set vol_level = states(entity) | float %}
{% if vol_level == 0 %}
mdi:fan
action: call-service
* service: script.dummy*
* data: {}*
* target: {}*
{% elif vol_level > 80 %}
mdi:volume-high
{% elif vol_level < 40 %}
mdi:volume-low
{% else %}
mdi:volume-medium
{% endif %}
icon_color: indigo
hallo can you sharing this card’s pleas ?
Would you be able to share the pollution card as well?
I had to rework the pollution card, the description etc was not working as I would like to
hopefully I will come up with sth new before winter:
type: vertical-stack
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
card_mod:
style: |
ha-card {
margin-left: 15px;
margin-top: 15px;
}
- type: custom:mushroom-entity-card
entity: sensor.dom_caqi
icon_color: '#b406c7'
layout: horizontal
hold_action:
action: none
primary_info: name
secondary_info: state
name: PM 1
card_mod:
style: |
:host {
--mush-icon-size: 40px;
--mush-card-primary-font-size: 11px;
--mush-card-secondary-font-size: 11px;
}
ha-card {
margin-left: -45px;
}
- type: custom:mushroom-entity-card
entity: sensor.mi_air_purifier_3h_pm2_5
icon_color: '#1092e3'
layout: horizontal
hold_action:
action: none
primary_info: name
secondary_info: state
name: AP 3H
card_mod:
style: |
:host {
--mush-icon-size: 40px;
--mush-card-primary-font-size: 11px;
--mush-card-secondary-font-size: 11px;
}
ha-card {
margin-left: -40px;
}
- type: custom:mushroom-entity-card
entity: sensor.mi_air_purifier_2s_pm2_5
icon_color: '#1092e3'
hold_action:
action: none
primary_info: name
secondary_info: state
layout: horizontal
name: AP 2S
card_mod:
style: |
:host {
--mush-icon-size: 40px;
--mush-card-primary-font-size: 11px;
--mush-card-secondary-font-size: 11px;
}
ha-card {
margin-left: -35px;
}
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
margin-top: -20px;
}
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 20% 80%
grid-template-rows: auto
margin: 0px
padding: 0px
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-entity-card
entity: sensor.dom_pm1
icon_color: '#bd0606'
layout: vertical
hold_action:
action: none
primary_info: name
secondary_info: state
name: PM 1
card_mod:
style: |
:host {
--mush-icon-size: 30px;
--mush-card-primary-font-size: 10px;
--mush-card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.dom_pm2_5
icon_color: '#e33707'
layout: vertical
hold_action:
action: none
primary_info: name
secondary_info: state
name: PM 2,5
card_mod:
style: |
:host {
--mush-icon-size: 30px;
--mush-card-primary-font-size: 10px;
--mush-card-secondary-font-size: 10px;
}
ha-card {
margin-top: -18px;
}
- type: custom:mushroom-entity-card
entity: sensor.dom_pm10
icon_color: '#e38f07'
hold_action:
action: none
primary_info: name
secondary_info: state
layout: vertical
name: PM 10
card_mod:
style: |
:host {
--mush-icon-size: 30px;
--mush-card-primary-font-size: 10px;
--mush-card-secondary-font-size: 10px;
}
ha-card {
margin-top: -18px;
}
card_mod:
style: |
ha-card {
background: none;
margin-left: -10px;
--ha-card-box-shadow: 0px;
}
- type: custom:apexcharts-card
header:
show: false
chart_type: line
series:
- entity: sensor.dom_caqi
type: column
color: '#b406c7'
- entity: sensor.dom_pm1
type: column
color: '#bd0606'
- entity: sensor.dom_pm2_5
type: column
color: '#e33707'
- entity: sensor.dom_pm10
type: column
color: '#e38f07'
graph_span: 24h
cache: true
apex_config:
chart:
height: 280
stroke:
width: 2
curve: smooth
legend:
show: false
yaxis:
show: true
showAlways: true
showForNullSeries: true
seriesName: undefined
opposite: false
reversed: false
logarithmic: false
tickAmount: 6
min: 0
max: 120
forceNiceScale: true
decimalsInFloat: 0
card_mod:
style: |
ha-card {
margin-left: -30px;
margin-top: -20px;
background: none;
height: 300px;
--ha-card-box-shadow: 0px;
}
2 Likes
sure:
Music card:
type: vertical-stack
cards:
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 10% 90%
grid-template-rows: auto
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
card_mod:
style: |
ha-card {
margin-left: -10px;
}
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 38% 62%
grid-template-rows: auto
cards:
- type: custom:state-switch
entity: media_player.gh_mini
default: 'off'
states:
playing:
type: custom:mushroom-template-card
entity: media_player.gh_mini
icon: mdi:speaker
icon_color: yellow
tap_action:
action: toggle
primary: Salon
secondary: >-
{%- if states('input_select.mediaplayer_source') == 'RMF' -%}
RMF FM
{%- elif states('input_select.mediaplayer_source') == 'RMF MAXXX'
-%}
RMF MAXXX
{%- elif states('input_select.mediaplayer_source') == 'VOX' -%}
VOX
{%- elif states('input_select.mediaplayer_source') == 'Supernova'
-%}
Supernova
{%- elif states('input_select.mediaplayer_source') == 'ESKA' -%}
ESKA
{%- elif states('input_select.mediaplayer_source') == 'MUZO FM'
-%}
MUZO FM
{%- elif states('input_select.mediaplayer_source') == 'RADIO ZET'
-%}
Radio Zet
{%- elif states('input_select.mediaplayer_source') == 'Radio
Krakow' -%}
Radio Krakow
{%- else -%}
Inna stacja
{%- endif -%}
card_mod:
style: |
ha-card {
margin-left: -5px;
border: none;
}
:host {
--mush-card-primary-font-size: 11px;
--mush-card-secondary-font-size: 10px;
}
'off':
type: custom:mushroom-template-card
entity: media_player.gh_mini
icon: mdi:speaker-off
icon_color: grey
primary: Salon
tap_action:
action: toggle
idle:
type: custom:mushroom-template-card
entity: media_player.gh_mini
icon: mdi:speaker
icon_color: yellow
primary: Salon
secondary: Oczekuje
card_mod:
style: |
ha-card {
margin-left: -5px;
}
:host {
--mush-card-primary-font-size: 11px;
--mush-card-secondary-font-size: 10px;
}
tap_action:
action: toggle
buffering:
type: custom:mushroom-template-card
entity: media_player.gh_mini
icon: mdi:speaker
icon_color: yellow
primary: Galon
secondary: Oczekuje
tap_action:
action: toggle
card_mod:
style: |
ha-card {
margin-left: -5px;
}
:host {
--mush-card-primary-font-size: 11px;
--mush-card-secondary-font-size: 10px;
}
card_mod:
style: |
ha-card {
margin-left: -20px;
}
- type: conditional
conditions:
- entity: media_player.gh_mini
state_not: 'off'
card:
type: custom:mushroom-media-player-card
entity: media_player.gh_mini
layout: horizontal
primary_info: none
secondary_info: none
icon_type: none
volume_controls:
- volume_mute
- volume_set
tap_action:
action: none
card_mod:
style: |
:host {
--mush-rgb-state-media-player: var(--rgb-yellow);
}
- type: conditional
conditions:
- entity: media_player.gh_mini
state_not: 'off'
card:
type: custom:mushroom-chips-card
chips:
- type: template
card_mod: null
content: |
{{ state_attr('media_player.gh_mini', 'volume_level') | float |
round(3,default="0") *100 }}%
tap_action:
action: none
card_mod:
style: |
ha-card {
margin-top: -62.5px;
margin-left: 260px;
--chip-background: none;
--chip-font-size: 14px;
--chip-font-weight: bold;
alignment: center
- square: false
columns: 4
type: grid
cards:
- show_state: false
show_name: false
camera_view: auto
type: picture-entity
entity: input_select.mediaplayer_source
image: /local/images/muzyka/logo_rmf_fm.PNG
tap_action:
action: call-service
service: input_select.select_option
data:
option: RMF
target:
entity_id: input_select.mediaplayer_source
name: RMF
- show_state: false
show_name: false
camera_view: auto
type: picture-entity
entity: sensor.0x60a423fffead7984_energy
image: /local/images/muzyka/logo_eska.PNG
tap_action:
action: call-service
service: input_select.select_option
data:
option: ESKA
target:
entity_id: input_select.mediaplayer_source
name: ESKA
- show_state: false
show_name: false
camera_view: auto
type: picture-entity
entity: input_select.mediaplayer_source
image: /local/images/muzyka/logo_rmf_maxxx.PNG
tap_action:
action: call-service
service: input_select.select_option
data:
option: RMF MAXXX
target:
entity_id: input_select.mediaplayer_source
name: RMF MAXXX
- show_state: false
show_name: false
camera_view: auto
type: picture-entity
entity: input_select.mediaplayer_source
image: /local/images/muzyka/logo_radio_zet.PNG
tap_action:
action: call-service
service: input_select.select_option
data:
option: RADIO ZET
target:
entity_id: input_select.mediaplayer_source
name: RADIO ZET
- show_state: false
show_name: false
camera_view: auto
type: picture-entity
entity: input_select.mediaplayer_source
image: /local/images/muzyka/logo_supernova.PNG
tap_action:
action: call-service
service: input_select.select_option
data:
option: Supernova
target:
entity_id: input_select.mediaplayer_source
name: Supernova
- show_state: false
show_name: false
camera_view: auto
type: picture-entity
entity: input_select.mediaplayer_source
image: /local/images/muzyka/logo_vox.PNG
tap_action:
action: call-service
service: input_select.select_option
data:
option: VOX
target:
entity_id: input_select.mediaplayer_source
name: VOX
- show_state: false
show_name: false
camera_view: auto
type: picture-entity
entity: input_select.mediaplayer_source
image: /local/images/muzyka/logo_muzo.PNG
tap_action:
action: call-service
service: input_select.select_option
data:
option: MUZO FM
target:
entity_id: input_select.mediaplayer_source
name: MUZO FM
- show_state: false
show_name: false
camera_view: auto
type: picture-entity
entity: input_select.mediaplayer_source
image: /local/images/muzyka/logo_radio_krakow.PNG
tap_action:
action: call-service
service: input_select.select_option
data:
option: Radio Krakow
target:
entity_id: input_select.mediaplayer_source
name: Radio Krakow
Thanks!! I managed to display the attributes that way.
However, my basic knowledge with templating and the template card makes me scratch my head as to how to build the climate card with the template card.
This is my current climate card
type: custom:mushroom-climate-card
entity: climate.bibliotek
layout: vertical
show_temperature_control: true
collapsible_controls: true
card_mod:
style: |
ha-card {
{% if is_state('climate.bibliotek', 'heat') %}
background: rgba(225, 225, 225, 1);
--primary-text-color: black;
{%- else -%}
{%- endif %}
}
ha-card {
{% if is_state('climate.bibliotek', 'off') %}
background: rgba(150, 150, 150, 0.2);
--primary-text-color: white;
{%- else -%}
{%- endif %}
}
ha-card {
{% if is_state('climate.bibliotek', 'unavailable') %}
background: rgba(255, 0, 0, 0.4);
--primary-text-color: white;
{%- else -%}
{%- endif %}
}
mushroom-card .actions {
{{ 'display: none;' if is_state(config.entity, 'idle') }}
}
mushroom-state-item {
{{ 'margin-bottom: 0px;' if is_state(config.entity, 'idle') }}
}
Nice work, can you share the Yaml off both calendars?
Thanks much! The only thing I can’t figure out is how you get the volume slider, and the volume button. I can either get one or the other, and the button will only show up if I have one of the media control buttons selected, which you don’t seem to. I have copied your code, but is there anything special you did to get the slider and the colume button, plus the chip with the volume level?
try adding those cards separate, and then merge them together in the layout card or stack card
type: custom:state-switch
entity: media_player.gh_mini
default: 'off'
states:
playing:
type: custom:mushroom-template-card
entity: media_player.gh_mini
icon: mdi:speaker
icon_color: yellow
tap_action:
action: toggle
primary: Salon
secondary: |-
{%- if states('input_select.mediaplayer_source') == 'RMF' -%}
RMF FM
{%- elif states('input_select.mediaplayer_source') == 'RMF MAXXX' -%}
RMF MAXXX
{%- elif states('input_select.mediaplayer_source') == 'VOX' -%}
VOX
{%- elif states('input_select.mediaplayer_source') == 'Supernova' -%}
Supernova
{%- elif states('input_select.mediaplayer_source') == 'ESKA' -%}
ESKA
{%- elif states('input_select.mediaplayer_source') == 'MUZO FM' -%}
MUZO FM
{%- elif states('input_select.mediaplayer_source') == 'RADIO ZET' -%}
Radio Zet
{%- elif states('input_select.mediaplayer_source') == 'Radio Krakow' -%}
Radio Krakow
{%- else -%}
Inna stacja
{%- endif -%}
card_mod:
style: |
ha-card {
margin-left: -5px;
}
:host {
--mush-card-primary-font-size: 11px;
--mush-card-secondary-font-size: 10px;
}
'off':
type: custom:mushroom-template-card
entity: media_player.gh_mini
icon: mdi:speaker-off
icon_color: grey
primary: Salon
tap_action:
action: toggle
idle:
type: custom:mushroom-template-card
entity: media_player.gh_mini
icon: mdi:speaker
icon_color: yellow
primary: Salon
secondary: Oczekuje
card_mod:
style: |
ha-card {
margin-left: -5px;
}
:host {
--mush-card-primary-font-size: 11px;
--mush-card-secondary-font-size: 10px;
}
tap_action:
action: toggle
buffering:
type: custom:mushroom-template-card
entity: media_player.gh_mini
icon: mdi:speaker
icon_color: yellow
primary: Galon
secondary: Oczekuje
tap_action:
action: toggle
card_mod:
style: |
ha-card {
margin-left: -5px;
}
:host {
--mush-card-primary-font-size: 11px;
--mush-card-secondary-font-size: 10px;
}
card_mod:
style: |
ha-card {
margin-left: -20px;
}
This is the main (left) card, it is state switch, it is displaying state and station which is being played
type: conditional
conditions:
- entity: media_player.gh_mini
state_not: 'off'
card:
type: custom:mushroom-media-player-card
entity: media_player.gh_mini
layout: horizontal
primary_info: none
secondary_info: none
icon_type: none
volume_controls:
- volume_mute
- volume_set
tap_action:
action: none
card_mod:
style: |
:host {
--mush-rgb-state-media-player: var(--rgb-yellow);
}
This is the right one
it is only for the volume slider
Third one is the chip, it is placed with margin left and bottom so if fits the slider
type: conditional
conditions:
- entity: media_player.gh_mini
state_not: 'off'
card:
type: custom:mushroom-chips-card
chips:
- type: template
card_mod: null
content: |
{{ state_attr('media_player.gh_mini', 'volume_level') | float |
round(3,default="0") *100 }}%
tap_action:
action: none
card_mod:
style: |
ha-card {
margin-top: -62.5px;
margin-left: 260px;
--chip-background: none;
--chip-font-size: 14px;
--chip-font-weight: bold;
alignment: center
Let me just comment, depending on your needs you can use the mushoom media player only, I wanted to have the stations playing as the secondary so had to use template card
Hope this helps!
PM me if you still have some issues
1 Like
Thanks! Some questions though.
So here is what my card looks like with that code:
The colors and also the alignment seems a little off, do you know what I did wrong and how I could fix it? Also if I wanted to add more than 2 people in the future how would I do this? Thanks.
And here is my code: (link cuz was too long of a post)
2 Likes