Hello everyone,
I have read this topic and I have gained a lot of inspiration from it!
Iām having a problem with a card that I have build. Itās a card to start my favourite radio stations via a script on one of my Sonos speakers. It works, but itās not visually pleasing. As you can see, there are still some borders and lines that I wish to hide. So I want to create a single card without borders with the information / scripts / volume sliders in it. I guess it is possible via mushroom cards / card mods, but I donāt know how. Can anyone please help me?
This is the code that I have used:
cards:
- cards:
- entity: media_player.sonos_move_keuken
type: media-control
tap_action:
action: more-info
- entity: media_player.sonos_move_keuken
hide:
icon: true
info: true
mute: true
power: true
source: true
volume: true
name: true
controls: true
mini-media-player-progress-height: 1px
progress: true
shortcuts:
buttons:
- data:
entity_id: script.new_script
image: /local/SLAM-MM.png
id: script.turn_on
name: null
type: service
- data:
entity_id: script.new_script_2
image: /local/SLAM40!.png
id: script.turn_on
name: null
type: service
- data:
entity_id: script.new_script_3
image: /local/SLAM Hardstyle.png
id: script.turn_on
name: null
type: service
- data:
entity_id: script.new_script_4
image: /local/SLAMFM.png
id: script.turn_on
name: null
type: service
- data:
entity_id: script.new_script_5
image: /local/Radio 538.png
id: script.turn_on
name: null
type: service
- data:
entity_id: script.new_script_6
image: /local/Radio 538 DD.png
id: script.turn_on
name: null
type: service
columns: 3
show_group_count: true
show_progress: true
type: custom:mini-media-player
volume_stateless: true
- entity: media_player.sonos_move_keuken
hide:
controls: true
icon: true
info: true
max_volume: 100
min_volume: 0
name: hide
play_pause: true
power: true
progress: true
source: true
type: custom:mini-media-player
type: vertical-stack
mode: vertical
type: custom:stack-in-card
Thanks a lot!
Thanks a lot - now I got itā¦
The entity in the chip card was missing too - now perfect
Thatās handled by the pseudo element on the header. have you copied all the code? In particular the bit starting with this:
/* Pseudo element for background & other card styling */
ha-card:before {
content: "";
.
.
.
Youāve left off the closing %}
here:
+ (expand(states.cover.volets_maison) | selectattr( 'state', 'eq', 'open') | list | count) %}
To change weather providers, just change the weather entity to weather.whatever
.
For help styling the mini-media-player
card, you will get a better response posting in the Mini Media Player thread:
or card-mod
thread:
Iāve been using these dashboards so much recently. I appreciate all the work gone into them.
Iāve been using the chips card for a Sonos speaker. Touch to play, touch to pause etc. (In green below)
This is the code:
- type: conditional
conditions:
- entity: media_player.office
state_not: playing
chip:
type: template
entity: media_player.office
icon: mdi:speaker
icon_color: grey
tap_action:
action: call-service
service: sonos.play_queue
data: {}
target:
device_id: 9b3c43e40824141046b290a01ee7f962
Iāve recently expanded my Sonos, and cant figure out where to get the device_id for the new Sonos speaker? Any suggestions?
yes man waze
Hey @rhysb, this time I propose a very difficult challenge:
- animate the mdi:sony-playstation icon like the original animation
p.s. I could buy you a dinner
Hey @rhysb, how does one apply the radial-gradient to the mushroom-shape-icon for the media card? Plan to use it to display the media progress. Thanks in advance brother from another mother.
type: custom:mushroom-media-player-card
entity: media_player.plex_plex_for_apple_tv_apple_tv
use_media_info: true
volume_controls: []
media_controls:
- previous
- play_pause_stop
show_volume_level: false
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (states('sensor.bens_iphone_battery_level')) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
I want to remove the border of the mushroom chip card. when i set the border in the console on 0 the border is gone, but not when i set the style in this example.
- type: custom:mushroom-chips-card card_mod: style: | ha-card { border-width: 0; } chips:
Try:
card_mod:
style: |
ha-card {
--chip-border-width: 0;
}
didnāt work this is my code:
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.willem
fill_container: true
layout: vertical
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-border-width: 0;
}
config.icon_color
is messing it up. Try like this dude from another brood.
type: custom:mushroom-media-player-card
entity: media_player.plex_plex_for_apple_tv_apple_tv
use_media_info: true
volume_controls: []
media_controls:
- previous
- play_pause_stop
show_volume_level: false
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(var(--icon-color) {{ (states('sensor.bens_iphone_battery_level')) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: var(--shape-color);
}
Try:
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.willem
fill_container: true
layout: vertical
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
still not working unfortunatelyā¦
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.willem
fill_container: true
layout: vertical
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
chips:
- type: entity
entity: sensor.iphone_van_willem_battery_level
icon_color: blue
Or is the ha-card set on a wrong place?
You first example was incomplete. Try like this:
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.willem
fill_container: true
layout: vertical
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.iphone_van_willem_battery_level
icon_color: blue
card_mod:
style: |
ha-card {
--chip-border-width: 0;
--chip-box-shadow: none;
}
I dont know what is going on, but the border is still visible
Post a screenshot.