thank you for the code, it worked… but what if I want the R G B values from the icon color of item-1, item-2 and item-3 ?
Thank you for this info!
Is there any other option to modify the icons of the Mushroom Alarm Card?
I’m wondering if it’s possible to remove the border arround a template card, I just want to have it flush with my background color.
This is the code for the first 2 rooms, I’m not sure if it’s even an options or if I need to adapt the css.
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:countertop
tap_action:
action: navigate
navigation_path: keuken
layout: vertical
secondary: Keuken
icon_color: red
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.1);
width: 65px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
margin-bottom: -10px;
}
- type: custom:mushroom-template-card
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: woonkamer
layout: vertical
secondary: Woonkamer
icon_color: blue
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.1);
width: 65px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
margin-bottom: -10px;
}
Can someone point me in the right direction regarding the more_info popups?
I have installed browser_mod 2 and followed the instruction on github.
But i do not understand where to change the look on the popup windows?
Yeah, for the dashboard, but the sensor templates are in the config, which I am curious about.
How are folks getting the custom hamburger/menu icon button to work in the header? I can use it to open/close the menu, but when I turn on kiosk mode it stops working.
How do i manage to not put itin a conditional card so the cip is always displayed?
ive currently got something similar to your lights on yaml but without the nice layout which i would prefer.
type: custom:mushroom-chips-card
chips:
- type: template
icon: |
{% if is_state('light.alle_lichter', 'off') %}
mdi:lightbulb-multiple-off
{% else %}
mdi:lightbulb-multiple
{% endif %}
icon_color: |
{% if is_state('light.alle_lichter', 'off') %}
grey
{% else %}
yellow
{% endif %}
entity: light.alle_lichter
content: >-
{{ expand(states.light.alle_lichter) | selectattr( 'state', 'eq','on') |
list | count }}
card_mod: null
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lichter
content:
type: custom:auto-entities
filter:
include:
- group: light.alle_lichter
state: 'on'
exclude:
- domain: light
attributes:
types: browser_mod
- entity_id: light.this_screen
- entity_id: light.app_kevin_screen
- entity_id: light.ipad_air_3_screen
card:
type: entities
show_header_toggle: false
target: {}
1 Like
hello I have a question how did you get the 3 chip cards together I can’t get it together thanks in advance for the explanation
Can anyone help me set the color of my brightness slider bar and the max height of my card? I have never been successful with themes but I’ve managed just fine without them until now.
Here’s my code:
type: custom:mushroom-light-card
entity: light.basement_lights
show_brightness_control: true
primary_info: none
secondary_info: none
icon_type: none
style: |
ha-card {
height: 60px;
background: transparent !important;}
In short, my slider bar is too thick, so I was hoping to use the height element to shrink it down a bit. I’d also like my slider bar to be lime green. My transparent background works just fine, and height works in every other card, but not in Mushrooms.
Thank you!
Tx for the reply mate. I already started adding the css to all pop up elements. This is a pain in the xxx.
1 Like
Has anyone designed an appliance page , to monitor your appliances
? Just looking for inspiration. This is what I have so far
11 Likes
Is it possible, to fix a chip card in the first row?
When scrolling down on that page, that the first row with the chip card is all time visible?
I have a back button realized in every room to come back to the main dashboard. When scrolling down in the room, i have to scroll up to see the back button again.
Looks good can u share your code, THX
Out of interest, what are you using to monitor your pool chemical status? I’m using a Blue Connect.
So I bought your tuya 6 in 1 wifi pool from AliExpress. I have compared it when I get my pool tested and salinity had been bang on and ph was off by.25. so I’m pretty happy with it.
You have to use LocalTuya anf pull in the data as the tuya integration only shows temperature
AU $14.03 44%OFF | Wifi Digital Water Quality Tester Wall Mounted 6 in 1 Water Analyzer PH/ EC/ TDS/ SALT/ G.S/ Temperature APP Remote Monitoring
https://a.aliexpress.com/_mPEaFao
Guys, i’m pulling my hair.
I’m trying to set an icon (fan) to rotate according to the speed of a fan based on it’s power consumption. But I just cant make it work. The best I was able to do was to make the whole card rotate. I tried @rhysb code, from here: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #1188 by rhysb
Can someone point me un the right direction.
I’ve got some code for that, mine looks at
'fan.hot_tub_pump_1', 'preset_mode'
and adjusts the rotation speed.
type: custom:mushroom-template-card
primary: null
secondary: null
icon: mdi:pump
icon_color: blue
picture: ''
card_mod:
style: |
mushroom-shape-icon {
display: flex;
border-radius: 60%;
{% if (state_attr('fan.hot_tub_pump_1', 'preset_mode') == "HI") %}
animation: rotation-pulse 1s linear infinite;
{% elif (state_attr('fan.hot_tub_pump_1', 'preset_mode') == "LO") %}
animation: rotation-pulse 3s linear infinite;
{% endif %}
}
@keyframes rotation-pulse {
0% {
box-shadow: 0 0 0 0 rgb(var(--rgb-blue), 0.8);
transform: rotate(0deg);
}
70% {
box-shadow: 0 0 0 10px rgba(var(--rgb-blue), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0);
transform: rotate(360deg);
}
}
ha-card {
background: none ;
width: 65px;
display: flex;
}
1 Like
Very interesting. So localtuya is an HA integration that can talk to this device? Have you plumbed the sensors into your pool piping, and, if so, how? Maybe this would be best via DM or something, since it’s a bit off-topic here.
Could you please share your yaml for this card?
which code are you after, or section or image do you want code for?