hi looking for some help here. anyone know how to successfully recreate this using mushroom + custom button? currently its a mushroom template card, with chips cards on the right. i need to use custom button cards instead of chips for the temp up and down as i need to call a script with some templating that the chips cards donāt support. i canāt seem to get the layout working
I would suggest using grid layout option in the custom-layout-card. It easily gives you the ability to combine card types and spacing.
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 4fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-template-card
primary: entity
icon: hue:lightstrip
entity: light.patio_lightstrip
tap_action:
action: toggle
- type: custom:paper-buttons-row
buttons:
- entity: sensor.fan_direction_speed
icon: mdi:
name: entity
tap_action:
action: call-service
service: script.fan_speed_1
service_data:
entity_id: script.fan_speed_1
styles:
button:
height: 40px
border-radius: 4px
font-size: 19px
font-weight: normal
color: red
Apologies for the delay, here you go:
type: vertical-stack
cards:
- type: markdown
content: >
<font color= lightgrey><ha-icon icon="mdi:speedometer"></ha-icon> āø±
**Speedtest by Ookla**</font>
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
--ha-card-border-width: 0;
}
- type: tile
name: Server
icon: fapro:speedtest
entity: sensor.speedtest_ping
state_content:
- server_name
- server_country
color: blue
- type: custom:vertical-stack-in-card
cards:
- type: grid
square: false
columns: 1
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.speedtest_ping
icon: fapro:speedtest_ping
icon_color: '#fff38e'
content: |
{% if is_number(states(entity)) %}
{{ states(entity) }} ms
{% else %}
Unavailable
{% endif %}
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-border-width: 0;
--chip-font-size: 11px;
--chip-font-weight: none;
}
- type: template
entity: sensor.speedtest_download
icon: fapro:speedtest_download
icon_color: '#6afff3'
content: |
{% if is_number(states(entity)) %}
{{ states(entity)|round(0) }} Mbps
{% else %}
Unavailable
{% endif %}
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-border-width: 0;
--chip-font-size: 11px;
--chip-font-weight: none;
}
- type: template
entity: sensor.speedtest_upload
icon: fapro:speedtest_upload
icon_color: '#bf71ff'
content: |
{% if is_number(states(entity)) %}
{{ states(entity)|round(0) }} Mbps
{% else %}
Unavailable
{% endif %}
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-border-width: 0;
--chip-font-size: 11px;
--chip-font-weight: none;
}
alignment: center
- type: custom:mini-graph-card
entities:
- entity: sensor.speedtest_upload
name: Upload
color: '#bf71ff'
- entity: sensor.speedtest_download
name: Download
color: '#6afff3'
y_axis: secondary
height: 60
hours_to_show: 24
line_width: 2
font_size: 50
animate: false
show:
name: false
icon: false
state: false
legend: false
fill: fade
Yeah I think that would get the ball rolling again for that PR as a non-breaking change would be way easier to push through.
I actually created my own feature with min/max brightness (commit), but found a PR that was essentially the same as mine from 2022, and itās still not merged. So not sure if itās even worth it trying to add it. Actually, the tile card works as expected here, so Iām switching over to that instead: Tile card - Home Assistant
Could you share your code?
work in progressā¦
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-title-card
title: Outdoor Lights
style: |
ha-card
{ --title-padding: 12px 12px 4px;
--title-font-size: 16px;
--title-font-weight: 100;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr
margin: '-10px -4px -15px 0px'
cards:
- type: custom:mushroom-template-card
primary: Patio Lightstrip
secondary: |
{% if is_state('light.patio_lightstrip', 'on') %} On
{% else %}
Off
{% endif %}
icon: hue:lightstrip
icon_color: |
{%- if is_state(entity, 'on') %}
{{ '#%02x%02x%02x' % state_attr(entity, 'rgb_color') }}
{% else %}
{% endif %}
entity: light.patio_lightstrip
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
--icon-symbol-size: 36px;
}
- type: custom:mushroom-template-card
primary: Pond Lights
secondary: |
{%- if is_state(entity, 'on') %} On
{% else %}
Off
{% endif %}
icon: hue:floor-spot-group
icon_color: |
{% if is_state('light.pond', 'on') %} yellow
{% else %}
{% endif %}
entity: light.pond
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
--icon-symbol-size: 38px;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr
margin: 0px -4px -14px 0px
cards:
- type: custom:mushroom-template-card
primary: Circle Lights
secondary: |
{%- if is_state(entity, 'on') %} On
{% else %}
Off
{% endif %}
icon: hue:floor-lantern
icon_color: |
{%- if is_state(entity, 'on') %}
black
{%- else %}
{% endif %}
entity: light.circle_lamppost
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
filter: drop-shadow(rgb{{ state_attr(config.entity, "rgb_color")}} 0px 10px 10px);' if states(config.entity) =="on"}}
.: |
{% if is_state(config.entity, 'on') %}
ha-state-icon:before {
content: "";
width: 0px;
height:10px;
background: {{"#%02x%02x%02x" % state_attr(config.entity, "rgb_color") }};
border-width: 0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin-top: 5px;
margin-left: 14px;
position: absolute;
}
{% else %}
{% endif %}
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
--icon-symbol-size: 40px;
}
- type: custom:mushroom-template-card
entity: light.deatched_lamp_post
icon_color: |
{%- if is_state(entity, 'on') %}
black
{%- else %}
{% endif %}
primary: Detached Lamp Post
secondary: |
{%- if is_state(entity, 'on') %} On
{% else %}
Off
{% endif %}
icon: hue:floor-lantern
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
filter: drop-shadow(rgb{{ state_attr(config.entity, "rgb_color")}} 0px 10px 10px);' if states(config.entity) =="on"}}
.: |
{% if is_state(config.entity, 'on') %}
ha-state-icon:before {
content: "";
width: 0px;
height:10px;
background: {{"#%02x%02x%02x" % state_attr(config.entity, "rgb_color") }};
border-width: 0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin-top: 5px;
margin-left: 14px;
position: absolute;
}
{% else %}
{% endif %}
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
--icon-symbol-size: 40px;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr
margin: 0px -4px -14px 0px
cards:
- type: custom:mushroom-template-card
entity: light.garage_color_spot
icon: hue:wall-flood
tap_action:
action: more-info
icon_color: |
{%- if is_state(entity, 'on') %}
black
{%- else %}
{% endif %}
primary: Garage Color Spot
secondary: |
{%- if is_state(entity, 'on') %} On
{% else %}
Off
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
filter: drop-shadow(rgb{{ state_attr(config.entity, "rgb_color")}} 0px 7px 8px);' if states(config.entity) =="on"}}
.: |
{% if is_state('light.garage_color_spot', 'on') %}
ha-state-icon:before {
content: "";
width: 27px;
height:20px;
transform: rotate(13deg) skew(-10deg);
background: {{"#%02x%02x%02x" % state_attr(config.entity, "rgb_color") }};
border-radius: 0px;
border-width: 0px;
margin-top: 13.5px;
margin-left: 10.5px;
position: absolute;
}
{% else %}
{% endif %}
ha-card {
background: none;
--ha-card-border-width: 0px;
--icon-symbol-size: 45px;
}
- type: custom:mushroom-template-card
icon_color: |
{%- if is_state(entity, 'on') %}
black
{%- else %}
{% endif %}
primary: Garage Lantern
secondary: |
{%- if is_state(entity, 'on') %} On
{% else %}
Off
{% endif %}
icon: phu:wall-econic-lantern-top
entity: light.garage_latern
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
filter: drop-shadow(rgb{{ state_attr(config.entity, "rgb_color")}} 0px 6px 10px);' if states(config.entity) =="on"}}
.: |
{% if is_state(config.entity, 'on') %}
ha-state-icon:before {
content: "";
width: 15px;
height:18px;
background: {{"#%02x%02x%02x" % state_attr(config.entity, "rgb_color") }};
border-width: 0px;
border-left: -5px solid transparent;
border-right: 2px solid transparent;
margin-top: 15px;
margin-left: 13px;
position: absolute;
}
{% else %}
{% endif %}
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
--icon-symbol-size: 40px;
}
card_mod:
style: |
ha-card {
box-shadow: none;
--ha-card-border-width: 0px;
padding-bottom: 14px;
background-color: background-color: rgba(100, 100, 100, .1);
}
3 Likes
Hi Everyone,
Iām trying to add some background styling to a chip, but I canāt get it to work.
I want the background of the chip in the middle to be transparent and a bigger font size, but using ha-card {background: red} or ha-card {background-color: red} doesnāt do anything. Changing the padding for example does work.
It is a template chip. Here is the code with the example where padding does work, but background not:
type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: template
content: VERLICHTING
style: |
ha-card {
padding-left: 50px;
background-color: red;
}
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: spacer
- type: menu
Hope someone can help me out!
Sometimes you need a !important after what you are changing. Always try that first 
type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: template
content: VERLICHTING
style: |
ha-card {
padding-left: 50px;
background-color: red !important;
}
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: spacer
- type: menu
2 Likes
Well, I shouldāve knownā¦ 
Thank you!
It seems that the WLED firmware does not support HTTPS and will not because the ESP8266/ESP32 computing resources are not enough for it.
However, I found a way to use a reverse proxy, and it was much easier than I thought! This add-on allows to configure nginx without digging into configs: GitHub - hassio-addons/addon-nginx-proxy-manager: Nginx Proxy Manager - Home Assistant Community Add-ons.
You just need to add a separate domain/subdomain for WLED and get a Letās Encrypt certificate for it. This is done similarly to how you set up a domain for HA. After that, you can close access to everyone except your local network.
And it all works great.
Another interesting find is the ?ws key, it makes the animation smoother.
type: iframe
url: https://your-wled.duckdns.org/liveview?ws
aspect_ratio: 10%
2 Likes
According to the documentation it is possible to use the built in weather svg files as icon in the template card. Does anybody know how?
icon: weather-{{ states("weather.openweathermap") }}
Works like a charm, thank you very much!
Just a little work in progress of a simplified room card without clutter but still shows relevant information.
Icon colour is pulled from room light entity.
Icon changes based on sensor states in the room.
- Sofa icon is shown when nothing is happening
- Speaker icon is shown when music is playing on the TV
- Motion icon is shown when there is motion in the living room
9 Likes
So if i understand correctly i would need to add a seperate entry to NGINX for each WLED i have. Then create a duckdns domain for each, is that correct? If so, thats not too bad at all!
Hi did you get anywhere with this, I know itās been sometime, Iām looking for something similar but using Mushroom card.
That looks awesome. Just the sort of thing Iām looking for. Are you able to share your code?
āStill newā and your hue dashboard styling do not add up, sir. Amazing work, which I will steal and mangle and ask Dimitri for help with (and a shout of thanks to Dimitri for helping me get my Air Purifier card to where I needed itā¦ for now).
I created my own Mushroom.yaml (theme) called Mushroom-Thin so some of the styling may not work perfect with the standard mushroom theme. Iāll switch to the original and make the necessary corrections. Iām glad to help if you have any questions.
1 Like
So if i understand correctly i would need to add a seperate entry to NGINX for each WLED i have. Then create a duckdns domain for each, is that correct? If so, thats not too bad at all!
Yeah, sort of. Or you could take a normal domain, even a free one from freenom and make subdomains like wled1.dimitri_landerloos.tk =)
A drawback I didnāt notice yesterday is that with my access restriction setup, this animated slider bar doesnāt show up in the HA app when accessed from outside my local network, that is, when Iām not connected to my WIFI.
Another possible customization option is to provide NGINX with a login and password for access. This will be requested in a popup window in HA and it seems to be saved when entered once and is no longer requested, but I keep watching.
Also, this configuration feature can be used to provide secure remote access to the WLED if someone needs it.
1 Like