MMP doesn’t have a style option. If you’re using card-mod you should ask there.
I know. That’s the reason why i try to inject the css. I would like to know which place in the yaml (or if it is not the right position) and if the class is correct.
This is possible with any card.
Or i’am complete wrong here?
Could someone show an example with Google TTS in it please?
Im dumb and can’t follow the instructions
Is it possible to use and if template somehow for the icon? or any other possible way to fix it? 
shortcuts:
columns: 4
column_height: 1
buttons:
- type: service
icon: |
[[[
if (states['input_boolean.pausa_badrum_musik'].state == 'off') {
return 'mdi:speaker-off';
} else {
return 'mdi:speaker-on';
}
]]]
id: input_boolean.toggle
data:
entity_id: input_boolean.pausa_badrum_musik
i also tried with a template sensor but no icon appers… 
- icon: "{{ states('sensor.badrum_mute_icon') }}"
type: service
id: input_boolean.toggle
data:
entity_id: input_boolean.pausa_badrum_musik
- platform: template
sensors:
badrum_mute_icon:
friendly_name: ikea sensor mute icon
value_template: >
{% if is_state('input_boolean.pausa_badrum_musik', 'on') %}
'mdi:motion-sensor-off'
{% else %}
'mdi:motion-sensor'
{% endif %}
Hello everyone!
I’m new to the world of HA and it truly is amazing, coming over from a SmartThings and Philips Hue based system. I’m just getting to set everything up and been tinkering with this player and I almost got it to where I want it.
My questions are;
Is it possible to make the artwork go out to the edges on both sides and on the top? I don’t fancy that border.
In order to be able to control my Sonos speakers separate volume I had to group them in the Sonos app, but when I did that it added the ‘+2’ after all the names. How can I get rid of this?
Regarding the info of the song, is it possible to have the artist on top row and title of a second row intead of it all being on one row?
I think that’s all for now. It feels like these things are done in CSS, but I might be wrong?
Thanks in advance!
As @parautenbach explained, you need to use card-mod which can bring a CSS injection option into other cards. Here is a crude example of how I use it to style my own version of mini-media-player in combination with mediacontrol to browse my music. Don’t be confused, it’s overly complicated but illustrates the power of card-mod:
type: 'custom:stack-in-card'
cards:
- type: 'custom:mini-media-player'
entity: media_player.wohnzimmer_squeeze
artwork: none
icon: 'mdi:music'
hide:
volume: true
power: false
source: true
progress: true
info: true
card_mod:
style: |
ha-card div.mmp-player {
padding-bottom: 0px;
}
ha-card div.mmp-player__adds {
margin-left: 48px !important;
}
- type: media-control
entity: media_player.wohnzimmer_squeeze
card_mod:
style: |
paper-progress {
display: none;
}
div.media-info {
display: none;
}
div.top-info {
display: none;
}
div.background {
display: none;
}
ha-icon-button {
display: none;
}
mwc-icon-button {
margin-right: 12px;
}
div.title-controls {
padding: 0 0 0px;
}
div.player {
color: inherit !important;
}
div.off {
display: none;
}
- type: 'custom:mini-media-player'
entity: media_player.wohnzimmer_squeeze
hide:
volume: true
power: true
source: true
name: true
info: false
controls: true
progress: false
icon: true
state_label: true
card_mod:
style: |
ha-card.--inactive .mmp-player {
padding: 0px !important;
}
ha-card div.mmp-player {
padding-top: 0px;
}
ha-card div.entity__info__media {
color: var(--mmp-active-color);
padding-left: 48px;
}
mmp-powerstrip {
display: none;
}
- type: 'custom:mini-media-player'
entity: media_player.wohnzimmer_squeeze
name: Spotify
artwork: full-cover-fit
hide:
volume: true
power: true
source: true
name: true
info: true
controls: true
progress: true
icon: true
state_label: true
card_mod:
style: |
ha-card.--inactive .mmp-player {
padding: 0px !important;
}
ha-card .mmp-player {
padding: 0px;
}
results in the following for switched-off state:
and this while playing music:
P.S.: I feel tempted to use the power of button-card to overlay the media browse button with the title and progress display…
3 Likes
Thank you very much for you post and help! The is for sure the solution.
In the documentation on github it is stated:
source: Change source select appearance, icon for just an icon, full for the full source name.
Question: how do I define the icon for a source?! (not the entity!)
Second question: is it possible to change the displaying name of a (playing) source? The name of the radio station that I’m playing is very long and occupying too much real estate.
Thank you
First of all post your code properly, see here How to help us help you - or How to ask a good question
Sorry Nickrout,
My bad, I will try to post better next time!
People can maby help anyway and be nice?
/T
Maybe my configuration can help you to see how it is done. I have configured sources as icon + name:
type: 'custom:mini-media-player'
entity: media_player.spotify
name: Spotify
artwork: none
icon: 'mdi:spotify'
hide:
volume: true
power: true
source: true
progress: true
info: true
shortcuts:
label: null
hide_when_off: false
attribute: source
list:
- name: Wohnzimmer
type: service
id: spotcast.start
icon: 'mdi:speaker'
data:
device_name: Wohnzimmer
account: default
- name: Leo's Zimmer
type: service
id: spotcast.start
icon: 'mdi:speaker'
data:
device_name: Leo's Zimmer
account: default
- name: Alle Lautsprecher
type: service
id: spotcast.start
icon: 'mdi:speaker-multiple'
data:
device_name: Alle Lautsprecher
account: default
The sources drop-down then looks like this:
3 Likes
Thanks.
I think there’s a misunderstanding from my side. I wanted a custom icon for the radio station being played at the moment (thats my music source), but I think that is not possible…
Is that information available in Home Assistant?
yes it is. From my HEOS player, its available under the attribute:
source: radio_station_name
media_station: radio_station_name
actually I would like to rename the radio stadion in the frontend, but I’m not sure if this is possible, so the alternative would be to use a different icon for each radio station…
I had a similar challenge with a different media player, my Onkyo AV receiver. Using icons for the sources and only making a limited number of sources available (I never listen radio for example), I used the shortcuts feature like this:
type: 'custom:mini-media-player'
volume_stateless: false
hide:
controls: true
mute: true
source: true
power_state: false
shortcuts:
hide_when_off: true
attribute: source
columns: 6
buttons:
- icon: 'mdi:disc-player'
type: source
id: CD
- icon: 'mdi:monitor'
type: source
id: TV
- icon: 'mdi:sony-playstation'
type: source
id: PS3
- icon: 'mdi:cast'
type: source
id: Chromecast
- icon: 'mdi:amazon'
type: source
id: Amazon
- icon: 'mdi:dlna'
type: source
id: Net
artwork: material
toggle_power: true
entity: media_player.verstarker
The actual source selection is hidden and the list of shortcut items with type source reflects my choice with my individual icons. The id field lists the internal name that is matched with the entry of the source field to highlight which source is selected. In practice, this looks like this for my case:
You see my Chromecast source being active.
I have opted for buttons but this could as well be a dropdown list as shown in my last examples with the speakers. Same principle.
I had the buttons in place already, but thanks very much for sharing, because I was missing the attribute: source in my button config, so the icons had always the same colour - added the attribute and voila, the selected source has a coloured icon - thanks @kongo09 !
problem solved - in a different way though, but even better than I was expecting! 
I tried searching here to see if it’s already been mentioned but couldn’t find anything. The toggle_power option solved my problem.
I have a media player that doesn’t have an on/off remote control so I control it with a smart plug (basically a RPi that’s always on and connected to a retro audio player that only has manual buttons). I combined these two devices into a universal media player.
The problem was then that MMP would correctly show the on/off state but the power button wouldn’t do anything. I started at the bottom of the stack by calling the various power services directly and discovered that the on/off service calls worked as expected but not the toggle. After checking the code for the universal media player it looks like one of the internal functions will return early based on the fact that there’s no active children (in my case, only one child). The normal turn on/off works because there is an override set.
That’s when I learnt about MMP’s option to force whether to use the toggle service or not: Setting toggle_power: false solved the issue.
How could I change the color of the buttons?
I tried it using card-mod and a style, but I can’t figure out how it is set.
Your code here for the padding for example works, but as soon as I change the padding to mini-media-player-button-color, (which is a theme-variable),nothing happens.
type: 'custom:mini-media-player'
entity: media_player.kitchen
card_mod:
style: |
ha-card div.mmp-player {
mini-media-player-button-color: rgba(120,120,120,0.25)
}
Any ideas?
I think if you want to call that variable, you call it without card-mod:
style:
'--mini-media-player-button-color': 'rgba(120, 120, 120, 0.25)'
I thought that too, but at least on my end, it does not work 