Tried to combine this and also the icon based on content type, cannot do both at the same time. how can I combine two styling options?
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.lounge_shield
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
volume_controls:
- volume_set
- volume_mute
media_controls:
- previous
- play_pause_stop
- next
- on_off
- shuffle
- repeat
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
{% set media_type = state_attr(media_player.lounge_shield, 'media_content_type') %}
--card-mod-icon:
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'movie' %}
mdi:movie-open
{% elif media_type == 'music' %}
mdi:music
{% elif media_type == 'playlist' %}
mdi:music
{% else %}
mdi:play
{% endif %};
}
mushroom-state-info$: |
.primary:before {
content: "{{ state_attr('media_player.lounge_shield', "friendly_name") }} -";
}
1 Like
Sylwester
September 2, 2022, 9:44am
2676
Question about Mushroom Light Card.Is it possible to have different icon depends on state? When is “on” different and when is “off” different.
Kabala
September 2, 2022, 10:04am
2677
Hi,
card_mod:
style: |
mushroom-shape-icon{
animation:
{% if is_state('binary_sensor.solar_pumpe', 'on')%} blink 2s linear infinite;
{% endif %}
}
@keyframes blink {
50% {opacity: 0;}
}
Proche72
September 2, 2022, 10:08am
2678
even more off topic - what are you using for recurring reminders?
Gotta love going off topic - Recurring Task Notification with datetime calculations (HVAC Filter Replacement Reminder) - #15 by webmediart-github
Its creating a date time helper and then using the card to reset to 0.
Ive made a decluttering template to duplicate them.
3 Likes
edwardtich
September 2, 2022, 11:37am
2680
Custom element doesn’t exist: mushroom-media-player-card
all other elements mushroom work well
no player
any help
image969
September 2, 2022, 12:33pm
2681
Does it have to be done in card-mod? Can it be included in this part of the code where you have the icon itslf changing based on volume?
- type: custom:mushroom-template-card
entity: input_number.fan_slider
icon: |
{% set vol_level = states(entity) | float %}
{% if vol_level == 0 %}
mdi:fan
{% elif vol_level > 80 %}
mdi:fan
{% elif vol_level < 40 %}
mdi:fan
{% else %}
mdi:fan
{% endif %}
brewston
September 2, 2022, 1:45pm
2682
Yes, that’s it. But the existing cards I have are smaller and transparent, which I used this to achieve :
ha-card {
background: none ;
width: 65px;
display: flex;
}
I’m trying to figure out where to drop that in to that card. At some point though, I think I’m going to need to learn what | $ .: etc all mean
macfly92
September 2, 2022, 2:00pm
2683
Hello,
First of all, thanks you for this incredible cards set.
Is anyone know if it is possible to add a button at the end of a light card ? In my case, it is for activate or not motion detection in the room the light belong.
The goal is to look like this :
Thanks you.
Sylwester
September 2, 2022, 3:00pm
2684
Try:
card_mod:
style: |-
@keyframes blink {
50% {opacity: 0;}
}
mushroom-shape-icon {
{% if is_state('binary_sensor.solar_pumpe', 'on') %}
animation: blink 2s linear infinite;
{% endif %}
}
image969
September 2, 2022, 3:09pm
2685
actually i added a new card to test and copied this code and nothing is happening. I swapped out dummy_fan for mine. Is there something else Im supposed to be changing as well that im missing?
filikun
September 2, 2022, 3:41pm
2686
Is there a way to control how big the shape icon area (area around the icon itself) is? I’m using the squares and would like them to be a little smaller without making the icon size smaller.
itsboo
September 2, 2022, 7:32pm
2688
this is not working with if condition …without if condition animation works
gnec220
September 2, 2022, 8:08pm
2689
Hi,
is it possible to show two icons beside eachother in chip card ? if yes does someone have and sample code how they implemented it ?
itsboo
September 2, 2022, 8:23pm
2690
rhysb:
mushroom-shape-icon$: |
hey can i do something like this? i already have some cardmode styles soo how do i add animation to it…my code:
card_mod:
style: |
ha-card {
background: ;
height: 60px !important;
}
:host {
--icon-size: 40px !important;
--card-primary-font-size: 12px !important;
--card-primary-line-height: px!important;
--card-secondary-font-size: 11px!important;
}
mushroom-shape-icon$: |
ha-icon {
--icon-animation:
{% if is_state('binary_sensor.oneplus_6t_is_charging', 'off')%} clip 2s linear infinite;
{% endif %}
}
@keyframes clip {
0% {
clip-path: inset(70% 0 0 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}
@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;
}
}
}
rolfokevin
September 2, 2022, 9:06pm
2691
Combined a few cards on here to make one specific for my use needs. Added a conditional drop down to a media card that allows me to control my ambient tv backlighting all from one card. Any ideas how I can make this better? or possible change the state to what is playing instead of off or on?
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 20px
margin: '-4px -4px -8px -4px'
cards:
- type: custom:mushroom-media-player-card
entity: media_player.shield_universal
name: Shield TV
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: true
media_controls:
- on_off
- play_pause_stop
- previous
- next
volume_controls:
- volume_set
- volume_mute
fill_container: true
card_mod:
style: |
mushroom-shape-icon {
{% set media_type = state_attr(config.entity, 'media_content_type') %}
--card-mod-icon:
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'movie' %}
mdi:movie-open
{% elif media_type == 'music' %}
mdi:music
{% elif media_type == 'playlist' %}
mdi:music
{% else %}
mdi:play
{% endif %};
}
:host {
{% if not is_state(config.entity, 'off') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
{% endif %}
background-size: 50%, 100%;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: lighten;
}
:host([dark-mode]) {
background-blend-mode: darken;
}
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.ambilight_dropdown
primary: ''
secondary: ''
icon: >-
{{ 'mdi:chevron-down' if is_state(entity, 'off') else 'mdi:chevron-up'
}}
icon_color: disabled
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.ambilight_dropdown
state: 'on'
card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
entity: light.ambilight_wled
icon: mdi:television-ambient-light
name: Ambilight
layout: horizontal
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
use_light_color: true
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
10 Likes
davidnestico
September 2, 2022, 10:36pm
2692
Hey! Another question I have is how do I remove all this blank space if possible or make it less?
2 Likes
rhysb
September 3, 2022, 1:24am
2693
Perhaps something like this:
type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: '{{ state_attr(entity, ''friendly_name'') | title }}'
icon: |+
{% set battery_level = (states(entity) | int / 10) | round(0) | int * 10 %}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
icon_color: |-
{% set battery_level = states(entity) | int %}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
layout: horizontal
tap_action:
action: none
entity: sensor.rhys_phone_battery_level
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% if is_state('binary_sensor.rhys_phone_is_charging', 'on')%}
--icon-animation: clip 2s linear infinite;
{% endif %}
}
@keyframes clip {
0% {
clip-path: inset(100% 0 0 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}
.shape {
{% if is_state('binary_sensor.rhys_phone_is_charging', 'on')%}
--shape-animation: ping 2s infinite;
{% endif %}
}
@keyframes ping {
0% {
{% set battery_level = states(config.entity) | int %}
box-shadow: 0 0 0 0 rgba(var(
{% if battery_level > 90 %}
--mush-rgb-green
{% elif battery_level > 60 %}
--mush-rgb-light-green
{% elif battery_level > 50 %}
--mush-rgb-lime
{% elif battery_level > 40 %}
--mush-rgb-yellow
{% elif battery_level > 30 %}
--mush-rgb-amber
{% elif battery_level > 20 %}
--mush-rgb-orange
{% elif battery_level > 10 %}
--mush-rgb-deep-orange
{% else %}
--mush-rgb-red
{% endif %}
), 0.7);
}
70% {
box-shadow: 0 0 0 10px transparent;
}
100% {
box-shadow: 0 0 0 0 transparent;
}
}
.: |
ha-card {
background: none;
height: 60px !important;
}
:host {
--icon-size: 40px !important;
--card-primary-font-size: 12px !important;
--card-secondary-font-size: 11px!important;
}
1 Like
rhysb
September 3, 2022, 1:43am
2694
You can do it like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
entity: light.dining_room_light
show_brightness_control: true
- type: custom:mushroom-entity-card
entity: input_boolean.dining_room_motion_override
primary_info: none
secondary_info: none
card_mod:
style: |
ha-card {
width: 66px;
margin-left: auto;
top: -120px
}
card_mod:
style: |
ha-card {
height: 120px;
}
2 Likes
