Using this for youtube music, not spotify but can you share the script files, please? I wanna see if I can use this card too. Thanks.
where exactly do i wirte this? I have my dashboard complete but I am unsure of where to the card mod theme
I’ve just created a new card using a bunch of mushroom’s 
and changed the tap_action for the covers to more-info, however when I tap on the icon nothing happens at all.
I don’t know if this is something wrong with my card config or a bug…
Card Code
type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-title-card
title: Lounge
subtitle: '{{ states(''sensor.lounge_multisensor_air_temperature'')|float(0)}}°C'
alignment: start
- type: custom:mushroom-entity-card
entity: binary_sensor.paradox_z4_lounge_pir
primary_info: state
secondary_info: last-changed
fill_container: true
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.lounge_downlights
name: Downlights
layout: vertical
- type: custom:mushroom-light-card
entity: light.sliced_wood_lamp
name: Wood Lamp
layout: vertical
- type: custom:mushroom-cover-card
entity: cover.lounge_west_roller_shutter
name: West
layout: vertical
tap_action: more-info
- type: custom:mushroom-cover-card
entity: cover.lounge_centre_roller_shutter
name: Centre
layout: vertical
tap_action: more-info
- type: custom:mushroom-cover-card
entity: cover.lounge_east_roller_shutter
name: East
layout: vertical
tap_action: more-info
As a side note, how would I modify the code so the names of the first two light entities aren’t cut off due to being too long?
1 Like
It goes in your theme file. You are probably using the default one, so you will need to create one.
You must use this:
tap_action:
action: more-info
For the long names you must use template card to short the text ord card mod to change the font.
Greatings Steffen
1 Like
You can target a specific type of card by specifying the class instead of ha-card. For the Mushroom Template Card the class is .type-custom-mushroom-template-card, so we would add it like this to our theme:
card-mod-card: |
.type-custom-mushroom-template-card:active {
transform: scale(1.02);
transition: 0s;
}
2 Likes
Have a look here:
1 Like
Can you share your code ?
This are some interesting room card.
I made a little test, without cardmod for now
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.temperatura_studio
name: Studio
icon: mdi:space-station
icon_color: orange
layout: horizontal
fill_container: false
- square: false
columns: 3
type: grid
cards:
- type: custom:mushroom-climate-card
entity: climate.studioknx_2
primary_info: none
secondary_info: none
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
card_mod:
style: |
mushroom-shape-icon {
--card-mod-icon:
{% if is_state(config.entity, 'heat_cool') %}
mdi:autorenew
{% elif is_state(config.entity, 'heat') %}
mdi:fire
{% elif is_state(config.entity, 'cool') %}
mdi:snowflake
{% elif is_state(config.entity, 'dry') %}
mdi:water-percent
{% elif is_state(config.entity, 'fan_only') %}
mdi:fan
{% else %}
mdi:air-conditioner
{% endif %};
}
- type: custom:mushroom-light-card
entity: light.studio_knx_2
primary_info: none
secondary_info: none
tap_action:
action: toggle
- type: custom:mushroom-light-card
entity: light.lampada_scrivania
primary_info: none
secondary_info: none
4 Likes
Sure though it’s a work in progress. I’ve got a button card in the middle just to add some height to align the bottom chip card to the bottom - probably a much better way of accomplishing this but it works for me (the value is enough to align it to the bottom on my mobile).
I’ve changed it a bit since the screenshot
Note that the vertical padding is wrong here because this screenshot is taken from my PC - whereas im designing this for mobile. Not sure if anyone knows the right css to use to make either the bottom chip card align bottom, or to make the top template card take up all available vertical space?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Kitchen
secondary: '{{ states(''sensor.display_temperature'') }}°'
icon: mdi:silverware
icon_color: none
entity: light.living_room_lights
tap_action:
action: navigate
navigation_path: bathroom
hold_action:
action: toggle
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
ha-card {
margin-bottom: 30px;
}
:host {
--mush-card-primary-font-size: 16px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: group.kitchen_motion
icon: >-
{{ iif(is_state('group.kitchen_motion', 'on'), 'mdi:motion-sensor',
'mdi:motion-sensor-off') }}
icon_color: black
card_mod:
style: |
ha-card {
--chip-background: {{ iif(is_state("group.kitchen_motion", "on"), "rgba(255,255,255,0.8)", "rgba(0,0,0,0.2)") }};
}
- type: template
entity: light.kitchen_lights
icon: >-
{{ iif(is_state('light.kitchen_lights', 'on'),
'mdi:lightbulb-multiple', 'mdi:lightbulb-multiple-off') }}
card_mod:
style: |
ha-card {
--chip-background: {{ iif(is_state("light.kitchen_lights", "on"), "rgba(255,255,255,0.8)", "rgba(0,0,0,0.2)") }};
}
alignment: end
card_mod:
style: |
ha-card {
--chip-spacing: 5px;
padding-right: 10px;
}
card_mod:
style: |
ha-card {
aspect-ratio: 1/0.8;
background: rgba(194,175,201,255);
--primary-text-color: black;
--secondary-text-color: black;
}
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
Can you tell me what to do to have a photo instead of an icon?
please
Hi,
I have been trying to get my light cards to fit to the phone screen more nicely.
No matter how hard I try, I cannot get the height adjusted.
What is wrong here:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.olohuone1
name: Lipasto
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: false
card_mod:
style: |
ha-card {
height: 100px;
}
Hello,
I have changed the image of a scene via costumize.yaml and it is also displayed to me.
How do I manage to display this image in a template card etc.? no matter what I do, I can’t do it.
can you help me?
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
show_entity_picture: true
entity_picture: /local/Lustiger.jpeg
icon_color: white
layout: vertical
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.kuche_sonnenuntergang_savanne
secondary: Night
- type: custom:mushroom-template-card
icon: mdi:television
icon_color: white
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.tv_lights
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
secondary: Media
- type: custom:mushroom-template-card
layout: vertical
entity: script.1590801199735
icon: mdi:lightbulb-on
icon_color: white
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.living_area_lights_100
double_tap_action:
action: none
hold_action:
action: none
secondary: 'On'
card_mod:
style: |
ha-card {
--chip-box-shadow: 0px 0px;
background: #3d5afe
}
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
card_mod: null
style: |
ha-card {
background: #3d5afe
}
costumize.yaml
scene.kuche_sonnenuntergang_savanne:
friendly_name: Savanne
entity_picture: /local/Lustiger.jpeg
That worked great, thank you so much!!
2 Likes
Mushroom friends,
I am looking for guidance on how to make the fade-out green border on the below Template Chip conditional on the value of an input_boolean.
I currently have this:
My code:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: group.alle_lichten
icon: >-
{{ 'mdi:lightbulb-on-90' if is_state(entity, 'on') else
'mdi:lightbulb-off-outline' }}
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.on_off_toggle_conditional_lights_on
card_mod:
style:
.: |
ha-card:after {
content: "{{ expand(states.group.alle_lichten) | selectattr( 'state', 'eq', 'on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -10px;
right: -0px;
width: 16px;
height: 16px;
font-size: 11px;
}
ha-card {
--chip-background: rgba(var(--rgb-green), 0.2); /*Background color of chip */
box-shadow: 0px 0px 8px 4px rgba(var(--rgb-state-person-home), 0.6) !important;
/* border: solid 2px !important; */
}
My goal: only show the green fade-out border if “input_boolean.on_off_toggle_conditional_lights_on” is ‘on’, whilst keeping the rest of the chip + badge intact
4 Likes
{% if is_state('input_boolean.on_off_toggle_conditional_lights_on', 'on') %}
--chip-background: rgba(var(--rgb-green), 0.2); /*Background color of chip */
box-shadow: 0px 0px 8px 4px rgba(var(--rgb-state-person-home), 0.6) !important;
{% endif %}
Thank you @rhysb for the amazing task of creating all these card layouts.
I’ve ‘stolen’ your media card and was wondering if it possible to move the volume control icon to a row below?
So it would look something like this:
2 Likes
I have everything installed and effect is the same:( Ive got only one sensor which tells me that some device have battery at 0 level :( but its not telling which one:(
Start simple and see if this works:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:mushroom
icon_color: red
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Mushroom
content:
type: custom:mushroom-template-card
primary: Mushroom
secondary: It works!
icon: mdi:mushroom
icon_color: red