do you want to recreate that card? is that what yours asking. I can do something like that for you later if no one has replied before then
1 Like
Yes, if you can give me a hint that would be great, thank you. I was just trying to recreate the same one. I left a message on original thread on Reddit but the post was old so OP didn’t replied. This is how my current card looks like, btw is that normal behavior for the turn on/off button only works to turn off the TV. Tried turning it on with that power button there but it didn’t do anything.
I use WoL (wake on lan) in the configuration.yaml to turn the TV on.
do you have separate entity’s for controlling netflix etc or is that through a service call for the TV.
OK I can recreate the card easy enough. we just need to workout how to edit the Netflix buttons. to work for you.
feel free to private message me so we don’t fill the topic with unrelated mushroom posts
edit:
incase anyone wanted the code.
it’s done on my LG TV WebOS with a service call to the source list. stack-in-card, card_mod and custom brand icons
type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.lg_webos_tv_uk6470plc
volume_controls:
- volume_mute
- volume_buttons
- volume_set
media_controls:
- play_pause_stop
- on_off
use_media_info: false
layout: horizontal
icon_type: entity-picture
card_mod:
style: |
ha-card {
border: 0px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:netflix
icon_color: red
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.lg_webos_tv_uk6470plc
data:
source: Netflix
card_mod:
style: |
ha-card {
border: 0px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: phu:prime-video
icon_color: light-blue
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.lg_webos_tv_uk6470plc
data:
source: Prime Video
card_mod:
style: |
ha-card {
border: 0px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: phu:apple-tv
icon_color: yellow
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.lg_webos_tv_uk6470plc
data:
source: 'Apple TV '
card_mod:
style: |
ha-card {
border: 0px;
}
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: 0px;
}
primary: ''
secondary: ''
icon: phu:disney-plus
icon_color: blue
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.lg_webos_tv_uk6470plc
data:
source: Disney+
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: phu:youtube
icon_color: red
card_mod:
style: |
ha-card {
border: 0px;
}
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.lg_webos_tv_uk6470plc
data:
source: YouTube
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: phu:bbc
icon_color: orange
card_mod:
style: |
ha-card {
border: 0px;
}
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.lg_webos_tv_uk6470plc
data:
source: BBC iPlayer
10 Likes
can someone show me if there is any way to show the value of the input_number in this card?. I dont want default way, because it takes too much space on the left of the slider. I would prefer the number to be shown in the middle within the slider perhaps.
you could use the default way and use card_mod to move it with margins to where you want. unless someone has a better way
Hello, everybody !
Guys, help please, I’m trying to combine secondary text styling and icon animation in mushroom template card, but I can’t get them to work together, only separately either text styling or icon animation.
card_mod:
style: |
ha-card {
--card-secondary-font-weight: 500;
}
mushroom-shape-icon$: |
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
What am I missing, can you tell me ?
look at this guide
scroll down to “What the $ and .: | symbols do”
you will need something like this
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: blue !important;
}
.: |
ha-card {
background: red;
}
1 Like
Thank you, that’s exactly what was missing !
1 Like
Hello together, i am trying to get a liitle visual feedback when i touch the up/down button of my Cover Card.
I already tried it with:
type: custom:mushroom-cover-card
card_mod:
style:
mushroom-cover-buttons-control$:
mushroom-button:nth-child(2)$: |
.button ::slotted(*) {
--mdc-ripple-color: blue
--mdc-ripple-press-opacity: 0.5;
}
mushroom-button:nth-child(1)$: |
.button ::slotted(*) {
--mdc-ripple-color: blue
--mdc-ripple-press-opacity: 0.5;
}
mushroom-button$: |
.button ::slotted(*) {
--card-mod-icon: mdi:access-point;
}
entity: cover.buero
show_position_control: true
show_buttons_control: true
I found stuff like that in the Forum, but it doesnt work in my case.
Anyone any other idea how to get any feedback?
Thanks
Patrick
Hello!
I hope someone could help me with this card.
I want to have it looks like it is just 1 card.
And is it possible to add another picture next to the other one ?
use custom:stack-in-card or card_mod with margins and remove relevant borders. if you need help post your code atemp and we can help you from there
Yes ofcourse. I had some problems with copy/paste but here it is
Edit: and is it possible to move the chips next to the picture ?
type: vertical-stack
cards:
- type: custom:mushroom-template-card
title: null
subtitle: null
alignment: justify
picture: /local/Jayden.jpg
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.weerstation_kamer_jayden_temperature
icon_color: red
- type: entity
entity: sensor.weerstation_kamer_jayden_humidity
icon_color: indigo
- type: entity
entity: sensor.weerstation_kamer_jayden_carbon_dioxide
icon_color: green
- type: template
icon: |-
{% if is_state('binary_sensor.openclose_14', 'closed') %}
mdi:window-closed
{% else %}
mdi:window-open
{% endif %}
content: |-
{% if is_state('binary_sensor.openclose_14', 'off') %}
Closed
{% else %}
Open
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.openclose_14', 'off') %}
green
{% else %}
red
{% endif %}
tap_action:
action: more-info
entity: binary.sensor.openclose_14
alignment: start
- type: horizontal-stack
cards:
- type: custom:mushroom-cover-card
entity: cover.zonwering_links
name: Links
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.zonwering_rechts
name: Rechts
show_buttons_control: true
For some reason my layout broke and the black text is now light grey and I can’t seem to change it. Any ideas? Since it is showing latest lightnings I haven’t used the card for several months so no clue what version broke this.
type: conditional
conditions:
- entity: sensor.blitzortung_lightning_counter
state_not: '0'
- condition: state
entity: sensor.blitzortung_lightning_counter
state_not: unavailable
card:
type: custom:mushroom-template-card
primary: '{{ states("sensor.blitzortung_lightning_counter") }} blixtnedslag'
secondary: >-
Senast {{states("sensor.blitzortung_lightning_distance").replace('unknown',
'0') }} km bort kl.
{{states("input_datetime.senaste_blixtnedslag").replace(":00", "") }},
närmaste {{states("input_number.narmaste_blixtnedslag_km") }} km.
icon: mdi:weather-lightning
icon_color: red
entity: sensor.blitzortung_lightning_counter
hold_action:
action: more-info
tap_action:
action: url
url_path: https://map.blitzortung.org/#10/xxx
card_mod:
style:
ha-markdown $: ''
.: |
ha-card {
margin: 0px 15px 17px 15px;
--ha-card-background: rgba(250, 250, 250, 1.0);
color: #404040;
font-weight: 300;
text-align: left;
border-radius: 15px;
--primary-text-color: #404040;
--secondary-text-color: #404040;
--mdc-icon-size: 35px;
}
mushroom-shape-icon {
--icon-color: red !important;
}
}
if you start with this let me know how it looks will need some modifications regarding margins.
my theme doesn’t use borders so displays differently
type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
alignment: justify
picture: /local/Jayden.jpg
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.weerstation_kamer_jayden_temperature
icon_color: red
- type: entity
entity: sensor.weerstation_kamer_jayden_humidity
icon_color: indigo
- type: entity
entity: sensor.weerstation_kamer_jayden_carbon_dioxide
icon_color: green
- type: template
icon: |-
{% if is_state('binary_sensor.openclose_14', 'closed') %}
mdi:window-closed
{% else %}
mdi:window-open
{% endif %}
content: |-
{% if is_state('binary_sensor.openclose_14', 'off') %}
Closed
{% else %}
Open
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.openclose_14', 'off') %}
green
{% else %}
red
{% endif %}
tap_action:
action: more-info
entity: binary.sensor.openclose_14
alignment: start
- type: horizontal-stack
cards:
- type: custom:mushroom-cover-card
card_mod:
style: |
ha-card {
border: none;
}
entity: cover.zonwering_links
name: Links
show_buttons_control: true
- type: custom:mushroom-cover-card
card_mod:
style: |
ha-card {
border: none;
}
entity: cover.zonwering_rechts
name: Rechts
show_buttons_control: true
1 Like
you will have to use this for font colour on a template card.
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: blue;
--card-secondary-color: orange;
}
1 Like
Hi all,
I am trying to get an mushroom-template-card icon to have an spinning border animation like this,
custom:mushroom-template-card
icon: none
primary: Gradient
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(farthest-side, rgb(var(--rgb-blue)) 94%, transparent) top/4px 4px no-repeat, conic-gradient(transparent 30%, rgb(var(--rgb-blue)));
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
--shape-animation: spin 1s infinite linear;
}
it works, however I would like to have the icon inside the icon-element remain static. Now it’s rotating everything… how would that work?
icon: mdi:shield-account-variant-outline
icon_color: grey
Thanks for the recommendations
BR Henk
Seems to working well!
I changed it a little bit. This is the result.
My boy loves trains 
https://ibb.co/WfHCG5f
1 Like