Frosty
October 31, 2024, 4:58pm
1297
although youāve deleted your post, if your after a radial dial with mushroom you could do it like this.
type: custom:mushroom-template-card
primary: Memory
icon: none
layout: horizontal
icon_color: pink
entity: sensor.system_monitor_memory_usage
badge_icon: mdi:memory
badge_color: pink
secondary: ""
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%,
transparent calc(60% + 1px)),
conic-gradient(var(--icon-color) {{ states(config.entity) }}% 0%,
var(--card-background-color) 0% 100%);
}
.shape:after {
content: '';
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: var(--shape-color);
}
.: |
ha-state-icon:after {
content: "{{ states(config.entity) | round(0) }}%";
font-size: var(--card-primary-font-size);
position: absolute;
top: 19px;
left: 8px;
}
ha-card {
margin-left: 20px;
margin-top: 7px;
Change float to int. Should give you 5 instead of 5.00
Would like to have 5.00 as value. But mushroom card cuts the 0s at the end. Default value format for the entity is 5.00` (two decimal places). Default entity card is showing correct. Only mushroom card is cutting trailing zeros.
mahlers2
November 5, 2024, 4:04pm
1300
Hi,
I currently updated my Home assistant from 2.6 ā 2.10 and since then my Cards didnĀ“t work anymore.
Normally when I click the light bulb there is a detaile window with the single lights in it that opens. But now if I press it, it just opens sensor stats.
The Card:
The Code:
type: custom:vertical-stack-in-card
horizontal: true
card_mod:
style: |
ha-card {
padding: 15px;
}
cards:
- type: custom:mushroom-template-card
primary: Schlafzimmer
secondary: |-
{{state_attr('climate.','current_temperature') }} Ā°C
{{states('sensor.schlafzimmer_heizung_humidity') | round(0) }}%
icon: mdi:bed-double-outline
multiline_secondary: true
badge_color: blue
fill_container: true
layout: horizontal
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.total_active_lights_schlafzimmer
icon: mdi:lightbulb
card_mod:
style: |
ha-card {
{% if states('sensor.total_active_lights_schlafzimmer') < '0.0' %}
--card-mod-icon-color: grey;
{% elif states('sensor.total_active_lights_schlafzimmer') > '0.9' %}
--card-mod-icon-color: orange;
{% endif %}
}
- type: entity
entity: cover.schlafzimmer_jalousie
content: sensor.schlafzimmer_jalousie_status
icon: mdi:window-shutter
card_mod:
style: |
ha-card {
{%- if is_state('sensor.schlafzimmer_jalousie_status','SchlieĆt') or is_state('sensor.schlafzimmer_jalousie_status','Ćffnet') -%}
--card-mod-icon: mdi:window-shutter-open;
--card-mod-icon-color: grey;
{% elif is_state('sensor.schlafzimmer_jalousie_status','Offen') -%}
--card-mod-icon: mdi:window-shutter-open;
--card-mod-icon-color: orange;
{% elif is_state('sensor.schlafzimmer_jalousie_status','Geschlossen') -%}
--card-mod-icon: mdi:window-shutter;
--card-mod-icon-color: #012b6e;
{% elif states('sensor.schlafzimmer_jalousie_status').replace(' %','')|float > 1 -%}
--card-mod-icon: mdi:window-shutter-open;
--card-mod-icon-color: #b38b50;
{% endif %}
}
- type: template
entity: climate.schlafzimmer_heizung
content: >-
{{ state_attr('climate.schlafzimmer_heizung','target_temp_low') }}
Ā°C
icon: mdi:thermometer
tap_action:
action: more-info
card_mod:
style: |
ha-card {
{%- if state_attr('climate.schlafzimmer_heizung','hvac_action') == 'idle' or (state_attr('climate.schlafzimmer_heizung','target_temp_low') < state_attr('climate.schlafzimmer_heizung','current_temperature')) -%}
--card-mod-icon: mdi:thermometer-off;
--card-mod-icon-color: #144380;
{% elif state_attr('climate.schlafzimmer_heizung','hvac_action') == 'heating' and (state_attr('climate.schlafzimmer_heizung','target_temp_low') > state_attr('climate.schlafzimmer_heizung','current_temperature')) -%}
--card-mod-icon: mdi:thermometer-chevron-up;
--card-mod-icon-color: #b30505;
{% endif %}
}
card_mod:
style: |
ha-card {
right:10%;
}
The Code:
type: custom:popup-card
entity: sensor.total_active_lights_wohnzimmer
title: Licht Wohnzimmer
dismissable: true
size: normal
card:
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-light-card
name: Stehlampe Fenster
icon: mdi:floor-lamp-dual
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: false
hold_action:
action: more-info
double_tap_action:
action: more-info
entity: light.wohnzimmer_stehlampe_fenster
- type: custom:mushroom-light-card
name: Stehlampe Sofa
icon: mdi:floor-lamp-dual
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: false
hold_action:
action: more-info
double_tap_action:
action: more-info
entity: light.wohnzimmer_stehlampe_sofa
- type: custom:mushroom-light-card
name: Ambiente Licht
icon: hue:play-bar-two
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: false
hold_action:
action: more-info
double_tap_action:
action: more-info
entity: light.wohnzimmer_ambiente_licht
- type: custom:mushroom-light-card
name: Esstisch
icon: mdi:chandelier
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: false
hold_action:
action: more-info
double_tap_action:
action: more-info
entity: light.wohnzimmer_esstisch_deckenlampe
- type: custom:mushroom-light-card
name: Marokkanisches Licht
icon: mdi:lamp
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: false
hold_action:
action: more-info
double_tap_action:
action: more-info
entity: light.wohnzimmer_marokkanische_lampen
I cant figure out why HA is not able to open the Detailed Window like it did beforeā¦
jsb
November 5, 2024, 8:12pm
1301
Quick question regarding card-mod in themesā¦
Iām building a dashboard with Mushroom Cards and Iād like to have 2 different fonts for the primary & secondary info. Right now I can achieve this by adding the following to each mushroom card manually:
style:
mushroom-state-info$: |
span.primary {
font-family: Inter-Bold;
}
span.secondary {
font-family: Inter-Light;
}
Iād like to be able to apply this through a theme so it kicks in on all Mushroom cards. How can I achieve this?
Thanks in advance.
1 Like
vilord
November 10, 2024, 2:14pm
1302
(sorry for the hacky photo)
This is what I get now if I use vertical layout:
Thank you!!!
1 Like
dFrost85
November 13, 2024, 10:42pm
1303
Can anyone point me into the right direction, why those two rows are not overlapping for me please? I copied the exact code and just changed the entities.
cards:
- card_mod:
style: |
ha-card {
z-index: 1;
height: 70px !important;
}
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width:18px; height: 18px; color:#ff33ff;">
</ha-icon><span style="font-size:120%; font-weight: 300;">
${states['sensor.wohnzimmer_temperature'].state}Ā°C </span>
<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:120%; font-weight: 300; text-align: center;">
${states['sensor.wohnzimmer_humidity'].state}%</span>`
]]]
entity: sensor.wohnzimmer_humidity
name: ĪĻĪ¼Ī±ĻĪ¹Īæ
show_icon: false
styles:
card:
- border-style: none
- box-shadow: 0px 0px 10px -9px black
custom_fields:
graph:
- padding-top: 0%
- width: 100%
- height: 100%
- margin-bottom: "-3%"
temp:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 20px
- padding-bottom: 10%
- font-size: 65%
grid:
- grid-template-areas: "\"n n\" \"temp temp\" \"graph graph\""
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
icon:
- width: 25px
- color: auto
name:
- font-size: 87%
- font-weight: var(--mcg-title-font-weight, 500)
- justify-self: start
- margin-top: 6px
- margin-left: 12px
- opacity: 0.65
type: custom:button-card
- animate: true
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
entities:
- color: "#ff33ff"
entity: sensor.wohnzimmer_temperature
name: Temperature
- color: "#3399ff"
entity: sensor.wohnzimmer_humidity
name: Humidity
y_axis: secondary
font_size: 50
height: 50
hours_to_show: 24
line_width: 3
show:
fill: fade
icon: false
legend: false
name: false
state: false
type: custom:mini-graph-card
type: custom:stack-in-card
Thank you so much!
PS: The alphabetical sorting is done by my Home Assistant automatically.
mill7
November 13, 2024, 10:50pm
1304
I have fan card
type: custom:mushroom-fan-card
entity: fan.cabinet_pritok
show_percentage_control: true
icon_animation: true
name: ŠŃŠøŃŠ¾Šŗ
fill_container: true
show_oscillate_control: false
collapsible_controls: false
primary_info: last-changed
I want to write in the primary_info field both last-changed and name, please show me by example how to do it ?
That is the effect I want to achieve:
Somehow editing the previous gave me an 422 error no matter whatā¦
I cant get it working. I want to show another Icon if the state is 50% and an other text.
type: custom:mushroom-cover-card
entity: cover.rollladen_office
name: Rolladen
show_position_control: true
show_buttons_control: true
layout: horizontal
card_mod:
style: |
ha-state-icon {
--card-mod-icon: >
{% if state_attr(entity, "current_position") == 50 %}
mdi:weather-sunny-alert
{% else %}
{% endif %}
}
I can change the icon, but i am not able to change only in this specific position.
Solved it myself. The card-mod which enables CSS was not installedā¦
Stuartie
November 15, 2024, 4:42pm
1308
I have the following but when I add it to a badge using the new sections it doesnāt keep itās alignment correctly for the bell and the hamburger.
Top is inside a the badge, below is before using a normal card inside a section. Iād like to maintain the layout of the bottom but inside a badge.
Code Snippet
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: template
content: "{{ now().strftime(\"%H:%M %a, %-d %b\") }}"
card_mod:
style: |
/* Style date & time */
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-border-width: 0;
}
- type: template
content: "{{ states('sensor.office_temperature') }} Ā°C"
show_conditions: true
show_temperature: true
tap_action:
action: navigate
navigation_path: heating
card_mod:
style: |
/* Style date & time */
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-border-width: 0;
}
- type: template
entity: input_boolean.notifications
icon: mdi:bell
tap_action:
action: toggle
hold_action:
action: none
alignment: justify
- type: conditional
conditions:
- entity: input_boolean.notifications
state: "on"
card:
type: custom:mushroom-chips-card
chips:
- type: template
entity: alarm_control_panel.house
icon: mdi:shield-home
icon_color: |-
{% set alarm_status = states(entity) %}
{% if alarm_status == 'armed_away' %}
green
{% elif alarm_status == 'disarmed' %}
orange
{% elif alarm_status == 'arming' %}
yellow
{% elif alarm_status == 'triggered' %}
red
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Alarm
content:
type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.house
states:
- armed_away
hold_action:
action: none
- type: conditional
conditions:
- entity: light.all_lights
state: "on"
chip:
type: template
icon: mdi:lightbulb
entity: light.all_lights
content: >
{{ expand(states.light.all_lights) | selectattr('state', 'eq',
'on') | list | count }}
icon_color: amber
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lights On
content:
type: custom:auto-entities
filter:
include:
- group: light.all_lights
state: "on"
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
- entity_id: light.all_lights
state: "on"
options:
type: custom:mushroom-light-card
layout: horizontal
secondary_info: none
tap_action:
action: toggle
card_mod:
style: |
/* Style & position All Lights button */
ha-card {
background: color-mix(in srgb, rgb(var(--rgb-state-light)) 10%, var(--card-background-color));
}
:host {
margin: 0px 0px 12px !important;
}
exclude: []
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: -12px 0px 0px 0px;
}
- type: conditional
conditions:
- entity: binary_sensor.all_doors
state: "on"
chip:
type: template
entity: binary_sensor.all_doors
content: >
{{ expand(states.binary_sensor.all_doors) | selectattr('state',
'eq', 'on') | list | count }}
icon_color: brown
icon: mdi:door-open
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Doors Open
content:
type: custom:auto-entities
filter:
include:
- group: binary_sensor.all_doors
state: "on"
options:
type: custom:mushroom-entity-card
layout: horizontal
secondary_info: last-changed
icon_color: brown
tap_action:
action: none
hold_action:
action: none
exclude: []
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: -12px 0px 0px 0px;
}
- type: conditional
conditions:
- entity: binary_sensor.all_windows
state: "on"
chip:
type: template
icon_color: grey
icon: mdi:window-open
entity: binary_sensor.all_windows
content: >
{{ expand(states.binary_sensor.all_windows) | selectattr('state',
'eq', 'on') | list | count }}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Windows Open
content:
type: custom:auto-entities
filter:
include:
- group: binary_sensor.all_windows
state: "on"
options:
type: custom:mushroom-entity-card
layout: horizontal
secondary_info: last-changed
tap_action:
action: none
hold_action:
action: none
exclude: []
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: -12px 0px 0px 0px;
}
- type: conditional
conditions:
- entity: sensor.black_bin_days
state_not: "2"
chip:
type: template
icon_color: grey
icon: mdi:trash-can
tap_action:
action: none
- type: conditional
conditions:
- entity: sensor.brown_bin_days
state_not: "2"
chip:
type: template
icon_color: brown
icon: mdi:trash-can
tap_action:
action: none
- type: conditional
conditions:
- entity: sensor.blue_bin_days
state_not: "2"
chip:
type: template
icon_color: blue
icon: mdi:trash-can
tap_action:
action: none
- type: conditional
conditions:
- entity: sensor.devices_with_low_battery
state_not: "0"
chip:
type: template
entity: sensor.devices_with_low_battery
content: |
{{ states(config.entity) | int }}
icon_color: red
icon: mdi:battery-alert
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Low Batteries
content:
type: custom:auto-entities
filter:
include:
- attributes:
device_class: battery
state: < 30
options:
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-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
badge_icon: >-
{{ 'mdi:exclamation-thick' if states(entity) | int
< 10 }}
badge_color: red
exclude: null
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: -12px 0px 0px 0px;
}
- type: conditional
conditions:
- entity: group.smoke_alarm
state: "on"
chip:
type: template
icon_color: red
icon: mdi:fire-alert
tap_action:
action: more-info
entity: group.smoke_alarm
card_mod:
style: |
.content {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
alignment: end
card_mod:
style: |
/* Set margins on notification chips */
ha-card {
margin: var(--chip-spacing) calc(-1 * var(--chip-spacing)) 0px;
transition: all 0s;
}
card_mod:
style: |
/* Remove styling from top card with chips */
ha-card {
/* Allow pseudo elements to display outside card */
overflow: visible !important;
/* Remove gap at top of card */
margin-top: calc(-1 * var(--mush-chip-spacing, 8px));
/* Remove styling from card */
box-shadow: none;
border: none;
background: none;
padding: var(--mush-chip-spacing, 8px);
transition: all 0s;
}
/* Pseudo element to hide card styling when at top */
ha-card:after {
content: "";
/* Make fixed so element scrolls up */
position: fixed;
top: var(--header-height);
/* Adjust height when notifications visible */
height: {{ '104px' if is_state('input_boolean.notifications', 'on') else '60px' }};
/* Set width to match */
width: calc(100% - var(--mush-chip-spacing, 8px));
max-width: calc(var(--column-max-width) - 2 * var(--ha-card-border-width, 1px) - var(--mush-chip-spacing, 8px));
/* Center element on page */
left: 50%;
transform: translateX(-50%);
/* Position between chips and background pseudo elemnt */
z-index: -1;
/* Match background to main card */
background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color));
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
}
/* Pseudo element for background & other card styling */
ha-card:before {
content: "";
/* Position & size card behind chips */
position: absolute;
top: 0px;
left: 0px;
height: 100%;
/* Adjust width to account for border */
width: calc(100% - 2 * var(--ha-card-border-width, 1px));
/* Position card at back */
z-index: -1;
/* Blur content behind card */
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/* Adjust opacity of card */
background: rgba(var(--rgb-card-background-color), 0.8);
/* Set styling of card */
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
box-shadow: var(--ha-card-box-shadow);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
}
Faecon
November 16, 2024, 1:20pm
1309
need some help with an if else structure ā¦
if the player is in state 'paused" or "idle , I want the icon mdi:volume-variant-of and in grey
if the player is playing i want the icon mdi:volume-high and the colour in {{ states(āinput_text.kleur_iconenā)}}
if the player is playing and it is attribute āspotify connectā I want the icon mdi:volume-variant-of and in grey
- type: custom:mushroom-template-card
primary: >-
{{ states('input_text.' ~ user |lower ~
'_radiostations').split(',')[3] |default('') | title}}
icon: >
{% if is_state('media_player.ruimte1', 'paused') or is_state('media_player.ruimte1', 'idle') %}
mdi:volume-variant-off
{% elif state_attr('media_player.ruimte1', 'source') == 'Spotify Connect'%}
mdi:volume-variant-off
{% else %}
mdi:volume-high
{% endif %}
icon_color: >
{% if is_state('media_player.ruimte1', 'paused') or is_state('media_player.ruimte1', 'idle') %}
grey
{% elif state_attr('media_player.ruimte1', 'source') == 'Spotify Connect'%}
grey
{% else %}
{{ states("input_text.kleur_iconen")}}
{% endif %}
is this ok ?
Faecon
November 16, 2024, 5:32pm
1310
type: vertical-stack
cards:
- type: picture-entity
camera_image: camera.deurbel_profile_name
camera_view: live
entity: camera.deurbel_profile_name
show_state: false
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Afwijzen
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.close_popup
data:
- browser_id: THIS
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
text-align: center !important;
.: |
ha-card {
background-color: rgb({{ states("input_text.kleur_iconen")}}) !important;
width: 100px;
margin-left: 65px;
}
- type: custom:mushroom-template-card
primary: Deur Openen
tap_action:
action: call-service
service: rest_command.example_request
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
text-align: center !important;
.: |
ha-card {
background-color: rgb({{ states("input_text.kleur_iconen")}}) !important;
width: 100px;
margin-left: 65px;
align-items: center
}
how do I get the 2 buttons centered ?
HuggyBearUK
November 16, 2024, 7:52pm
1311
@dimitri.landerloos @rhysb and appreciate your updated code for his animations.
I need some help with Mushroom Chip automation before I pull out what little hair I have left!
type: custom:mushroom-template-card
icon: mdi:door
icon_color: brown
primary: Door
card_mod:
style:
mushroom-shape-icon$: |
.shape {
perspective: 45px;
}
.: |
ha-state-icon {
animation: open 6s ease-in-out infinite;
transform-origin: 30%;
}
@keyframes open {
0%, 66% { transform: rotateY(0deg); }
33% { transform: rotateY(-120deg); }
}
I can get it the chip animating ok but it remains flat with no perspective and I am unable to find any examples of this in a chip.
This is the code I have.
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:door
icon_color: |-
{% if is_state('binary_sensor.kitchen_door_contact','on') %}
red
{% elif is_state('binary_sensor.kitchen_door_contact','off') %}
green
{% else %}
disabled
{% endif %}
alignment: center
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{{ 'animation: open 6s ease-in-out infinite;' if is_state('binary_sensor.kitchen_door_contact', 'on') }}
transform-origin: 30%;
}
@keyframes open {
0%, 66% { transform: rotateY(0deg); }
33% { transform: rotateY(-120deg); }
}
.shape {
perspective: 45px;
}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
padding-top: 5px;
benm7
November 18, 2024, 10:45am
1312
Hoping someone can help with brining back my overlapping chips! I used to have a set of 4 chips which would overlap like below:
Any ideas how I get the overlap back? Code below, screenshot only as for some reason I canāt copy from the visual editor var(--mush-chip-spacing, 18px));'
BMWAddict
November 18, 2024, 11:47am
1313
Still loving the mushroom cards! Using this dashboard for mobile, wife acceptance factor is great! Each room shows temp / humidty, when clicking on it, it opens the room with all the lights.
Couple questions:
I am using horizontal stack for the door lock section + heating / airco. Unfortunately both the digital locks with open/closed donāt fit. The Temp and Airco symbols can easily be smaller. How to fix this? Iām using horizontal layout and see code below. Any ideaās? Maybe just have the door and garage icon with toggle close/open and shwo the right color? How to remove those other buttons?
type: horizontal-stack
cards:
- type: custom:mushroom-lock-card
entity: lock.bosch_bijkeuken_deur
icon: mdi:door
secondary_info: none
name: Bijkeuken
fill_container: false
primary_info: none
layout: horizontal
- type: custom:mushroom-lock-card
entity: lock.garage
name: Garage
icon: mdi:garage
secondary_info: none
primary_info: none
fill_container: false
layout: horizontal
- type: custom:mushroom-template-card
primary: ""
secondary: ""
icon: mdi:home
entity: climate.home
layout: horizontal
fill_container: false
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/verwarming
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
mushroom-shape-icon {
{% if state_attr('climate.keuken', 'temperature') <= 13 and state_attr('climate.woonkamer', 'temperature') <= 13 and state_attr('climate.kamer_fleur', 'temperature') <= 13 and state_attr('climate.kamer_sanne', 'temperature') <= 13 and state_attr('climate.hoofdslaapk', 'temperature') <= 13 and state_attr('climate.zolder', 'temperature') <= 13 and state_attr('climate.speelkamer', 'temperature') <= 13 and state_attr('climate.werkkamer', 'temperature') <= 13 and state_attr('climate.sportkamer', 'temperature') <= 13 and state_attr('climate.washok', 'temperature') <= 13 %}
--card-mod-icon: mdi:leaf;
--card-mod-icon-color: rgba(var(--rgb-green), 1);
--shape-color: rgba(var(--rgb-green), 0.2) !important;
{% else %}
--card-mod-icon: mdi:fire;
--card-mod-icon-color: rgba(var(--rgb-deep-orange), 1);
--shape-color: rgba(var(--rgb-deep-orange), 0.2) !important;
{% endif %}
}
- type: custom:mushroom-template-card
primary: ""
secondary: ""
icon: mdi:home
entity: climate.home
layout: horizontal
fill_container: false
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/airco
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
mushroom-shape-icon {
{% if state_attr('climate.keuken', 'temperature') <= 13 and state_attr('climate.woonkamer', 'temperature') <= 13 and state_attr('climate.kamer_fleur', 'temperature') <= 13 and state_attr('climate.kamer_sanne', 'temperature') <= 13 and state_attr('climate.hoofdslaapk', 'temperature') <= 13 and state_attr('climate.zolder', 'temperature') <= 13 and state_attr('climate.speelkamer', 'temperature') <= 13 and state_attr('climate.werkkamer', 'temperature') <= 13 and state_attr('climate.sportkamer', 'temperature') <= 13 and state_attr('climate.washok', 'temperature') <= 13 %}
--card-mod-icon: mdi:air-conditioner;
--card-mod-icon-color: rgba(var(--rgb-green), 1);
--shape-color: rgba(var(--rgb-green), 0.2) !important;
{% else %}
--card-mod-icon: mdi:air-conditioner;
--card-mod-icon-color: rgba(var(--rgb-deep-orange), 1);
--shape-color: rgba(var(--rgb-deep-orange), 0.2) !important;
{% endif %}
}
Iām using horizontal stack with chips. The entity āfanā only toggles on/off. I want this to toggle between fan mode 1 and fan mode 3. Is this possible? This is a fan system for the entire house and it should never be allowed to be fully turned off, only switch between mode 1 and mode 3. Is this possible?
We have common routines in house, for example set temp in the living room to 20C and turn on the lights. Another example is ā a work from home day, set the temp in the office room etc. How do others add this to the mushroom dashboard? Can you link to a automation with a chip icon?
benm7
November 20, 2024, 4:01am
1314
Have you seen any update for this in card_mod? I have the same issue I am trying to fix
domain_int
November 21, 2024, 2:40am
1315
Would appreciate a āyes it can be doneā or no it cant do it answer before I troll thru 1278 posts.
Is it possible to get a number card to display in VERTICAL (up and down) orientation with the value on the inside of the slider??? (card-mod)
Ive searched and oddly I cant find anything on this.
Alternately can anyone suggest another card???
the missing code is '
