Azrael79
July 29, 2023, 2:26pm
7488
Hi together,
i have a mushroom template card and want to call a popup with browser_mod and change the background-color of the popup.
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 {
--popup-background-color: red !important;
--popup-min-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;
}
i post it here, because i use only mushroom card and mushroom tempalte.
thx in advance
Think i got it now. use this instead of the margin i suggested
position: absolute;
top: 30px;
right: 10px;
width: fit-content;
border-radius: 100px !important;
1 Like
Numotiv
July 29, 2023, 3:30pm
7490
1umnyy
July 29, 2023, 4:00pm
7491
Hi everybody. Please tell me, I want there to be a key in this panel that opens additional information in which there will be detailed graphs. Either popup, but then on the whole map
card:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 10% 10% 10% 10%
grid-template-rows: auto
cards: null
- 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: -3px;
width: auto;
margin-left: px;
margin-right: auto;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
- 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;
width: auto;
margin-left: -25px;
margin-right: auto;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
browser_id: THIS
large: false
size: normal
content:
type: custom:stack-in-card
title: null
mode: vertical
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: sensor.memory_use_percent
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
ha-dialog {
--dialog-surface-position: static;
--dialog-content-position: static;
--dialog-surface-margin-top: 40px;
--mdc-dialog-min-width: 97vw;
--mdc-dialog-max-width: 97vw;
--ha-dialog-border-radius: var(--popup-border-radius, 28px);
}
:host([wide]) .content {
width: 100vw;
}
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
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
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
- 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
cards:
- type: custom:mushroom-template-card
entity: sensor.cpu_temperature
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
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;
}
- 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;
margin-right: auto;
--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;
width: auto;
margin-left: -25px;
margin-right: auto;
--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;
width: auto;
margin-left: -25px;
margin-right: auto;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
graph:
type: custom:stack-in-card
title: null
mode: vertical
cards:
- type: custom:vertical-stack-in-card
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
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
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;
}
1 Like
Based on what you have made i have made the below:
type: custom:stack-in-card
cards:
- square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-light-card
entity: light.office_lights_toggle
name: All Lights
show_brightness_control: true
layout: horizontal
use_light_color: true
show_color_temp_control: true
show_color_control: true
card_mod:
style:
mushroom-shape-icon$: |
.shape:active {
transform: scale(1.2);
}
.: |
mushroom-light-brightness-control,
mushroom-light-color-temp-control, mushroom-light-color-control
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
opacity: 1;
--control-height: 102px;
--control-border-radius: var(--ha-card-border-radius, 12px);
--rgb-disabled: var(--rgb-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;
--icon-color: black !important;
--icon-symbol-size: 0.7em;
}
mushroom-button {
position: absolute;
width: calc(var(--control-height) * var(--control-button-ratio)) !important;
height: var(--control-height) !important;
right: var(--spacing);
border-radius: 100px;
--icon-color: black;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.46);
}
mushroom-button:nth-child(3) {
right: calc(5.2 *var(--spacing) + var(--control-height) * var(--control-button-ratio));
background: white !important;
}
mushroom-button:nth-child(2) {
background: white !important;
}
.actions :not(:last-child) {
margin-right: 45px !important;
}
ha-card {
padding: 30px 10px !important;
--primary-text-color: black;
--secondary-text-color: black;
width: 204% !important;
}
- 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.thermostat_dropdown
icon_color: 31,31,31
card_mod:
style: |
ha-card {
--chip-icon-size: 0.7em;
--chip-padding: 0px 6px;
--chip-height: 40px;
--chip-border-radius: 100px;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.46) !important;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: white;
position: absolute;
top: 30px;
right: 10px;
width: fit-content;
border-radius: 100px !important;
}
- type: conditional
conditions:
- entity: input_boolean.thermostat_dropdown
state: 'on'
card:
type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.office_main_light
name: Main Light
show_brightness_control: true
tap_action:
action: toggle
use_light_color: true
show_color_temp_control: true
show_color_control: true
icon_color: none
card_mod:
style:
mushroom-shape-icon$: |
.shape:active {
transform: scale(1.2);
}
.: |
mushroom-light-brightness-control,
mushroom-light-color-temp-control,
mushroom-light-color-control {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
opacity: 1;
--control-height: 102px;
--control-border-radius: var(--ha-card-border-radius, 12px);
--rgb-disabled: var(--rgb-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;
--icon-color: black !important;
--icon-symbol-size: 0.7em;
}
ha-card {
padding: 30px 10px !important;
--primary-text-color: black;
--secondary-text-color: black;
margin: 10px 0px 0px 0px !important;
width: 98% !important;
}
mushroom-button {
border-radius: 100px !important;
width: 30px;
height: 30px;
--control-icon-size: 15px;
--icon-color: black;
background: white !important;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.46) !important;
}
mushroom-button:nth-child(3) {
position: absolute;
top: 62px;
right: 52px;
background: white !important;
}
mushroom-button:nth-child(2) {
position: absolute;
top: 62px;
right: 5px;
margin-left: 35px !important;
background: white !important;
}
- type: custom:mushroom-light-card
entity: light.office_desk_lamp
name: Desk Lamp
show_brightness_control: true
tap_action:
action: toggle
use_light_color: true
show_color_temp_control: true
show_color_control: true
icon_color: none
card_mod:
style:
mushroom-shape-icon$: |
.shape:active {
transform: scale(1.2);
}
.: |
mushroom-light-brightness-control,
mushroom-light-color-temp-control,
mushroom-light-color-control {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
opacity: 1;
--control-height: 102px;
--control-border-radius: var(--ha-card-border-radius, 12px);
--rgb-disabled: var(--rgb-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;
--icon-color: black !important;
--icon-symbol-size: 0.7em;
}
ha-card {
padding: 30px 10px !important;
--primary-text-color: black;
--secondary-text-color: black;
margin: 10px 0px 0px 0px !important;
width: 100% !important;
}
mushroom-button {
border-radius: 100px !important;
width: 30px;
height: 30px;
--control-icon-size: 15px;
--icon-color: black;
background: white !important;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.46) !important;
}
mushroom-button:nth-child(3) {
position: absolute;
top: 62px;
right: 52px;
background: white !important;
}
mushroom-button:nth-child(2) {
position: absolute;
top: 62px;
right: 5px;
margin-left: 35px !important;
background: white !important;
}
Only thing left to do now is get rid of those pesky lines from the grid card
5 Likes
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.
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;
}
1umnyy
July 29, 2023, 4:50pm
7495
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
Azrael79
July 29, 2023, 5:02pm
7497
Thx a lot, sometimes its so easy
Numotiv
July 29, 2023, 5:08pm
7498
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%
22 Likes
mhoogenbosch
July 29, 2023, 8:23pm
7499
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
Numotiv
July 29, 2023, 10:42pm
7502
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
Numotiv
July 29, 2023, 10:44pm
7503
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
thanks for help
1umnyy
July 29, 2023, 10:52pm
7505
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;
}
VCTGomes
July 30, 2023, 2:11am
7506
Hey guys, how could I put this chip from sensor CPU on right corner in the center? And how to remove this edges?
FireDragon
July 30, 2023, 5:23am
7508
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
That worked for me. Thanks!
