We got unofficial Mushroom Chip Badges a while ago:
1 Like
Have a look here:
Have been busy updating my 24/7 nest hub dashboard with some handy hacs cards
here is some of the code from the tabbed bit
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:tabbed-card
view_layout:
grid-area: main2
tabs:
- card:
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-title-card
view_layout:
grid-area: SUB4
- type: custom:mushroom-media-player-card
view_layout:
grid-area: SUB3
entity: media_player.den
fill_container: true
volume_controls:
- volume_mute
- volume_set
- volume_buttons
media_controls: []
show_volume_level: true
use_media_info: false
layout: horizontal
icon_type: none
secondary_info: none
primary_info: none
- type: media-control
entity: media_player.den
theme: Graphite
view_layout:
grid-area: SUB1
- square: true
columns: 2
type: grid
view_layout:
grid-area: SUB2
cards:
- type: picture
image: >-
https://i.scdn.co/image/ab67706c0000da84ea3ed42af3b7a87d9cfda357
tap_action:
action: call-service
service: media_player.play_media
data:
media_content_id: FV:2/9
enqueue: replace
media_content_type: favorite_item_id
target:
entity_id: media_player.den
hold_action:
action: none
- type: picture
image: >-
https://i.scdn.co/image/ab67706f00000003296dfaca9d08da66ad668073
tap_action:
action: call-service
service: media_player.play_media
data:
media_content_id: FV:2/30
enqueue: replace
media_content_type: favorite_item_id
target:
entity_id:
- media_player.den
hold_action:
action: none
- type: picture
image: >-
https://i.scdn.co/image/ab67616d0000b2737a67ab6d2ae75ae2093447d1
tap_action:
action: call-service
service: media_player.play_media
data:
media_content_id: FV:2/15
enqueue: replace
media_content_type: favorite_item_id
target:
entity_id: media_player.den
hold_action:
action: none
- type: picture
image: >-
https://thumbnailer.mixcloud.com/unsafe/600x600/extaudio/e/5/9/e/91b8-cc87-4a66-89a1-59e7116010e8
tap_action:
action: call-service
service: media_player.play_media
data:
media_content_id: FV:2/19
enqueue: replace
media_content_type: favorite_item_id
target:
entity_id: media_player.den
hold_action:
action: none
- type: picture
image: >-
https://i.scdn.co/image/ab67706f000000036ca28cfc2bdadf0b7e31192e
tap_action:
action: call-service
service: media_player.play_media
data:
media_content_id: >-
spotify://20103c9258d6fd2cdc76d4d3caed52de/spotify:playlist:37i9dQZF1DX3YMp9n8fkNx
enqueue: replace
media_content_type: spotify://playlist
target:
entity_id: media_player.den
hold_action:
action: none
- type: picture
tap_action:
action: call-service
service: media_player.play_media
data:
media_content_id: FV:2/35
enqueue: replace
media_content_type: favorite_item_id
target:
entity_id: media_player.den
hold_action:
action: none
image: >-
https://i.ebayimg.com/images/g/ncwAAOSwWoRepQIX/s-l400.jpg
layout:
grid-template-columns: 1% 66% 2% 31%
grid-template-rows: 15px
grid-template-areas: |
"SUB4 SUB4 SUB4 SUB4"
". SUB1 . SUB2"
"SUB3 SUB3 SUB3 SUB3"
view_layout:
grid-area: main2
attributes:
label: Media
9 Likes
Hi @rhysb,
There is a way to change the icons in mushroom-cover-card (for using with a projector screen), without creating a Template Cover in HA?
I need to change the icons behaviour, because when tap to “up” icon, the screen opens.
Thanks!!
You want to reverse the buttons? You can do like this:
Mushroom Cover Reverse Buttons
type: custom:mushroom-cover-card
entity: cover.garage_door
show_buttons_control: true
card_mod:
style: |
mushroom-cover-buttons-control {
transform: rotate(180deg);
}
or if you prefer:
Mushroom Cover Reverse Arrows
type: custom:mushroom-cover-card
entity: cover.garage_door
show_buttons_control: true
card_mod:
style:
mushroom-cover-buttons-control$: |
mushroom-button {
transform: rotate(180deg);
}
4 Likes
Great! Mind sharing the whole code?
Like this:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:washing-machine
icon_color: orange
entity: switch.washing_machine
- type: template
icon: mdi:washing-machine
icon_color: orange
tap_action:
action: none
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
{{ 'animation: shake 400ms ease-in-out infinite;' if is_state('sensor.washing_machine', 'on') }}
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
mushroom-template-chip:nth-child(2)$: |
mushroom-chip {
cursor: default !important;
}
ha-icon {
position: absolute;
left: -27px;
{{ 'animation: spin 1s linear infinite;' if is_state('sensor.washing_machine', 'on') }}
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
.: |
.chip-container :nth-child(2) {
--chip-background: none;
--chip-box-shadow: none;
--chip-border-width: 0;
width: 0px;
margin-left: calc(-1 * var(--chip-spacing));
}
1 Like
i love you ahaha. Thanks you 
1 Like
My advice to those who want to create a new dashboard is to use the swiper card. This card allows you to use more functions in tight spaces.
Example:
I used swiper cards in many areas in my new dashboard which I will publish in a few days with lite and full versions.
My example is normally a single page design. But in fact, thanks to this swiper card, it can accommodate my 22-page old design in a single page. You can of course also use browser-mod for additional pages or combine swiper card with it.
Example:
This is when nothing is swiped :
And this is when upper menu is swiped. It opens a new area where my remote stands.
You can also see the example in above gif.
3 Likes
Maybe I’m not the first, but my dashboard shows white/greyish borders:
They don’t seem to go away, anyone any idea where I could find the cause ?
Loved the cats on the header hahaha what kind of integrations you have for them? Have 5 at home, would love to add some automations (already have the feeding).
you can add ha-card-border-width: "0px" to your theme or use cardmod to remove it from the cards you dont´t want to have it.
2 Likes
Haha, I have the surepet flap which come with an integration.
2 flaps in the house to see if they left or came into the house
1 Like
Hi there!
how do you modify or remove the red color in the circle ?
type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:cctv
entity: group.cover_tous
icon_color: red
layout: vertical
badge_icon: >-
{% if is_state('binary_sensor.motion_sensor_salon', 'on') %}
mdi:motion-sensor
{% elif is_state('binary_sensor.fibaro_system_fgms001_motion_sensor_sensor',
'on') %}
mdi:motion
{% endif %}
badge_color: red
fill_container: false
tap_action:
action: navigate
navigation_path: securite
double_tap_action:
action: toggle
multiline_secondary: false
card_mod:
style: |
:host {
--mush-icon-size: 60px;
height: 90px;
}
1 Like
Yep!
type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:cctv
entity: group.cover_tous
icon_color: red
layout: vertical
badge_icon: >-
{% if is_state('binary_sensor.motion_sensor_salon', 'on') %}
mdi:motion-sensor
{% elif is_state('binary_sensor.fibaro_system_fgms001_motion_sensor_sensor',
'on') %}
mdi:motion
{% endif %}
badge_color: red
fill_container: false
tap_action:
action: navigate
navigation_path: securite
double_tap_action:
action: toggle
multiline_secondary: false
card_mod:
style: |
:host {
--mush-icon-size: 60px;
height: 90px;
}
Сan anyone help with the conditions and media player attribute?
I’m trying to change the background on mute. But the condition does not read the value from ‘is_volume_muted’ attribute. Is there any way to fix this?
example code
type: custom:mushroom-entity-card
entity: media_player.android_tv_192_168_31_254
card_mod:
style: |-
ha-card {
{% set mute = state_attr(config.entity,'is_volume_muted') %}
background:
{% if mute == 'true' %}
green
{% elif mute == 'false' %}
red
{% else %}
blue
{% endif %};
Try this…
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
:host {
--mush-icon-size: 60px;
height: 90px;
}
1 Like