Is there a way to show cover art when using the mushroom media card?
You can use search this topic to try and find something like this:
Appreciate that the topic is large but this is the easiest way to find what you want
1 Like
Thanks! This is helpful, looks like I also had an extra quote at the end of my content line after the semi-colon, which for some reason caused the text to move down a line.
{% raw %}
content: "{{ states |selectattr('entity_id', 'in', {% endraw %}{{entities}}{% raw %}) | list | selectattr('state', 'eq', 'on') | list | count}}";"
{% endraw %}
I’m trying to display a count of active occupancy sensors in the secondary info of a template card. This code works in the dev tools template section but not when i use in the card. If i remove the 3rd line it works and shows count but i need it to filter by device class since not every binary sensor is an occupancy sensor. Any help appreciated
{{ states.binary_sensor
| selectattr('state','eq','on')
| selectattr('attributes.device_class','eq','occupancy')
| list | count }}Preformatted text
I don’t use card mod so I can not help on this point 
Also card mod only works partially with Mushroom, there is no official support (because it’s a very hacky way to inject css into card).
1 Like
Understand. Its just strange as the built in animations tend to work on any type of icon from mushroom.
And its clearly browser dependant so wont be an easy fix either - so can fully appreciate that this is likely one to not need fixing as we can just work around it with card mod instead
Can you show the output you get in the dev tools please?
Edit: nvm think i got it for you. You need to include a device class is defined check:
{{ states.binary_sensor
| selectattr('state', 'eq', 'on')
| selectattr('attributes.device_class','defined')
| selectattr('attributes.device_class', 'eq', 'occupancy')
| list | count
}}
This seems to work for me in the template card.
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: |-
{{ states.binary_sensor
| selectattr('state', 'eq', 'on')
| selectattr('attributes.device_class','defined')
| selectattr('attributes.device_class', 'eq', 'occupancy')
| list | count
}}
icon: mdi:home
Yep, some browsers doesn’t react in the same way for keyframes with shadow dom…
Oh awesome work !
Could you share your code pour the bottom bar ?
Thanks Dimitri. Including the device class defined check fixed it for me
1 Like
I’ve updated my climate cards to better match mushroom styling
This uses the tile card so its really easy to customize.
All you have to do is change climate.study_aircon to your thermostat.
You can also add features like climate control using the UI.
features:
- type: climate-hvac-modes
hvac_modes:
- 'off'
- heat
- cool
type: tile
entity: climate.study_aircon
show_entity_picture: true
vertical: true
icon: none
name: ' '
state_content: state
card_mod:
style:
ha-tile-icon$: |
.shape {
--tile-icon-color: none !important;
}
ha-tile-info$: |
.primary {
font-family: Montserrat;
--primary-text-color: var(--contrast-100);
font-size: 1.5em !important;
font-weight: 600 !important;
line-height: 2em !important;
margin-top: -70px;
text-align: start;
content:"test";
z-index:1;
}
.primary:after {
content:'{{ state_attr('climate.study_aircon','temperature') }}°C';
text-transform: Uppercase;
}
.secondary {
font-size: 1.2em !important;
font-family: Montserrat;
text-transform: Uppercase;
color: {% if is_state('climate.study_aircon', 'off') %}
var(--contrast8) {% else %}
var(--contrast60) {% endif %} !important;
text-align: start;
}
.: |
ha-card {
--ha-card-border-width: 0;
background: {% if is_state('climate.study_aircon', 'cool') %}
linear-gradient(45deg, rgba(0,46,111,1), rgba(159,204,250,1))
{% elif is_state('climate.study_aircon', 'heat') %}
linear-gradient(45deg, rgba(153,25,35,1), rgba(253,172,90,1))
{% endif %};
padding-bottom:5px;
height: 150px;
width: 150px;
box-shadow: none;
}
25 Likes
Thank you! I sent you a message.
1 Like
Dimitri aka Mushroom king!..
Is it possible to use the mushroom alarm panel
With the original pending etc activated and waiting
Icon?..or ofcourse ya own made one?
Thanks!..and happy weekend!
Not quite sure what you mean by the original icons.
Can you send some pictures of what you mean?
Kinda like this?:
Code
type: custom:stack-in-card
cards:
- type: alarm-panel
states:
- armed_home
- armed_away
entity: alarm_control_panel.home_mode
card_mod:
style: |
.actions {
display: none !important;
}
ha-card {
padding-bottom: 0px !important;
margin-bottom: -20px !important;
}
- type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.home_mode
control_buttons: true
states:
- armed_home
- armed_away
card_mod:
style: |
mushroom-state-item {
display: none;
}
or do you still want to have the mushroom icon too?
Code
type: custom:stack-in-card
card_mod:
style: |
ha-card {
height: 122px;
}
cards:
- type: alarm-panel
states:
- armed_home
- armed_away
entity: alarm_control_panel.home_mode
card_mod:
style: |
.actions {
display: none !important;
}
.card-header {
color: transparent;
}
- type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.home_mode
control_buttons: true
states:
- armed_home
- armed_away
card_mod:
style: |
ha-card {
position: absolute;
top: 0px;
width: 100%;
}
1 Like
Here is another card I hope people find useful
Just replace light.bedroom with your light
features:
- type: light-brightness
type: tile
entity: light.bedroom
hide_state: false
show_entity_picture: false
tap_action:
action: toggle
icon: mdi:light-recessed
vertical: true
card_mod:
style:
ha-tile-icon$: |
.shape {
--tile-icon-color: none !important;
color: {% if is_state('light.bedroom', 'off') %} var(--contrast80) {% else %} var(--contrast4) {% endif %};
}
ha-tile-info$: |
.primary {
font-family: Montserrat;
color: {% if is_state('light.bedroom', 'off') %} var(--contrast80) {% else %} var(--contrast4) {% endif %} !important;
font-size: 1em !important;
font-weight: 600 !important;
line-height: 2em !important;
text-align: start;
margin-left:5px !important;
content:"test";
z-index:1;
}
.secondary {
font-family: Montserrat;
font-size: .9em !important;
color: {% if is_state('light.bedroom', 'off') %} var(--contrast80) {% else %} var(--contrast4) {% endif %} !important;
font-weight: 600 !important;
line-height: 2em !important;
margin-left:5px !important;
text-align: start;
content:"test";
z-index:1;
}
hui-tile-features$:
hui-light-brightness-tile-feature$:
ha-control-slider$: |
.slider {
border-radius: 16px !important;
--control-slider-border-radius: 16px !important;
--control-slider-background-opacity: 100 !important;
--control-slider-background: {% if is_state('light.bedroom', 'off') %} var(--contrast2) {% else %} linear-gradient(90deg, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, .8) 100%) {% endif %} !important;
--control-slider-thickness: 75px !important;
--control-slider-color: none !important;
height:15px !important;
}
.slider-track-bar:after {
background-color: black !important;
width: 15px !important;
height: 15px !important;
border-radius:30px !important;
}
.container: |
:host {
height: 40px !important;
padding: 0px !important;
border: 0px solid var(--background-color) !important;
border-radius: 16px !important;
}
.: |
ha-card {
background: {% if is_state('light.bedroom', 'off') %} var(--contrast4) {% else %} var(--yellow) {% endif %};
}
ha-tile-icon {
--mdc-icon-size: 40px;
}
13 Likes
Thank You Dimitri!..almost works…
however i could not disable the alarm with the keypad…
but that’s np… i have to disable and enable now to click on it…
the only thing im not able to get is
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 2px outset grey !important;
}
what i finally could use is as follow:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
border: 0.5px outset grey !important;
{% if states('alarm_control_panel.home_alarm') == 'armed_away' %}
border: 0.5px outset lime !important;
{% endif %}
height: 55px !important;
}
cards:
- type: alarm-panel
states:
- armed_away
entity: alarm_control_panel.home_alarm
card_mod:
style: |
.actions {
display: none !important;
}
.card-header {
color: transparent;
}
ha-card {
position: absolute;
top: -10px;
}
- type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.home_alarm
name: Alarm
control_buttons: true
card_mod:
style: |
ha-card {
position: absolute;
top: -7px;
width: 100%;
}
view_layout:
column: 4
Hello, can I somehow make Mushroom cards recognise that I am pressing the button when I press it? Change background while I press, highlight or other one.
So that you notice that the button is currently being pressed.
With the custom:button-card it was this style
card:
- '--mdc-ripple-color': var(--background_ripple)
- '--mdc-ripple-press-opacity': 0.5
Not by default no.
With card mod you can do this on card hover:
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
card_mod:
style: |
ha-card {
transition: 1s;
}
ha-card:hover {
background: rgba(var(--rgb-red), 0.8) !important;
}
Or this on card “active” kinda on tap, but doesnt work well with mobile taps:
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
card_mod:
style: |
ha-card {
transition: 1s;
}
ha-card:active {
background: rgba(var(--rgb-blue), 0.8) !important;
}
1 Like