Thanks a LOT!
1 Like
card_mod:
style: |
ha-card {
--control-height: 20px;
}
Thank you…
How to change the button colors for media player ?
Is it possible to blur the background image of a card? It can be challenging to read with busy cover art, adding a blur filter is blurring the whole card and I’m having a hard time targeting just the image
type: custom:mushroom-media-player-card
entity: media_player.andrews_room_media
use_media_artwork: true
use_media_info: true
collapsible_controls: true
show_volume_level: false
fill_container: false
tap_action:
action: call-service
service: media_player.media_play_pause
data: {}
target:
entity_id: media_player.andrews_room_media
card_mod:
style: |
ha-card {
border-radius: 16px 16px 0px 0px;
{% if is_state(config.entity, 'playing') or is_state(config.entity, 'paused') %}
background: rgba(var(--rgb-card-background-color), 0.7) url( '{{ state_attr(config.entity, "entity_picture" ) }}' ) center no-repeat;
background-size: cover;
background-blend-mode: overlay;
{% else %}
{% endif %}
}
Your CSS is not quite right. Should be:
card_mod:
style:
mushroom-media-player-media-control$: |
mushroom-button {
--bg-color: rgba(var(--rgb-green), 0.05);
}
mushroom-media-player-volume-control$: |
mushroom-button {
--bg-color: rgba(var(--rgb-green), 0.05);
}
.: |
mushroom-button {
--bg-color: rgba(var(--rgb-yellow), 0.05);
}
:host {
--mush-rgb-state-media-player: var(--rgb-pink);
}
2 Likes
How to add fonts to Home Assistant:
-
Go to https://fonts.google.com/ and find the font you want to use.
-
Select the font
and then view the selected font
-
Copy the font URL
-
In HA, go to Settings → Dashboards and then Resources in the top right corner
-
Add the Resource as a Stylesheet
and you should see your new font resource listed
-
Go back to Google Fonts and copy the CSS Rule for the font
-
Add the CSS to your card
type: custom:mushroom-template-card
icon: mdi:mushroom
icon_color: orange
primary: Mushroom
card_mod:
style:
mushroom-state-info$: |
.primary {
font-family: 'Bungee Spice', cursive;
--card-primary-font-size: 30px;
}
- Or to your theme if you want to use it globally
# Fonts
primary-font-family: 'Bungee Spice, cursive'
paper-font-common-base_-_font-family: "var(--primary-font-family)"
paper-font-common-code_-_font-family: "var(--primary-font-family)"
paper-font-body1_-_font-family: "var(--primary-font-family)"
paper-font-subhead_-_font-family: "var(--primary-font-family)"
paper-font-headline_-_font-family: "var(--primary-font-family)"
paper-font-caption_-_font-family: "var(--primary-font-family)"
paper-font-title_-_font-family: "var(--primary-font-family)"
ha-card-header-font-family: "var(--primary-font-family)"
13 Likes
Exactly copy-pasted your code but still only the icon color is changing along with slider.
type: custom:mushroom-media-player-card
entity: media_player.music
volume_controls:
- volume_mute
- volume_set
- volume_buttons
card_mod:
style:
mushroom-media-player-media-control$: |
mushroom-button {
--bg-color: rgba(var(--rgb-green), 0.05);
}
mushroom-media-player-volume-control$: |
mushroom-button {
--bg-color: rgba(var(--rgb-green), 0.05);
}
.: |
mushroom-button {
--bg-color: rgba(var(--rgb-yellow), 0.05);
}
:host {
--mush-rgb-state-media-player: var(--rgb-pink);
}
What am I doing wrong ?
1 Like
Looks like the opacity of the colour is turned wayy down try changing the 0.05 value up to something like 0.2
card_mod:
style:
mushroom-media-player-media-control$: |
mushroom-button {
--bg-color: rgba(var(--rgb-green), 0.2);
}
mushroom-media-player-volume-control$: |
mushroom-button {
--bg-color: rgba(var(--rgb-green), 0.2);
}
.: |
mushroom-button {
--bg-color: rgba(var(--rgb-yellow), 0.5);
}
:host {
--mush-rgb-state-media-player: var(--rgb-pink);
}
1 Like
thank you @theandouz @rhysb, changing the opacity worked…
- Please guide how to change the color from white to any color of the icons (the blue encircled ones)?
- How to change the color of the media_info e.g. “Music” and “Playing” in this case?
Thank you…
1 Like
You can like this:
card_mod:
style:
mushroom-media-player-media-control$: |
mushroom-button {
--bg-color: rgba(var(--rgb-green), 0.2);
--primary-text-color: rgb(var(--rgb-green));
}
mushroom-media-player-volume-control$: |
mushroom-button {
--bg-color: rgba(var(--rgb-blue), 0.2);
--primary-text-color: rgb(var(--rgb-blue));
}
.: |
mushroom-button {
--bg-color: rgba(var(--rgb-yellow), 0.2);
--primary-text-color: rgb(var(--rgb-yellow));
}
:host {
--mush-rgb-state-media-player: var(--rgb-pink);
--secondary-text-color: rgb(var(--rgb-cyan));
}
What can I add in the mushroom theme yaml to change the color of the chips icon when the entity is inactive?
I would like to make them darker
Thank you
1 Like
Can you share the code?
Thank you so much @rhysb… Really appreciate your help… 
One more query… how to shift the slider and the button towards the center to make it align with primary and secondary info. I used the below code to reduce the height of the slider.
ha-card {
--control-height: 25px;
}
2 Likes
Can I place some buttons to cal services where secondary_info normally is?
You can like this:
.actions {
align-items: center !important;
}
Change mush-rgb-disabled for light and dark themes.
modes:
light:
mush-rgb-disabled: 189, 189, 189
dark:
mush-rgb-disabled: 111, 111, 111
2 Likes
Thank you,
I have tryied to change those colors, but nothing changed…
It is enought to use the service “reload theme”?
Just tested and works for me with a reload.
I can see that now is not even using the color 111, 111, 111, but pure white.
I will reload HA and come back…
1 Like
Nothing, I can change theme, update theme, but it not using the color 111, 111, 111,
@rhysb can you shere yout theme yaml?
Thank you