Any help in this please? Sorry to bump thanks
I have a mushroom cover card and I want to display the icon with a different icon depending on the roller shutter position. I have already made a few attempts. Usually no icon is displayed at all. What can I do? Or does it not work with the cover card?
Here is an example:
type: vertical-stack
cards:
- type: custom:mushroom-cover-card
entity: cover.flur_dg_rollladen
layout: horizontal
show_position_control: false
show_tilt_position_control: false
show_buttons_control: true
fill_container: false
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
icon: |-
{% set position = state_attr('cover.flur_dg_rollladen', 'current_position') | float %}
{% if position > 90 %}
kuf:fts_shutter_100
{% elif position > 80 %}
kuf:fts_shutter_90
{% elif position > 70 %}
kuf:fts_shutter_80
{% elif position > 60 %}
kuf:fts_shutter_70
{% elif position > 50 %}
kuf:fts_shutter_60
{% elif position > 40 %}
kuf:fts_shutter_50
{% elif position > 30 %}
kuf:fts_shutter_40
{% elif position > 20 %}
kuf:fts_shutter_30
{% elif position > 10 %}
kuf:fts_shutter_20
{% else %}
kuf:fts_shutter_00
{% endif %}
Moin Hartmut,
I tested it also with the cover card and it seems that templating is not working in the icon section. With the template card and in the dev section under template it is working.
Could you please give me an example? I’m not entirely sure how to do this.
Hello,
Trying to make the Mushroom “Mute” button to the left in the attached image transparent/invisible, so that it looks like the button to the right which get its colour from the theme:
Light:
Dark:
Can anyone suggest a change in my code that achieves this please? :
type: custom:mushroom-media-player-card
entity: media_player.marantz_avr
volume_controls:
- volume_mute
fill_container: true
show_volume_level: false
collapsible_controls: true
use_media_info: false
icon_type: none
primary_info: none
layout: none
secondary_info: none
justify-content: center;
align-items: center;
card_mod:
style: |
background: none;
mushroom-media-player-volume-control$: |
mushroom-button {
--bg-color: rgba(var(--rgb-black), 0.0);
}
ha-card {
--ha-card-box-shadow: 0px;
height: 32px !important;
justify-content: center !important;
}
Hi everyone. New to home assistant. Is there anyway to move the icon to the right instead of on the left in the template card?
- type: custom:mushroom-template-card
primary: '{{ states(''input_text.ruimte_2'')}}'
secondary: >
{% if blablabla
{% endif %}
icon: mdi:music
entity: media_player.ruimte2
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 15px 0px 55px 10px;
}
mushroom-shape-icon$: |
.shape {
margin-top: -40px;
}
.: |
ha-state-icon {
{% if not is_state('media_player.ruimte2', 'off') %}
animation: music 2s ease-in-out infinite alternate;
transform-origin: 50% 100%
{% endif %}
}
@keyframes music {
0%, 100% { transform: translateY(0px) scaleX(1); }
20% { transform: translateY(2px) scaleX(0.9); }
40% { transform: rotateY(10deg) rotateZ(-10deg); }
60% { transform: translateY(-4px) scaleX(1.1); }
80% { transform: rotateY(-10deg) rotateZ(10deg); }
}
ha-card {
height: 100px !important;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
background-color: rgba({{ states("input_text.kleur_iconen")}},0.2) !important;
}
how do I get the secondary nice below the primary ?
alignment: end ?
type: custom:mushroom-template-card
primary: '{{ states(''input_text.friday_energy_cost_date'')}}'
secondary: >
test
icon: mdi:music
entity: media_player.ruimte2
card_mod:
style:
mushroom-shape-icon$: |
.shape {
margin-top: 0px;
}
.: |
ha-state-icon {
{% if not is_state('media_player.ruimte2', 'off') %}
animation: music 2s ease-in-out infinite alternate;
transform-origin: 50% 100%
{% endif %}
}
@keyframes music {
0%, 100% { transform: translateY(0px) scaleX(1); }
20% { transform: translateY(2px) scaleX(0.9); }
40% { transform: rotateY(10deg) rotateZ(-10deg); }
60% { transform: translateY(-4px) scaleX(1.1); }
80% { transform: rotateY(-10deg) rotateZ(10deg); }
}
ha-card {
padding-bottom: 40px;
height: 100px !important;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
background-color: rgba({{ states("input_text.kleur_iconen")}},0.2) !important;
}
1 Like
i have a mushroom template card
The primary text is showing the state of an entity (weather.home) + the state_attribute “temperature” of weather.
However i want a prefix to that text, showing the icon of the entity weather.home
Any idea how i do that?
I’m quite new to this and looking for a the code snippets for a Cover/Shutter to basically have this been working with a slider.
What would be the type? Is there a help file including all the Types for Cards that can be choosen from?
Thanks
Can anyone help on how to increase/widen the length of this temperature control box in “Mushroom Climate Card”? I tried all the mushroom parameters, and they seem just adjust the size of the “+ -” or font.
Thanks in advance.
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
#container {
width: 500px;
}
Hi Frosty,
Thanks for your reply. I tried the suggested config, the box is widen to the right and overlapping the dial control. (Please see picture) Is it possible to shorten the Primary Info section (please see photo), and force the Temperature Control box to widen to the left not to the right?
it is possible, unfortunately I don’t have the ability for developer tools in chrome to see what element it is to change. I am sure someone else can help with finding the correct name to change.
I wanted to check out the Mushroom Card Mod and Style a little bit.
I have a shutter/cover dashboard for all of my Shutters. I configured them the following but wanted to add the some more syling.
Where should the card_mode code go in this example?
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Erdgeschoss
subtitle: ''
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-cover-card
entity: cover.hwr
show_position_control: true
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.flur
show_position_control: true
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.gastebad
show_tilt_position_control: false
show_position_control: true
show_buttons_control: true
Thanks a lot for little guidance
Card Mod should go at the very end of the code and be at the top level
- type: custom:mushroom-cover-card
entity: cover.gastebad
show_tilt_position_control: false
show_position_control: true
show_buttons_control: true
card_mod:
style: |
ha-card {
1 Like
personally I always put it at the top of the card I am modding, just easier to read imo
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Erdgeschoss
subtitle: ''
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-cover-card
card_mod:
style: |
entity: cover.hwr
show_position_control: true
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.flur
show_position_control: true
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.gastebad
show_tilt_position_control: false
show_position_control: true
show_buttons_control: true
so this card mod will edit the cover card
1 Like
Anyone an idea?
maybe show in pictures what you want?
Something like this?
The icon changes based on condition as does the weather state text.
type: custom:mushroom-template-card
icon: |
{% set icons = {
'sunny': 'mdi:weather-sunny',
'cloudy': 'mdi:weather-cloudy',
'partlycloudy': 'mdi:weather-partly-cloudy',
'rainy': 'mdi:weather-rainy',
'fog': 'mdi:weather-fog',
'lightning-rainy': 'mdi:weather-lightning-rainy',
'clear-night': 'mdi:weather-night',
'snowy': 'mdi:weather-snowy',
'snowy-rainy': 'mdi:weather-snowy-rainy'
} %} {{ icons[states(entity)|default('weather-cloudy-alert')] }}
icon_color: |
{% set colors = {
'sunny': '#FFA500',
'cloudy': '#778899',
'partlycloudy': '#FF8C00',
'rainy': '#4169E1',
'fog': '#2F4F4F',
'lightning-rainy': '#5A5A5A',
'clear-night': 'deep-purple',
'snowy': '#cccccc',
'snowy-rainy': 'light-blue',
'default': 'black'
} %} {{ colors[states(entity)|default('default')] }}
primary: |
{% set descriptions = {
'sunny': 'Sunny',
'partlycloudy': 'Partly Cloudy',
'cloudy': 'Cloudy',
'clear-night': 'Clear Night',
'fog': 'Foggy',
'snowy': 'Snow',
'lightning-rainy': 'Thunderstorms',
'rainy': 'Rainy',
'snowy-rainy': 'Snowy Rainy'
} %} {{ descriptions[states(entity)] }}
secondary: '{{ states(''sensor.current_outdoor_temperature_bt1_30002'') | round(1) }}°C'
tap_action:
action: navigate
navigation_path: /panel-backend/weather_panel
hold_action:
action: none
double_tap_action:
action: none
fill_container: false
multiline_secondary: false
entity: weather.forecast_home
2 Likes