Please read this and try and post your question formatted correctly 
1 Like
i havent fixed everything you wanted for based on the card mod css that i see in your post.
but this should get you on the right track 
type: custom:mushroom-template-card
primary: Test Template Card
secondary: ''
icon: mdi:home
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
deviceID:
- this
dismissable: true
title: ' '
content:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Dummy
alignment: left
title_tap_action:
action: none
subtitle_tap_action:
action: none
card_mod:
style: |
:host {
background: red !important;
width: 450px;
}
ha-dialog$: |
div.mdc-dialog__scrim {
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(10px) !important;
background-color: rgba(0,0,0,0.1) !important;
}
What exactly do I need to change?)
Read the post i linked to you. you have posted your code in a pastebin. no one is going help you unless you format your post correctly.
post your code like this example:
type: custom:mushroom-entity-card
entity: script.bathroom_fan_timer
primary_info: none
secondary_info: none
icon: mdi:power
card_mod:
style: |
ha-card {
position: absolute;
}
1 Like
Thx a lot, sometimes its so easy
Looks awesome! If you’re interested I remade it with button card and slider v2. Seems to behave nicer for me vs heavily modifying mushroom. Still need to fix the width problem on this one yet and edit the ripple effect.
type: custom:button-card
entity: light.living_room_lights
name: Living room
label: |
[[[ if (entity.state == 'on')
return (states['sensor.livingroom_count'].state) + ' On • ' + Math.round(entity.attributes.brightness/2.55) + '%';
return entity.state;
]]]
icon: |
[[[
if (entity.state == 'on')
return "fapro:light-group-fill";
return "fapro:light-group";
]]]
size: 28px
show_name: true
show_label: true
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: light.living_room_lights
allowTapping: true
styles:
card:
- height: 100%
container:
- width: 100%
- height: 100%
- position: relative
- overflow: hidden
- border-radius: 35px
track:
- width: 100%
- height: 100%
- position: relative
- background: |
[[[
if (entity.state == "on") return "#ffefc9";
else return "#f2f6fc";
]]]
progress:
- height: 100%
- background: '#ffe082'
- position: absolute
thumb:
- background: none
button:
card:
type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
tap_action:
action: toggle
entity: input_boolean.living_room_toggle
icon_color: |-
{% if is_state('light.living_room_lights', 'off') %}
31,31,31
{% elif is_state('light.living_room_lights', 'on') %}
115,92,0
{% endif %}
card_mod:
style: |
ha-card {
--chip-icon-size: 0.7em;
--chip-padding: 0px 6px;
--chip-height: 40px;
--chip-border-radius: 100px;
}
styles:
grid:
- grid-template-areas: |
"i n button"
"i l button"
- grid-template-rows: 1fr 1fr
- grid-template-columns: 68px min-content 2fr
card:
- height: 100%
- border-radius: 35px
- background-color: |
[[[
if (entity.state == 'on')
return "#ffefc9";
return "#f2f6fc";
]]]
icon:
- z-index: 1
- color: |
[[[
if (entity.state == 'on')
return "#735c00";
return "#1f1f1f";
]]]
name:
- z-index: 1
- pointer-events: none
- justify-self: start
- font-weight: 600
- font-size: 15px
- margin: 18% 0% 0% 0%
- color: |
[[[
if (entity.state == 'on')
return "#735c00";
return "#1f1f1f";
]]]
label:
- z-index: 1
- pointer-events: none
- justify-self: start
- text-transform: capitalize
- font-weight: 500
- font-size: 14px
- margin: 0% 0% 16% 0%
- color: |
[[[
if (entity.state == 'on')
return "#735c00";
return "#1f1f1f";
]]]
custom_fields:
button:
- z-index: 1
- justify-self: end
- padding-right: 24px
slider:
- z-index: 0
- position: absolute
- width: 100%
- height: 100%
25 Likes
I’m sure it has been dealt with many times before, but how did you create the counter of lights per room?
Here’s a version with a temperature and hue slider, now that you made it with button card Im for sure gonna combine that and replace the mushroom version. Nice!
type: custom:expander-card
gap: 0.6em
padding: 0em
clear: true
title: Expander
overlay-margin: 2em
child-padding: 0.5em
button-background: var(--hki-secondary-text-color)
title-card:
type: custom:mushroom-light-card
entity: light.basement_lights
show_brightness_control: true
tap_action:
action: toggle
icon_color: none
use_light_color: true
card_mod:
style:
mushroom-light-brightness-control$: |
mushroom-slider {
opacity: 0.6;
}
.: |
mushroom-light-brightness-control {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
opacity: 0.6;
--control-height: 102px;
--control-border-radius: 35px;
--rgb-disabled: var(--card-background-color);
}
mushroom-state-item {
z-index: 1;
max-width: fit-content;
margin-bottom: 0px;
pointer-events: none;
}
mushroom-shape-icon {
pointer-events: auto;
--shape-color: transparent !important;
--shape-color-disabled: transparent !important;
}
ha-card {
--icon-symbol-size: 0.6em;
padding: 30px 10px !important;
--card-primary-font-weight: 700;
--card-secondary-font-weight: 700;
--keep-background: true;
{% if is_state(config.entity, 'on') %}
border-radius: 35px !important;
{% else %}
background: rgba(238, 238, 238, 0.5);
{% endif %}
}
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
expanded: false
title-card-button-overlay: true
cards:
- type: custom:my-slider-v2
entity: light.basement_lights
colorMode: hue
intermediate: false
disableScroll: true
styles:
card:
- height: 50px
- border-radius: 24px
container:
- width: 100%
- height: 100%
- position: relative
- overflow: hidden
- border-radius: 24px
track:
- width: 100%
- height: 100%
- position: relative
- background: >-
linear-gradient(to left, #f00 0%, #ff0 17%, #0f0 33%,
#0ff 50%, #00f 66%, #f0f 83%, #f00 100%)
progress:
- height: 100%
- background: >-
linear-gradient(to left, #f00 0%, #ff0 17%, #0f0 33%,
#0ff 50%, #00f 66%, #f0f 83%, #f00 100%)
- position: absolute
- width: 0.00%
thumb:
- height: 100%
- background: black
- position: absolute
- right: '-5px'
- width: 10px
- type: custom:my-slider-v2
entity: light.basement_lights
colorMode: temperature
intermediate: false
disableScroll: true
styles:
card:
- height: 50px
- border-radius: 24px
container:
- width: 100%
- height: 100%
- position: relative
- overflow: hidden
- border-radius: 24px
track:
- width: 100%
- height: 100%
- position: relative
- background: >-
linear-gradient(to right, rgb(255, 160, 0) 0%, white
100%)
progress:
- height: 100%
- background: >-
linear-gradient(to right, rgb(255, 160, 0) 0%, white
100%)
- position: absolute
- width: 0.00%
thumb:
- height: 100%
- background: black
- position: absolute
- right: '-5px'
- width: 10px
2 Likes
Made it again with your button-card, thanks!:
Still working on the spacing as you can see though, weird…
type: custom:stack-in-card
cards:
- type: custom:button-card
entity: light.basement_lights
name: Basement
label: |
[[[ if (entity.state == 'on')
return (states['light.basement_lights'].state) + ' On • ' + Math.round(entity.attributes.brightness/2.55) + '%';
return entity.state;
]]]
icon: |
[[[
if (entity.state == 'on')
return "mdi:lightbulb-group-outline";
return "mdi:lightbulb-group";
]]]
size: 28px
show_name: true
show_label: true
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: light.basement_lights
allowTapping: true
styles:
card:
- height: 100%
container:
- width: 100%
- height: 100%
- position: relative
- overflow: hidden
- border-radius: 35px
track:
- width: 100%
- height: 100%
- position: relative
- background: |
[[[
if (entity.state == 'on')
return "#ffefc9";
else return "#f2f6fc";
]]]
progress:
- height: 100%
- background: '#ffe082'
- position: absolute
thumb:
- background: none
button:
card:
type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
tap_action:
action: toggle
entity: input_boolean.basement_light_toggle
icon_color: |-
{% if is_state('light.basement_lights', 'off') %}
31,31,31
{% elif is_state('light.basement_lights', 'on') %}
115,92,0
{% endif %}
card_mod:
style: |
ha-card {
--chip-icon-size: 0.7em;
--chip-padding: 0px 6px;
--chip-height: 40px;
--chip-border-radius: 100px;
}
styles:
grid:
- grid-template-areas: |
"i n button"
"i l button"
- grid-template-rows: 1fr 1fr
- grid-template-columns: 68px min-content 2fr
card:
- height: 100%
- border-radius: 35px
- background-color: |
[[[
if (entity.state == 'on')
return "#ffefc9";
return "#f2f6fc";
]]]
icon:
- z-index: 1
- color: |
[[[
if (entity.state == 'on')
return "#735c00";
return "#1f1f1f";
]]]
name:
- z-index: 1
- pointer-events: none
- justify-self: start
- font-weight: 600
- font-size: 15px
- margin: 18% 0% 0% 0%
- color: |
[[[
if (entity.state == 'on')
return "#735c00";
return "#1f1f1f";
]]]
label:
- z-index: 1
- pointer-events: none
- justify-self: start
- text-transform: capitalize
- font-weight: 500
- font-size: 14px
- margin: 0% 0% 16% 0%
- color: |
[[[
if (entity.state == 'on')
return "#735c00";
return "#1f1f1f";
]]]
custom_fields:
button:
- z-index: 1
- justify-self: end
- padding-right: 24px
slider:
- z-index: 0
- position: absolute
- width: 100%
- height: 100%
- type: conditional
conditions:
- entity: input_boolean.basement_light_toggle
state: 'on'
card:
type: grid
square: false
cards:
- type: custom:my-slider-v2
entity: light.basement_lights
colorMode: hue
intermediate: false
disableScroll: true
styles:
card:
- height: 50px
- border-radius: 24px
container:
- width: 100%
- height: 100%
- position: relative
- overflow: hidden
- border-radius: 24px
track:
- width: 100%
- height: 100%
- position: relative
- background: >-
linear-gradient(to left, #f00 0%, #ff0 17%, #0f0 33%, #0ff
50%, #00f 66%, #f0f 83%, #f00 100%)
progress:
- height: 100%
- background: >-
linear-gradient(to left, #f00 0%, #ff0 17%, #0f0 33%, #0ff
50%, #00f 66%, #f0f 83%, #f00 100%)
- position: absolute
- width: 0.00%
thumb:
- height: 100%
- background: black
- position: absolute
- right: '-5px'
- width: 10px
- type: custom:my-slider-v2
entity: light.basement_lights
colorMode: temperature
intermediate: false
disableScroll: true
styles:
card:
- height: 50px
- border-radius: 24px
container:
- width: 100%
- height: 100%
- position: relative
- overflow: hidden
- border-radius: 24px
track:
- width: 100%
- height: 100%
- position: relative
- background: linear-gradient(to right, rgb(255, 160, 0) 0%, white 100%)
progress:
- height: 100%
- background: linear-gradient(to right, rgb(255, 160, 0) 0%, white 100%)
- position: absolute
- width: 0.00%
thumb:
- height: 100%
- background: black
- position: absolute
- right: '-5px'
- width: 10px
columns: 2
card_mod:
style: |
ha-card {
padding: 30px 10px !important;
margin: 10px 0px 0px 5px !important;
}
1 Like
Yeah the spacing is a pain. I’m still messing with mine. I did a separate horizontal stack card with two conditional cards for now.
1 Like
I made a yaml called sensors in my config directory. Inside that is a template that counts the lights. I’ll post the code when I get a chance.
1 Like
Hello there
i have Shelly pro 3em with 3 phase CT.
i installed the device and integrated to HA perfectly.
in our country if monthly consumption was 450 Kwh/Month the tariff will be 18 IQD/Kwh, but if exceeded that range next 450kwh will be 24 IQD/month,
My question how we can calculate that ??
thanks for help
Please tell me how to make an inscription and an arrow in the center?
type: custom:stack-in-card
cards:
- square: false
columns: 5
type: grid
cards:
- type: custom:mushroom-template-card
primary: ''
alignment: center
secondary: ''
icon: mdi:home
icon_color: blue
tap_action:
action: navigate
navigation_path: /lovelace
layout: vertical
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
margin-top: -2px;
width: auto;
margin-left: -3px;
margin-right: auto;
}
- type: custom:mushroom-entity-card
entity: sensor.processor_use
primary_info: state
secondary_info: name
name: CPU
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
margin-top: px;
margin-left: -15px;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.memory_use_percent
primary_info: state
secondary_info: name
name: Memory
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
margin-top: px;
width: auto;
margin-left: -25px;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.cpu_temperature
primary_info: state
secondary_info: name
name: CPU
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
margin-top: px;
margin-left: -35px;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.disk_use_percent_config
primary_info: state
secondary_info: name
name: Storage
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
margin-top: px;
margin-left: -35px;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
- type: custom:fold-entity-row
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
margin-right: 60px;
margin: 10px;
}
head:
type: custom:mushroom-template-card
label: padding
secondary: Подробнее
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
margin-left: 130px;
}
multiline_secondary: true
entities:
- type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
margin-left: -25px;
}
cards:
- type: custom:mushroom-template-card
entity: sensor.memory_use_percent
primary: >-
Использование ОЗУ: {{ states('sensor.memory_use_percent') |
round(0) }}%
secondary: ''
icon: mdi:memory
icon_color: gray
tap_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 300
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
cards:
- type: custom:mini-graph-card
color_thresholds:
- value: 90
color: '#f53639'
- FF6600
- value: 60
color: '#25cc49'
entities:
- entity: sensor.memory_use_percent
name: Temperature
hours_to_show: 3
points_per_hour: 16
line_width: 3
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
- type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
margin-left: -25px;
}
cards:
- type: custom:mushroom-template-card
entity: sensor.processor_use
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
primary: >-
Использование процессора: {{ states('sensor.processor_use') |
round(0) }}%
icon: mdi:cpu-64-bit
icon_color: gray
tap_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 300
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.processor_use
hours_to_show: 3
points_per_hour: 16
line_width: 3
color_thresholds:
- value: 90
color: '#f53639'
- FF6600
- value: 60
color: '#25cc49'
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
- type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
margin-left: -25px;
}
cards:
- type: custom:mushroom-template-card
entity: sensor.cpu_temperature
primary: >-
Температура процессора: {{ states('sensor.cpu_temperature') |
round(0) }} °C
icon: mdi:cpu-64-bit
icon_color: gray
tap_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 300
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.cpu_temperature
name: temperature
hours_to_show: 3
points_per_hour: 16
line_width: 3
lower_bound: 20
upper_bound: 80
color_thresholds:
- value: 80
color: '#f53639'
- FF6600
- value: 60
color: '#25cc49'
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
Hey guys, how could I put this chip from sensor CPU on right corner in the center? And how to remove this edges?
You can refer to the following code:
type: custom:stack-in-card
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
style: |
ha-card {
border: none;
}
entity: sensor.xiaomi_gateway_illuminance
fill_container: false
primary_info: state
secondary_info: last-changed
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: none;
--chip-height: 43px;
margin-top: 12px;
}
chips:
- type: entity
style: |
ha-card {
border: none;
}
icon_color: green
entity: sensor.xiaomi_gateway_illuminance
alignment: center
1 Like
Here are parts of my sensor.yaml file, which counts lights on in defined light groups:
- platform: template
sensors:
living_count:
friendly_name: "Lampor på i vardagsrum"
unit_of_measurement: "på"
value_template: "{{expand(state_attr('light.vardagsrum', 'entity_id'))| selectattr('state','eq','on')|map(attribute='entity_id')|list|count}}"
kitchen_count:
friendly_name: "Lampor på i kök"
unit_of_measurement: "på"
value_template: "{{expand(state_attr('light.kok', 'entity_id'))| selectattr('state','eq','on')|map(attribute='entity_id')|list|count}}"
1 Like
Hey! Can someone help me to combine those codes if possible, want to have animation on icon light and blinking badge when motion detected.
Working great if have one or another like in the code bellow but no idea how to add them to work together.
style:
mushroom-shape-icon$: |
{% if is_state(config.entity, 'on') %}
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
60% { box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0.3); }
100% { box-shadow: 0 0 5px 10px transparent; }
}
{% endif %}
style: |
{% if is_state('binary_sensor.poarta_motion_occupancy', 'on') %}
mushroom-badge-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
{% endif %}
GM,
How can i set primary text color, within mushroom template card?
I saw it somewhere in this post for a second but i lost it, and i have been scrolling up and down for more than an hour…
Thanks in advanced!
Here a ver short post:
Why is this Mushroom integration not a CORE part of HA already?
You see in all updates parts similar integrated.
icon_color: green