rhysb
(Rhys)
June 6, 2022, 1:01am
1079
While you wait for the new feature, you can achieve what you want with a little CSS.
Vertical:
type: custom:mushroom-template-card
icon: mdi
primary: LS50
secondary: '{{ ''On'' if is_state(entity, ''on'') else ''Off'' }} '
entity: switch.ls50-1
fill_container: false
multiline_secondary: false
layout: vertical
card_mod:
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/LS50.png' ) no-repeat center 0px;
background-size: 42px 42px;
{% if is_state(config.entity, 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
Horizontal:
type: custom:mushroom-template-card
icon: mdi
primary: LS50
secondary: '{{ ''On'' if is_state(entity, ''on'') else ''Off'' }} '
entity: switch.ls50-2
fill_container: false
multiline_secondary: false
card_mod:
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/LS50.png' ) no-repeat 0px center;
background-size: 42px 42px;
{% if is_state(config.entity, 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
Rounded:
type: custom:mushroom-template-card
icon: mdi
primary: LS50
secondary: '{{ ''On'' if is_state(entity, ''on'') else ''Off'' }} '
entity: switch.ls50-3
fill_container: false
multiline_secondary: false
layout: vertical
card_mod:
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/LS50.png' ) no-repeat center 0px;
background-size: 42px 42px;
{% if is_state(config.entity, 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
ha-card {
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
}
Edit: Update to stop icon floating in
12 Likes
Yes those are the ones I have
Those are excellent!! Thank you so much!
So I’m using a cover card to control my two garage doors and would like to be able to make the open and close buttons a little less vulnerable to accidental activation. Is there any way to change them from a tap action to a hold action?
rhysb
(Rhys)
June 6, 2022, 4:31am
1083
I love seeing the album art in my media players, but wanted to keep the Mushroom aesthetic. What do I do?
This one took a bit of figuring out. The problem was having the background overlay adapting to dark & light themes. I like the result, I hope you do too.
Media Player Dark:
Media Player Light:
type: custom:mushroom-media-player-card
entity: media_player.lounge
use_media_artwork: false
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
tap_action:
action: toggle
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 %}
}
22 Likes
ebolly
(Eric)
June 6, 2022, 6:57am
1084
Hi Rhys,
Look nice, just tried your code but… seems background is still overlay.
Any idea ?
made you beautiful.
I added this one too, but it looks slightly different.
what could that be?
I have created an input boolean switch.
you drop down looks different from mine
Kabala
(Cata)
June 6, 2022, 8:58am
1086
Share my media card here.
Thanks for the great mushrooms…
8 Likes
rhysb
(Rhys)
June 6, 2022, 9:40am
1087
I have minimalist-desktop theme enabled. It seems that --rgb-primary-background-color is present in the Minimalist theme but not Mushroom theme. I’ll see if I can find another one to use.
1 Like
rhysb
(Rhys)
June 6, 2022, 9:48am
1088
Do you have card-mod installed?
Nope, not installed yet.
Only Mushroom & Mushroom themes.
rhysb
(Rhys)
June 6, 2022, 9:51am
1090
Ok, try installing card-mod. That does the fun CSS stuff.
thanks, that looks much better already!
rhysb
(Rhys)
June 6, 2022, 10:23am
1092
Change --rgb-primary-background-color to --rgb-card-background-color. Should fix it for Mushroom theme.
I love this card… seems my imagination is the only thing holding me back here
I am going to ‘steal’ your card for the 1st page … I’m using the Sonos Card for my music but would love a media card on the front page!!!
Dibbler
(Thomas Bail)
June 6, 2022, 11:06am
1094
Still very new to HA and now starting to build a nice UI using the mushroom cards. They are really nice - Great job thanks for that.
I like to start my ui with a gretaing to the user and sone weather conditions like
So the subtitle is build from some sensor information and will be extendes by some more information. But my problem at the moment ist that i have no idea how to localize the weather condition. If i use
Es ist {{ states('sensor.in_weatherservice_condition')}} bei {{ states('sensor.oa_climatesensor_temperature')}}°C
i get the condition in english instead of german. I know that i could write some code that translates the condition to german, but the mushroon chips card does this on its own. So my opinion ist that there should be a function i could use.
Could someone hlep?
ebolly
(Eric)
June 6, 2022, 11:32am
1095
Does not seems ok, here’s my code and the result
type: custom:mushroom-media-player-card
entity: media_player.spotify_papa
use_media_artwork: false
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
tap_action:
action: toggle
style: |
ha-card {
{% if is_state('media_player.spotify_papa', 'off') %}
{% else %}
background-image: url( '{{ state_attr( "media_player.spotify_papa", "entity_picture" ) }}' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color),0.5);
position: relative;
{% endif %}
}
3 Likes
weemaba999
(Bart Weemaels)
June 6, 2022, 11:42am
1096
That worked indeed Thanks mate !
rhysb
(Rhys)
June 6, 2022, 11:48am
1097
Looks like you are missing
‘background-blend-mode: overlay;’
1 Like
ebolly
(Eric)
June 6, 2022, 11:58am
1098
Thanks dude, it’s perfect !
1 Like