How can delete the shadows behind the squares? I’m trying and nothing at all! Can you help me because it’s perfect for mine but I don’t want the shadows. Thanks!
Mushroom-Bar-Card
Why this card when there is a mushroom-number-card?
I wanted to have a card to display a number value on a bar, but has no option to change the value.
Made with Mushroom-Card, Button-Card and Bar-Card.
The card shows
- the state of a sensor entity in relation to a “max”-entity
- a bar with the state of an entity in relation to a “max”-entity
You just to need to fill in your entities in the “variables:”-section.
YAML-Code
type: custom:button-card
entity: sensor.stromeinspeisung_kwh_bisher
variables:
max_entity: input_select.senec_cloud # the entity, that has the "max"-value
name: '[[[ return entity.attributes.friendly_name ]]]' # name to display (defaults to the entities friendly-name)
color: purple # the color the bar and mushroom-card shut be (attention: mushroom-cards dont accept all color names!)
units: '[[[ return entity.attributes.unit_of_measurement ]]]' # the unit of measurement to display (defaults to the unit of measurement of the entity)
icon: mdi:cloud-arrow-up-outline # the icon the mushroom-card should have
show_name: false
show_state: false
show_icon: false
styles:
card:
- padding: 3px
grid:
- grid-template-areas: '"mush bar"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 100%
custom_fields:
mush:
- filter: opacity(100%)
- overflow: visible
bar:
- filter: opacity(100%)
- overflow: visible
custom_fields:
mush:
card:
type: custom:mushroom-template-card
tap_action:
action: more-info
entity: '[[[ return entity.entity_id ]]]'
icon_color: '[[[ return variables.color ]]]'
secondary: '[[[ return variables.name ]]]'
primary: >-
[[[ return entity.state + "/" + states[variables.max_entity].state +
" " + variables.units ]]]
icon: '[[[ return variables.icon ]]]'
card_mod:
style: |
ha-card {
padding: 0px !important;
padding-bottom: 3px !important;
text-align: left !important;
border: none !important;
box-shadow: none !important;
background: none !important;
}
bar:
card:
type: custom:bar-card
name: ' '
entity: '[[[ return entity.entity_id ]]]'
max: '[[[ return states[variables.max_entity].state ]]]'
min: 0
unit_of_measurement: >-
[[[ return "/ " + states[variables.max_entity].state + " " +
variables.units ]]]
color: '[[[ return variables.color ]]]'
decimal: 0
entity_row: true
positions:
icon: 'off'
indicator: 'off'
minmax: inside
title: 'off'
value: 'off'
style: |-
.contentbar-direction-right {
flex-direction: row;
}
bar-card-contentbar {
align-items: flex-end;
display: flex;
justify-content: space-between;
}
bar-card-backgroundbar, bar-card-currentbar {
left: 0px !important;
}
bar-card-iconbar {
color: white;
}
bar-card-name {
margin-top: 2px;
margin-bottom: 2px;
margin-left: 2px;
margin-right: 2px;
font-size: 1em;
font-weight: bold;
color: white;
}
bar-card-value {
margin-top: 2px;
margin-bottom: 2px;
margin-left: 2px;
margin-right: 2px;
font-size: 1em;
font-weight: bold;
color: white;
}
bar-card-max {
display: none;
}
bar-card-divider {
display: none;
}
.min-direction-right {
display: none;
}
You can also have the cards above in this way
All you need to to ist to change this
grid:
- grid-template-areas: '"mush bar"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 100%
to that:
grid:
- grid-template-areas: '"mush" "bar"'
- grid-template-columns: 100%
- grid-template-rows: 1.3fr 1fr
14 Likes
would be wonderfull if you shared how you did that in code.
Maybe a bit off-topic but i think my energie-card fits perfectly to my mushroom-cards dashboard, so here is my
Energy-Dashboard-Card
For this you will need:
- Mushroom-Card (HACS)
- Button-Card
- Apexcharts-Card (HACS)
- Sankey-Card (HACS)
- Stack in a Card (HACS)
- Energy Period Selector Plus (Custom HACS)
This Icons has a link to another Tab in Home Assistant with a full-screen-view of the Apex-Charts-Card
These Chip-Cards Link to Subviews for Electrical Energy, Gas and Water-Usage.
type: grid
columns: 1
square: false
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
content: Energie
icon: mdi:home-import-outline
tap_action: none
card_mod:
style: |
ha-card {
padding: 0px !important;
border: none !important;
box-shadow: none !important;
font-size: 3.5rem !important;
background: none !important;
}
- type: template
content: Strom
icon: mdi:lightning-bolt-circle
icon_color: orange
tap_action:
action: navigate
navigation_path: /lovelace/energie-dashboard
- type: template
content: Wasser
icon: mdi:waves
icon_color: blue
tap_action:
action: navigate
navigation_path: /lovelace/wasser
- type: template
content: Gas
icon: mdi:gas-burner
icon_color: purple
tap_action:
action: navigate
navigation_path: /lovelace/gas
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding: 0px;
}
mode: vertical
keep:
background: true
border_radius: true
box_shadow: true
margin: true
outer_padding: true
cards:
- type: horizontal-stack
cards:
- type: custom:apexcharts-card
card_mod:
style: |
ha-card {
padding: 0px 0px 0px 0px;
border: none;
box-shadow: none;
margin-bottom: -15px;
}
#state__value > #state {
font-size: 1.2em !important;
}
.apexcharts-tooltip-series-group {
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
display: none;
text-align: left;
justify-content: left;
align-items: center;
}
#header {
padding: 3px !important;
}
apex_config:
chart:
height: 120px
legend:
show: false
tooltip:
items:
display: flex
title:
text: Stromverbrauch
align: center
margin: 0
offsetX: 0
offsetY: 15
floating: true
style:
fontSize: 1rem
fontWeight: bold
color: var(--primary-text-color)
yaxis:
- min: ~0
max: ~500
decimals: 0
apex_config:
tickAmount: 4
forceNiceScale: true
title:
text: W
rotate: 0
all_series_config:
stroke_width: 2
float_precision: 0
show:
in_header: raw
legend_value: false
type: area
opacity: 0.2
statistics:
type: mean
period: 5minute
span:
end: minute
graph_span: 24h
header:
show: false
title: ''
show_states: true
colorize_states: true
standard_format: true
floating: true
series:
- entity: sensor.senec_house_power
name: Haus
color: grey
- entity: sensor.senec_solar_generated_power
name: Solar
color: var(--energy-solar-color)
- entity: sensor.senec_grid_imported_power
name: aus Netz
color: var(--energy-grid-consumption-color)
- entity: sensor.senec_battery_import_power
name: in Speicher
color: var(--energy-battery-out-color)
invert: true
- entity: sensor.senec_battery_export_power
name: aus Speicher
color: var(--energy-battery-in-color)
- entity: sensor.senec_grid_exported_power
name: ins Netz
color: var(--energy-grid-return-color)
invert: true
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace/energie-aktuell
icon: mdi:magnify-expand
styles:
card:
- width: 3.5rem
- border: none
- box-shadow: none
- margin-left: '-40px'
- type: custom:sankey-chart
show_names: true
show_icons: false
wide: true
round: 0
height: 70
show_units: true
min_box_height: 10
card_mod:
style: |
ha-card {
background: var(card-background-color);
padding: 0px;
#border-radius: 0px;
font-size: 0.8rem;
font-weight: bold;
border: none;
box-shadow: none;
overflow-x: clip !important;
}
.container {
padding: 0px !important;
}
sections:
- entities:
- entity_id: sensor.senec_solar_generated_power
color: var(--energy-solar-color)
name: Solar
children:
- sensor.senec_solar_house_used_power
- sensor.produced_power_produktionsueberschuss
- entity_id: sensor.senec_grid_imported_power
color: var(--energy-grid-consumption-color)
name: Netz
children:
- sensor.senec_grid_house_used_power
- entity_id: sensor.senec_battery_export_power
color: var(--energy-battery-out-color)
name: Speicher
children:
- sensor.senec_battery_house_used_power
- sensor.senec_grid_exported_power
- entities:
- entity_id: sensor.senec_solar_house_used_power
color: var(--energy-solar-color)
name: Haus
children:
- sensor.senec_house_power
- sensor.shelly_pool_energy_power
- entity_id: sensor.senec_grid_house_used_power
type: passthrough
color: var(--energy-grid-consumption-color)
name: Haus
children:
- sensor.senec_house_power
- sensor.shelly_pool_energy_power
- entity_id: sensor.senec_battery_house_used_power
type: passthrough
color: var(--energy-battery-out-color)
name: Haus
children:
- sensor.senec_house_power
- sensor.shelly_pool_energy_power
- entity_id: sensor.produced_power_produktionsueberschuss
color: var(--energy-solar-color)
name: Gewinn
children:
- sensor.senec_grid_exported_power
- sensor.senec_battery_import_power
- entities:
- entity_id: sensor.senec_house_power
color: grey
subtract_entities:
- sensor.shelly_pool_energy_power
- entity_id: sensor.shelly_pool_energy_power
color: grey
- entity_id: sensor.senec_grid_exported_power
color: var(--energy-grid-return-color)
name: Netz
- entity_id: sensor.senec_battery_import_power
color: var(--energy-battery-in-color)
name: Speicher
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding: 0px;
}
mode: vertical
keep:
background: true
border_radius: true
box_shadow: true
margin: true
outer_padding: true
cards:
- type: horizontal-stack
cards:
- type: custom:apexcharts-card
card_mod:
style: |
ha-card {
padding: 0px 0px 0px 0px;
border: none;
box-shadow: none;
margin-bottom: -15px;
}
#state__value > #state {
font-size: 1.2em !important;
}
.apexcharts-tooltip-series-group {
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
display: none;
text-align: left;
justify-content: left;
align-items: center;
}
#header {
padding: 3px !important;
}
yaxis:
- id: first
decimals: 0
min: -2500
max: 2500
apex_config:
tickAmount: 4
forceNiceScale: false
title:
text: W
rotate: 0
labels:
style:
colors:
- var(--energy-battery-out-color)
- var(--energy-battery-out-color)
- grey
- var(--energy-battery-in-color)
- var(--energy-battery-in-color)
- id: second
opposite: true
decimals: 0
min: 0
max: 100
apex_config:
tickAmount: 4
title:
text: '%'
rotate: 0
labels:
style:
colors: grey
apex_config:
chart:
height: 120px
legend:
show: false
title:
text: Senec Batteriespeicher
align: center
margin: 10
offsetX: 0
offsetY: 10
floating: true
style:
fontSize: 1rem
fontWeight: bold
color: var(--primary-text-color)
span:
end: minute
graph_span: 24h
header:
show: false
title: ' '
show_states: true
colorize_states: true
all_series_config:
statistics:
type: mean
period: 5minute
show:
in_header: raw
opacity: 0.2
type: area
stroke_width: 2
series:
- entity: sensor.senec_battery_charge_power
yaxis_id: first
name: Ladung
color: var(--energy-battery-in-color)
- entity: sensor.senec_battery_charge_percent
yaxis_id: second
name: Füllstand
color: grey
- entity: sensor.senec_battery_discharge_power
yaxis_id: first
invert: true
name: Entladung
color: var(--energy-battery-out-color)
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace/senec-speicher
icon: mdi:magnify-expand
styles:
card:
- width: 3.5rem
- border: none
- box-shadow: none
- margin-left: '-40px'
- type: custom:mushroom-template-card
entity: sensor.senec_battery_charge_percent
primary: Speicher-Status
multiline_secondary: true
secondary: |-
{% set state = states('sensor.senec_system_state') %}
{% if state == 'CHARGE' %}
{{ states(entity, with_unit=True) }} - Speicher wird mit {{ states("sensor.senec_battery_import_power", with_unit=True) }} geladen
{% elif state == 'ABSORPTION PHASE' %}
{{ states(entity, with_unit=True) }} - Nachlade-Phase
{% elif state == 'BATTERY FULL' %}
{{ states(entity, with_unit=True) }} - Speicher vollständig geladen
{% elif state == 'OWN CONSUMPTION' %}
{{ states(entity, with_unit=True) }} - Selbstverbrauch von Solarenergie
{% elif state == 'DISCHARGE' %}
{{ states(entity, with_unit=True) }} - Speicher wird mit {{ states('sensor.senec_battery_export_power', with_unit=True) }} entladen
{% elif state == 'BATTERY EMPTY' %}
{{ states(entity, with_unit=True) }} - Speicher ist leer
{% elif state == 'PV + DISCHARGE' %}
{{ states(entity, with_unit=True) }} - Solarstrom und Speicher mit {{ states('sensor.senec_battery_export_power', with_unit=True) }} entladen
{% elif state == 'GRID + DISCHARGE' %}
{{ states(entity, with_unit=True) }} - Strom aus dem Netz und Speicher mit {{ states('sensor.senec_battery_export_power', with_unit=True) }} entladen
{% elif state == 'BATTERY DIAGNOSIS' %}
{{ states(entity, with_unit=True) }} - Speicher im Diagnosemodus
{% elif state == 'PASSIVE' %}
{{ states(entity, with_unit=True) }} - Speicher im Standby-Modus
{% elif state == 'EMERGANCY CHARGE' %}
{{ states(entity, with_unit=True) }} - Notladung
{% else %}
{{ states('sensor.senec_battery_charge_percent') }}% - Status nicht bekannt
{% endif %}
icon: |-
{% set state = states('sensor.senec_system_state') %}
{% if state == 'CHARGE' %}
mdi:battery-arrow-up
{% elif state == 'ABSORPTION PHASE' %}
mdi:battery-arrow-up
{% elif state == 'BATTERY FULL' %}
mdi:battery
{% elif state == 'OWN CONSUMPTION' %}
mdi:recycle
{% elif state == 'DISCHARGE' %}
mdi:battery-arrow-down
{% elif state == 'BATTERY EMPTY' %}
mdi:battery-10
{% elif state == 'PV + DISCHARGE' %}
mdi:battery-arrow-down
{% elif state == 'GRID + DISCHARGE' %}
mdi:battery-arrow-down
{% elif state == 'BATTERY DIAGNOSIS' %}
mdi:progress-question
{% elif state == 'PASSIVE' %}
mdi:sleep
{% elif state == 'EMERGANCY CHARGE' %}
mdi:alert
{% else %}
mdi:progress-question
{% endif %}
icon_color: |-
{% set state = states('sensor.senec_system_state') %}
{% if state == 'CHARGE' %}
green
{% elif state == 'ABSORPTION PHASE' %}
blue
{% elif state == 'BATTERY FULL' %}
green
{% elif state == 'OWN CONSUMPTION' %}
orange
{% elif state == 'DISCHARGE' %}
red
{% elif state == 'BATTERY EMPTY' %}
red
{% elif state == 'PV + DISCHARGE' %}
red
{% elif state == 'GRID + DISCHARGE' %}
red
{% elif state == 'BATTERY DIAGNOSIS' %}
blue
{% elif state == 'PASSIVE' %}
blue
{% elif state == 'EMERGANCY CHARGE' %}
red
{% else %}
blue
{% endif %}
fill_container: true
tap_action:
action: more-info
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.05) !important;
padding: 3px !important;
#border: none !important;
#box-shadow: none !important;
}
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding: 0px;
}
mode: vertical
keep:
background: true
border_radius: true
box_shadow: true
margin: true
outer_padding: true
cards:
- type: horizontal-stack
cards:
- type: custom:apexcharts-card
stacked: true
card_mod:
style: |
ha-card {
padding: 0px 0px 0px 0px;
border: none;
box-shadow: none;
}
#state__value > #state {
font-size: 1.2em !important;
}
#header {
padding: 3px !important;
}
apex_config:
chart:
height: 120px
legend:
show: false
tooltip:
shared: true
title:
text: Energieverbrauch heute
align: center
margin: 0
offsetX: 0
offsetY: 15
floating: true
style:
fontSize: 1rem
fontWeight: bold
color: var(--primary-text-color)
span:
start: day
graph_span: 1d
header:
show: false
title: ''
show_states: true
colorize_states: true
standard_format: true
floating: false
yaxis:
- min: ~0
max: ~1
apex_config:
tickAmount: 3
forceNiceScale: true
title:
text: kWh
all_series_config:
stroke_width: 2
opacity: 0.2
float_precision: 1
show:
in_header: raw
legend_value: false
type: column
statistics:
type: sum
group_by:
func: diff
start_with_last: true
duration: 1hour
series:
- entity: sensor.grid_imported_daily
name: aus Netz
color: var(--energy-grid-consumption-color)
- entity: sensor.battery_charged_daily
invert: true
name: in Speicher
color: var(--energy-battery-in-color)
- entity: sensor.battery_discharged_daily
name: aus Speicher
color: var(--energy-battery-out-color)
- entity: sensor.solar_produced_daily
name: Solar
color: var(--energy-solar-color)
- entity: sensor.grid_exported_daily
invert: true
name: ins Netz
color: var(--energy-grid-return-color)
- entity: sensor.house_consumed_daily
type: area
opacity: 0.2
name: Haus
color: grey
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /energy
icon: mdi:magnify-expand
styles:
card:
- width: 3.5rem
- border: none
- box-shadow: none
- margin-left: '-40px'
- type: custom:sankey-chart
energy_date_selection: true
show_names: true
show_icons: false
wide: true
unit_prefix: k
round: 1
height: 70
show_units: true
min_box_height: 10
card_mod:
style: |
ha-card {
background: var(card-background-color);
#color: rgb(50,50,50);
# --primary-text-color: rgb(50,50,50);
# --secondary-text-color: rgb(50,50,50);
padding: 0px;
#border-radius: 0px;
font-size: 0.8rem;
font-weight: bold;
border: none;
box-shadow: none;
overflow-x: clip !important;
}
.container {
padding: 0px !important;
}
sections:
- entities:
- entity_id: sensor.senec_solar_total_generated
color: var(--energy-solar-color)
name: Solar
children:
- sensor.senec_grid_total_export
- sensor.senec_battery_total_charged
- sensor.whatever
- entity_id: sensor.senec_grid_total_import
color: var(--energy-grid-consumption-color)
name: Netz
children:
- sensor.senec_grid_total_import
- entity_id: sensor.senec_battery_total_discharged
color: var(--energy-battery-out-color)
name: Speicher
children:
- sensor.senec_battery_total_discharged
- entities:
- entity_id: sensor.senec_grid_total_export
type: passthrough
name: Gewinn
color: var(--energy-solar-color)
children:
- sensor.senec_grid_total_export
- entity_id: sensor.senec_battery_total_charged
type: passthrough
color: var(--energy-solar-color)
name: Haus
children:
- sensor.senec_battery_total_charged
- entity_id: sensor.whatever
type: remaining_parent_state
color: var(--energy-solar-color)
name: Haus
children:
- sensor.senec_house_total_consumption
- entity_id: sensor.senec_grid_total_import
type: passthrough
color: var(--energy-grid-consumption-color)
name: Haus
children:
- sensor.senec_house_total_consumption
- entity_id: sensor.senec_battery_total_discharged
type: passthrough
color: var(--energy-battery-out-color)
name: Haus
children:
- sensor.senec_house_total_consumption
- entities:
- entity_id: sensor.senec_grid_total_export
color: var(--energy-grid-return-color)
name: Netz
- entity_id: sensor.senec_battery_total_charged
color: var(--energy-battery-in-color)
name: Speicher
- entity_id: sensor.senec_house_total_consumption
color: var(--energy-grid-consumption-color)
name: Haus
- type: custom:energy-period-selector-plus
card_background: false
today_button: true
prev_next_buttons: true
compare_button_type: ''
today_button_type: icon
custom_period_label: Custom
compare_button_label: Daten vergleichen
period_buttons:
- day
- month
- year
31 Likes
I’m using the Sidebar Card, and have it configured to only display when the screen size is large enough. As far as the layout goes, it’s all done in the Lovelace dashboard using layout-card with the following settings:
.
Each tile is its own entity using Mushroom cards with vertical layouts.
2 Likes
I have made a mushroom inspired battery card (can also be used for other bar style cards). It is built entirely out of the auto entities card and the bar card.
Does not work without auto entities! Please use auto entities even if you have just 1 bar. It will not work without it
What it looks like with multiple entities.
All you have to do is fill in the <=> sections your colors and icons you want use for the severity. And then choose the entity/entities you want to target with auto entities.
The color of the icon and the bar+background will then update to reflect your colors set automatically.
type: custom:auto-entities
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding-top: 5px;
filter:
include:
- entity_id: sensor.office_blinds**battery
options:
type: custom:bar-card
card_mod:
style: |
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 13px;
height: 43px !important;
margin-top: -8px;
}
bar-card-row {
margin-bottom: 14px !important;
}
bar-card-name {
color: black;
margin-top: -10px;
}
bar-card-value {
color: black;
margin-top: -10px;
}
ha-icon{
padding: 11px;
border-radius: 100px;
margin-top: -12px;
}
bar-card-row bar-card-currentbar,
ha-icon, bar-card-backgroundbar {
--bar-color:
{% if states(config.entity) | int <= 10 %}
#ff0026 !important;
--card-mod-icon: mdi:battery-10 !important;
{% elif states(config.entity) | int <= 20 %}
#ff4d00 !important;
--card-mod-icon: mdi:battery-20 !important;
{% elif states(config.entity) | int <= 30 %}
#ff9900 !important;
--card-mod-icon: mdi:battery-30 !important;
{% elif states(config.entity) | int <= 40 %}
#ffcc00 !important;
--card-mod-icon: mdi:battery-40 !important;
{% elif states(config.entity) | int <= 50 %}
#e7fc03 !important;
--card-mod-icon: mdi:battery-50 !important;
{% elif states(config.entity) | int <= 60 %}
#aaff00 !important;
--card-mod-icon: mdi:battery-60 !important;
{% elif states(config.entity) | int <= 70 %}
#aaff00 !important;
--card-mod-icon: mdi:battery-70 !important;
{% elif states(config.entity) | int <= 80 %}
#22c402 !important;
--card-mod-icon: mdi:battery-80 !important;
{% elif states(config.entity) | int <= 90 %}
#22c402 !important;
--card-mod-icon: mdi:battery-90 !important;
{% elif states(config.entity) | int <= 100 %}
#22c402 !important;
--card-mod-icon: mdi:battery !important;
{% else %}
blue
mdi:bug
{% endif %}
}
bar-card-row ha-icon {
color: color-mix(in srgb, var(--bar-color) 100%, transparent);
background: color-mix(in srgb, var(--bar-color) 20%, transparent);
}
ha-card {
padding: 0px !important;
margin: -3px !important;
height: 60px;
}
sort:
method: state
numeric: true
ip: false
ignore_case: false
reverse: false
show_empty: true
card_param: cards
This is the section you will want to change the colors, icons, and the values of for your own purpose:
bar-card-row bar-card-currentbar,
ha-icon, bar-card-backgroundbar {
--bar-color:
{% if states(config.entity) | int <= 10 %}
#ff0026 !important;
--card-mod-icon: mdi:battery-10 !important;
{% elif states(config.entity) | int <= 20 %}
#ff4d00 !important;
--card-mod-icon: mdi:battery-20 !important;
{% elif states(config.entity) | int <= 30 %}
#ff9900 !important;
--card-mod-icon: mdi:battery-30 !important;
{% elif states(config.entity) | int <= 40 %}
#ffcc00 !important;
--card-mod-icon: mdi:battery-40 !important;
{% elif states(config.entity) | int <= 50 %}
#e7fc03 !important;
--card-mod-icon: mdi:battery-50 !important;
{% elif states(config.entity) | int <= 60 %}
#aaff00 !important;
--card-mod-icon: mdi:battery-60 !important;
{% elif states(config.entity) | int <= 70 %}
#aaff00 !important;
--card-mod-icon: mdi:battery-70 !important;
{% elif states(config.entity) | int <= 80 %}
#22c402 !important;
--card-mod-icon: mdi:battery-80 !important;
{% elif states(config.entity) | int <= 90 %}
#22c402 !important;
--card-mod-icon: mdi:battery-90 !important;
{% elif states(config.entity) | int <= 100 %}
#22c402 !important;
--card-mod-icon: mdi:battery !important;
{% else %}
blue
mdi:bug
{% endif %}
And this is the section you will want to change to target your specific entity/entities:
filter:
include:
- entity_id: sensor.office_blinds**battery
You can also use a grid card instead of the stack in card. I just prefer the single card with multiple bars look 
18 Likes
The post above should get you on your way for setting up the general layout. Here is code for my Garage section. Each of the individual rooms is a section similar to what I am posting now. Just add a new card and throw this code in. Then substitute your own entities and such. Entities will show up in rows of 3.
square: false
columns: 1
type: grid
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Garage
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
width: 300
grid-template-columns: 130px 130px 130px
cards:
- type: custom:mushroom-cover-card
entity: cover.garage
layout: vertical
- type: custom:mini-graph-card
entities:
- sensor.garage_freezer_temperature
line_color: lightblue
line_width: 4
font_size: 50
font_size_header: 10
align_icon: state
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Shopping List
content:
type: vertical-stack
cards:
- type: custom:gap-card
height: 24
- type: shopping-list
height: 50
card_mod:
style: |
ha-card {
max-height: 120px;
}
- type: custom:mushroom-entity-card
entity: input_boolean.help_needed_when_arriving_home
icon: phu:rooms-carport
icon_color: red
layout: vertical
name: Help Unload
tap_action:
action: toggle
- type: custom:mushroom-template-card
entity: sensor.waste_collection_trash_formated
primary: Trash Day
secondary: '{{ states(''sensor.waste_collection_trash_formated'') }}'
icon: mdi:trash-can
layout: vertical
icon_color: >
{% if is_state('sensor.waste_collection_trash_formated', 'Today')
%} lime {% endif %}
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-template-card
entity: sensor.waste_collection_recycle_formated
primary: Recycling Day
secondary: '{{ states(''sensor.waste_collection_recycle_formated'') }}'
icon: mdi:recycle
layout: vertical
icon_color: >
{% if is_state('sensor.waste_collection_recycle_formated',
'Today') %} purple {% endif %}
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-template-card
primary: Garage Door
secondary: >-
{% if
is_state("binary_sensor.lumi_lumi_sensor_magnet_aq2_opening",
"off") -%}
Closed
{%- elif
is_state("binary_sensor.lumi_lumi_sensor_magnet_aq2_opening",
"on") -%}
Open
{% else %}
Unknown
{%- endif %}
icon: >-
{% if
is_state('binary_sensor.lumi_lumi_sensor_magnet_aq2_opening',
'on') %} mdi:door-open {%- else -%} mdi:door {% endif %}
entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_opening
layout: vertical
icon_color: >
{% if
is_state('binary_sensor.lumi_lumi_sensor_magnet_aq2_opening',
'on') %} red {% endif %}
tap_action:
action: more-info
I am also using a custom theme.
homekit:
modes:
light:
# Background image
lovelace-background: 'center / cover no-repeat url("https://hassio_url/local/images/backgrounds/light-theme-wallpaper.png") fixed'
ha-card-background: '#f6f6f6'
dark:
# Background image
lovelace-background: 'center / cover no-repeat url("https://hassio_url/local/images/backgrounds/homekit_bg_dark.png") fixed'
primary-color: steelblue
# blurring-background-behind-popup
dialog-backdrop-filter: blur(5px)
dialog-border-radius: 20px;
dialog-box-shadow: 0em 0em 0.5em;
iron-overlay-backdrop-opacity: 0.5
iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)
mdc-dialog-box-shadow: 0em 0em 15px 15px slategray
mdc-shape-medium: 25px
1 Like
I’ve been making heavy use of card_mod styling in my dashboard. Just wondering if anyone else has issues where the styling is applied after a slight delay, causing everything to flicker on the initial page load?
1 Like
I have made some significant improvements and changes to my battery card that i posted a while back that i feel like it warrants another post if that is ok. if not i will remove and update my original post instead.
-
Card now lists lowest battery detected with auto entities only, and gives the option for a dropdown menu to see the rest. i really like this change as it now doesnt take up loads of space at the bottom of my room cards, only when i expand it to see all of them will it take up that space
-
The auto entities filter is now based on a template instead of static values in include and exclude. means more complex filtering that you can do!
{%- for state in states.sensor |
selectattr('entity_id','search','battery') |
selectattr('entity_id','search','spare_bedroom') -%}
- Because we are using a template filter we can now also edit the name of the entity on the fly. so removing things from the name that are redundant. in my case i remove the word battery, because… of course its a battery…? and then removing the name off the room. i clicked on the room, i know what room i am looking at, so doesnt need to be in the name.
'name': state.attributes.friendly_name.split(' Battery')[0].split(' battery')[0].split('Spare Bedroom')[1],
- You can now set the text color based on the battery percentage as well. this is good for when you have a color set on the bar that doesnt work well with the default text color. you can also set this based on whether dark or light theme is being used.
(this is now a bit messy looking, but trust me when i say that this was the only way to implement it.)
{% if states(config.entity) | int <= 10 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #ff0026 !important;
/* Icon */
--card-mod-icon: mdi:battery-10 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
- Fixed some alignment issues. and made it perfectly match the sizing of mushroom cards
You do now need to fill in your values for bar color, icon type, and text color in 2 seperate places rather than 1 like before. but it is just a duplicate of the other, so you can copy and paste once you have finished 1 full {% if %} {% endif %} section into the other one and then fix the indentation.
here is what it looks like expanded. safe to say that i am in love with this card
The code is too big to post in a single reply, so i will post it in 2 sections. just put them together right under eachother in the same card!
1st Half of Code
type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: transparent;
box-shadow: none;
border: none;
}
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:auto-entities
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding-top: 5px;
{% if states('input_boolean.spare_bedroom_battery_dropdown') == 'on' %}
padding-bottom: 5px;
{% else %}
padding-bottom: 0px;
{% endif %}
padding-right: 30px;
width: 200%;
background: transparent !important;
box-shadow: none;
border: none !important;
}
card_param: cards
filter:
template: >-
{%- for state in states.sensor |
selectattr('entity_id','search','battery') |
selectattr('entity_id','search','spare_bedroom') -%}
{{
{
'type': 'custom:bar-card',
'entity': state.entity_id,
'name': state.attributes.friendly_name.split(' Battery')[0].split(' battery')[0].split('Spare Bedroom')[1],
'card_mod':
{
'style': 'bar-card-currentbar, bar-card-backgroundbar {
border-radius: 12px !important;
height: 41px !important;
margin-top: -8px !important;
width: 101%;
right: 0.5%;
}
ha-icon {
position: relative;
padding: 11px;
border-radius: 50%;
--mdc-icon-size: 21px;
margin-top: -15px;
right: 4px;
}
{% if states(config.entity) | int <= 10 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #ff0026 !important;
/* Icon */
--card-mod-icon: mdi:battery-10 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 20 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #ff4d00 !important;
/* Icon */
--card-mod-icon: mdi:battery-20 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 30 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #ff9900 !important;
/* Icon */
--card-mod-icon: mdi:battery-30 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 40 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #ffcc00 !important;
/* Icon */
--card-mod-icon: mdi:battery-40 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 50 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #e3eb00 !important;
/* Icon */
--card-mod-icon: mdi:battery-50 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 60 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #aaff00 !important;
/* Icon */
--card-mod-icon: mdi:battery-60 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 70 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #77ff00 !important;
/* Icon */
--card-mod-icon: mdi:battery-70 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 80 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #00ff1a !important;
/* Icon */
--card-mod-icon: mdi:battery-80 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 90 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #22c402 !important;
/* Icon */
--card-mod-icon: mdi:battery-90 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 100 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #22c402 !important;
/* Icon */
--card-mod-icon: mdi:battery !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% else %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #0033ff !important
/* Icon */
--card-mod-icon: mdi:bug
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% endif %}
bar-card-row, ha-icon {
color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
background: color-mix(in srgb, var(--bar-color) 20%, transparent);
}
bar-card-indicator {
color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
top: -8px;
}
bar-card-name {
margin-top: -27px !important;
font-weight: bold;
left: 0px;
}
bar-card-value {
margin-top: 8px !important;
font-weight: bold;
font-size: 11px;
right: 96.9%;
width: 0px;
}
ha-card {
margin: -4px 0px !important;
height: 60px;
}'
}
}
}},
{%- endfor %}
sort:
method: state
numeric: true
count: 1
- type: custom:mushroom-chips-card
chips:
- type: template
icon: >-
{% if
states('input_boolean.spare_bedroom_battery_dropdown') ==
'on' %}
mdi:chevron-up
{% else %}
mdi:chevron-down
{% endif %}
entity: input_boolean.spare_bedroom_battery_dropdown
card_mod:
style: |
ha-card {
top: 13px;
right: 10px;
--chip-icon-size: 23px;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
alignment: end
EDIT: Updated to work with card mod version 3.4.0 and up. Since just using style: | without card_mod: before is entirely dead now.
11 Likes
2nd Half of Code
- type: conditional
conditions:
- entity: input_boolean.spare_bedroom_battery_dropdown
state: 'on'
card:
type: custom:auto-entities
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding-top: 5px;
padding-bottom: 5px;
margin: -14px 0px 0px 0px;
background: transparent;
box-shadow: none;
border: none;
}
card_param: cards
filter:
template: >-
{%- for state in states.sensor |
selectattr('entity_id','search','battery') |
selectattr('entity_id','search','spare_bedroom') -%}
{{
{
'type': 'custom:bar-card',
'entity': state.entity_id,
'name': state.attributes.friendly_name.split(' Battery')[0].split(' battery')[0].split('Spare Bedroom')[1],
'card_mod':
{
'style': 'bar-card-currentbar, bar-card-backgroundbar {
border-radius: 12px !important;
height: 41px !important;
margin-top: -8px !important;
width: 103%;
left: -1.5%;
}
ha-icon {
position: relative;
padding: 11px;
border-radius: 100px;
--mdc-icon-size: 21px;
margin-top: -15px;
right: 4px;
}
{% if states(config.entity) | int <= 10 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #ff0026 !important;
/* Icon */
--card-mod-icon: mdi:battery-10 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 20 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #ff4d00 !important;
/* Icon */
--card-mod-icon: mdi:battery-20 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 30 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #ff9900 !important;
/* Icon */
--card-mod-icon: mdi:battery-30 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 40 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #ffcc00 !important;
/* Icon */
--card-mod-icon: mdi:battery-40 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 50 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #e3eb00 !important;
/* Icon */
--card-mod-icon: mdi:battery-50 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 60 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #aaff00 !important;
/* Icon */
--card-mod-icon: mdi:battery-60 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 70 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #77ff00 !important;
/* Icon */
--card-mod-icon: mdi:battery-70 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 80 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #00ff1a !important;
/* Icon */
--card-mod-icon: mdi:battery-80 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 90 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #22c402 !important;
/* Icon */
--card-mod-icon: mdi:battery-90 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 100 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #22c402 !important;
/* Icon */
--card-mod-icon: mdi:battery !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% else %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #0033ff !important
/* Icon */
--card-mod-icon: mdi:bug
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% endif %}
bar-card-row ha-icon {
color: color-mix(in srgb, var(--bar-color) 100%, transparent);
background: color-mix(in srgb, var(--bar-color) 20%, transparent);
}
bar-card-indicator {
color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
top: -8px;
}
bar-card-name {
margin-top: -27px !important;
font-weight: bold;
left: 0px;
}
bar-card-value {
margin-top: 8px !important;
font-weight: bold;
font-size: 11px;
right: 97%;
width: 0px;
}
ha-card {
margin: -4px 0px !important;
height: 60px;
}'
}
}
}},
{%- endfor %}
sort:
method: state
numeric: true
first: 1
count: 100
EDIT: Updated to work with card mod version 3.4.0 and up. Since just using style: | without card_mod: before is entirely dead now.
5 Likes
Hi All,
I have built an alternative to the existing mushroom horizontal layout that currently exists with card_mod:
i didnt like the fact that a bunch of space is being wasted, and that you have very limited room for the slider. so i built this:
and its alternative that keeps the text in 2 rows:
You need to ensure that you have layout: horizontal in your card
it works with no buttons, 1 button or both of the buttons:
it will auto adjust the widths so that everything fits neatly on any screen size. (even in a grid, but i wouldnt recommend having the buttons enabled as there is limited space in a grid).
it also auto adjusts the text color/button icon color, so that it doesnt blend into the slider itself. (still will blend in with the slider background sometimes, but best i can do!).
i have tested this with many screen sizes and it seems to work consistently
(which i am actually really proud of, i have worked on this one for a while to reduce the amount of “magic numbers”).
Light mode:
Code slider with text in 1 row option
type: custom:mushroom-light-card
entity: light.bedroom_chest_lamp
name: Standing Light
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
layout: horizontal
collapsible_controls: true
use_light_color: true
card_mod:
style:
mushroom-state-info$:
.container: |
.primary {
flex-shrink: 1;
flex-grow: 1;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
--primary-text-color: #1a1a1a;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
--primary-text-color: #1a1a1a;
{% else %}
--primary-text-color: #fafafa;
{% endif %}
{% endif %}
}
.secondary {
flex-shrink: 1;
flex-grow: 0;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
--secondary-text-color: #3b3b3b;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
--secondary-text-color: #3b3b3b;
{% else %}
--secondary-text-color: #c9c9c9;
{% endif %}
{% endif %}
}
.: |
.container {
display: flex;
{% if states(config.entity) == 'on' %}
z-index: 1;
flex-direction: row !important;
align-items: baseline;
pointer-events: none !important;
margin-left: 10px;
margin-right: -8px;
{% else %}
{% endif %}
}
mushroom-button:nth-child(2)$: |
:host {
z-index: 1;
margin-right: 5px !important;
{% if state_attr(config.entity, 'rgb_color') == none %}
--bg-color: rgba(var(--rgb-disabled),0.5) !important;
--icon-color: #1a1a1a !important;
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: #1a1a1a !important;
{% else %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: #dedede !important;
{% endif %}
{% endif %}
}
mushroom-button:nth-child(3)$: |
:host {
z-index: 1;
{% if state_attr(config.entity, 'rgb_color') == none %}
--bg-color: rgba(var(--rgb-disabled),0.5) !important;
--icon-color: #1a1a1a !important;
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: #1a1a1a !important;
{% else %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: #dedede !important;
{% endif %}
{% endif %}
}
mushroom-light-brightness-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
width: calc(100% - 80px);
left: 68px;
top: 18.2%
}
mushroom-light-color-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
width: calc(100% - 80px);
left: 68px;
top: 18.2%
}
mushroom-light-color-temp-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
width: calc(100% - 80px);
left: 68px;
top: 18.2%
}
.: |
.actions {
display: flex;
flex-basis: min-content;
align-items: flex-end !important;
justify-content: flex-end !important;
flex-grow: 0;
flex-shrink: 0;
}
mushroom-state-info {
display: flex;
}
Code slider with text in 2 rows option
type: custom:mushroom-light-card
entity: light.bedroom_chest_lamp
name: Standing Light
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
layout: horizontal
collapsible_controls: true
use_light_color: true
card_mod:
style:
mushroom-state-info$:
.container: |
.primary {
flex-shrink: 1;
flex-grow: 1;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
--primary-text-color: #1a1a1a;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
--primary-text-color: #1a1a1a;
{% else %}
--primary-text-color: #fafafa;
{% endif %}
{% endif %}
}
.secondary {
flex-shrink: 1;
flex-grow: 0;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
--secondary-text-color: #3b3b3b;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
--secondary-text-color: #3b3b3b;
{% else %}
--secondary-text-color: #c9c9c9;
{% endif %}
{% endif %}
}
.: |
.container {
display: flex;
{% if states(config.entity) == 'on' %}
z-index: 1;
align-items: baseline;
pointer-events: none !important;
margin-left: 10px;
margin-right: -8px;
{% else %}
{% endif %}
}
mushroom-button:nth-child(2)$: |
:host {
z-index: 1;
margin-right: 5px !important;
{% if state_attr(config.entity, 'rgb_color') == none %}
--bg-color: rgba(var(--rgb-disabled),0.5) !important;
--icon-color: #1a1a1a !important;
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: #1a1a1a !important;
{% else %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: #dedede !important;
{% endif %}
{% endif %}
}
mushroom-button:nth-child(3)$: |
:host {
z-index: 1;
{% if state_attr(config.entity, 'rgb_color') == none %}
--bg-color: rgba(var(--rgb-disabled),0.5) !important;
--icon-color: #1a1a1a !important;
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: #1a1a1a !important;
{% else %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: #dedede !important;
{% endif %}
{% endif %}
}
mushroom-light-brightness-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
width: calc(100% - 80px);
left: 68px;
top: 18.2%
}
mushroom-light-color-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
width: calc(100% - 80px);
left: 68px;
top: 18.2%
}
mushroom-light-color-temp-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
width: calc(100% - 80px);
left: 68px;
top: 18.2%
}
.: |
.actions {
display: flex;
flex-basis: min-content;
align-items: flex-end !important;
justify-content: flex-end !important;
flex-grow: 0;
flex-shrink: 0;
}
mushroom-state-info {
display: flex;
}
26 Likes
Nice!! Thank you!
I really like this! I had been playing around with expanding the slider and reducing the device name to solve for the wasted space, but using shorter names wasn’t always viable. I tweaked your code a bit to preserve the accessibilty of the slider on the end and make the text a little easier to read when brightness is reduced.
card_mod:
style:
mushroom-state-info$:
.container: |
.primary {
flex-shrink: 1;
flex-grow: 1;
padding-left: 5px;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
--primary-text-color: #1a1a1a;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
--primary-text-color: #1a1a1a;
{% else %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 1}};
--primary-text-color: #fafafa;
{% endif %}
{% endif %}
}
.secondary {
flex-shrink: 1;
flex-grow: 0;
margin-right: 10px;
padding: 0 5px;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
--secondary-text-color: #1a1a1a;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
--secondary-text-color: #1a1a1a;
{% else %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}};
--secondary-text-color: #fafafa;
{% endif %}
{% endif %}
}
.: |
.container {
display: flex;
{% if states(config.entity) == 'on' %}
z-index: 1;
flex-direction: row !important;
align-items: baseline;
pointer-events: none !important;
margin-left: 10px;
margin-right: -8px;
{% else %}
{% endif %}
}
mushroom-button:nth-child(2)$: |
:host {
z-index: 1;
# margin-right: 5px !important;
{% if state_attr(config.entity, 'rgb_color') == none %}
--bg-color: rgba(var(--rgb-disabled),0.5) !important;
--icon-color: #1a1a1a !important;
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: rgba{{state_attr(config.entity,'rgb_color')[0], state_attr(config.entity,'rgb_color')[1], state_attr(config.entity,'rgb_color')[2], 0.9}} !important;
{% else %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
# --icon-color: #dedede !important;
{% endif %}
{% endif %}
}
mushroom-button:nth-child(3)$: |
:host {
z-index: 1;
{% if state_attr(config.entity, 'rgb_color') == none %}
--bg-color: rgba(var(--rgb-disabled),0.5) !important;
--icon-color: #1a1a1a !important;
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: rgba{{state_attr(config.entity,'rgb_color')[0], state_attr(config.entity,'rgb_color')[1], state_attr(config.entity,'rgb_color')[2], 0.9}} !important;
{% else %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: #dedede !important;
{% endif %}
{% endif %}
}
mushroom-light-brightness-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% if (config.show_color_control == true and config.show_color_temp_control == true) %}
width: calc(100% - 190px);
{% elif (config.show_color_control == false and config.show_color_temp_control == true) %}
width: calc(100% - 136px);
{% elif (config.show_color_control == true and config.show_color_temp_control == false) %}
width: calc(100% - 136px);
{% else %}
width: calc(100% - 80px);
{% endif %}
left: 68px;
top: 18.2%;
}
.slider-track-background {
background-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.75, state_attr(config.entity,'rgb_color')[1] * 0.75, state_attr(config.entity,'rgb_color')[2] * 0.75, 0.5}} !important;
}
mushroom-light-color-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% if (config.show_color_temp_control == true) %}
width: calc(100% - 190px);
{% else %}
width: calc(100% - 136px);
{% endif %}
left: 68px;
top: 18.2%
}
mushroom-light-color-temp-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% if (config.show_color_control == true) %}
width: calc(100% - 190px);
{% else %}
width: calc(100% - 136px);
{% endif %}
left: 68px;
top: 18.2%
}
.: |
.actions {
display: flex;
flex-basis: min-content;
align-items: flex-end !important;
justify-content: flex-end !important;
flex-grow: 0;
flex-shrink: 0;
}
mushroom-state-info {
display: flex;
}
Edit: For some reason, lights without RGB or tunable white would not show correctly. I made an adjustment to the CSS in order to address this. There’s probably a “better” way to align the brightness percentage text using flexbox, but this works well enough:
card_mod:
style:
mushroom-state-info$:
.container: |
.primary {
{% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
flex-shrink: 0;
flex-grow: 0;
{% else %}
flex-shrink: 1;
flex-grow: 1;
{% endif %}
padding-left: 5px;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
text-shadow: 0px 0px 7px orange;
--primary-text-color: #1a1a1a;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
--primary-text-color: #1a1a1a;
{% else %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 1}};
--primary-text-color: #fafafa;
{% endif %}
{% endif %}
}
.secondary {
{% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
{% if states(config.entity) == 'on' %}
position: absolute;
right: 15px;
top: 23px;
{% else %}
{% endif %}
{% else %}
flex-shrink: 1;
{% endif %}
flex-grow: 0;
margin-right: 10px;
padding: 0 5px;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
text-shadow: 0px 0px 7px orange;
--secondary-text-color: #1a1a1a;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
--secondary-text-color: #1a1a1a;
{% else %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}};
--secondary-text-color: #fafafa;
{% endif %}
{% endif %}
}
.: |
.container {
display: flex;
{% if states(config.entity) == 'on' %}
z-index: 1;
flex-direction: row !important;
align-items: baseline;
pointer-events: none !important;
margin-left: 10px;
margin-right: -8px;
{% else %}
{% endif %}
}
mushroom-light-brightness-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% set rgb = (state_attr(config.entity, 'supported_color_modes')|contains('rgb') or state_attr(config.entity, 'supported_color_modes')|contains('xy')) and config.show_color_control != false %}
{% set color_temp = state_attr(config.entity, 'supported_color_modes')|contains('color_temp') and config.show_color_temp_control != false %}
{% if (rgb == true and color_temp == true) %}
width: calc(100% - 190px);
{% elif (rgb == false and color_temp == true) %}
width: calc(100% - 136px);
{% elif (rgb == true and color_temp == false) %}
width: calc(100% - 136px);
{% else %}
width: calc(100% - 80px);
{% endif %}
left: 68px;
top: 18.2%;
}
.slider-track-background {
background-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.75, state_attr(config.entity,'rgb_color')[1] * 0.75, state_attr(config.entity,'rgb_color')[2] * 0.75, 0.5}} !important;
}
mushroom-light-color-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% if (state_attr(config.entity, 'supported_color_modes')|contains('color_temp') == true and config.show_color_temp_control != false) %}
width: calc(100% - 190px);
{% else %}
width: calc(100% - 136px);
{% endif %}
left: 68px;
top: 18.2%
}
mushroom-light-color-temp-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% if ((state_attr(config.entity, 'supported_color_modes')|contains('rgb') or state_attr(config.entity, 'supported_color_modes')|contains('xy') == true) and config.show_color_control != false) %}
width: calc(100% - 190px);
{% else %}
width: calc(100% - 136px);
{% endif %}
left: 68px;
top: 18.2%
}
.: |
.actions {
display: flex;
flex-basis: min-content;
align-items: flex-end !important;
justify-content: flex-end !important;
{% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
flex-grow: 9;
flex-shrink: 1;
{% else %}
flex-grow: 0;
flex-shrink: 0;
{% endif %}
}
mushroom-state-info {
display: flex;
}
11 Likes
Can I ask: How did you set up which batteries will be shown?
Nice. I really appreciate this as a layout.
A few minor comments I am going to try and fix.
-
I think the width should be governed by state_attr(config.entity.‘supported_color_modes’) and not whether you say to show/hide controls (that you cannot have maybe). I would be surprised if people do not want to display some control if it is available but then again for generic implementation probably needs both like if light supports HS and you choose to show that control, then …
-
IMHO … the color of the “buttons” for temp, hs should not have anything to do with the color of the light (greatly simplifying this). The color of the state on the left is already there as well as the bar, the others are buttons and really should not take on characteristics of the rgb_color.
2 Likes
I’m actually using this with decluttering-card and wanted the option to disable the controls for a couple of lights that erroneously report RGB support despite being temperature/brightness only, but I agree that this is a super specific use case not generally applicable to most people. My non-decluttered (“cluttered”? lol!) version looks like this:
type: custom:mushroom-light-card
entity: light.craft_room_wall_sconce
name: Wall Sconce
icon: mdi:wall-sconce
show_brightness_control: true
show_color_control: >-
{{ state_attr(config.entity, 'supported_color_modes')|contains('rgb') or
state_attr(config.entity, 'supported_color_modes')|contains('xy') }}
show_color_temp_control: >-
{{ state_attr(config.entity, 'supported_color_modes')|contains('color_temp')
}}
use_light_color: true
collapsible_controls: true
fill_container: true
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
layout: horizontal
card_mod:
style:
mushroom-state-info$:
.container: |
.primary {
flex-shrink: 1;
flex-grow: 1;
padding-left: 5px;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
--primary-text-color: #1a1a1a;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
--primary-text-color: #1a1a1a;
{% else %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 1}};
--primary-text-color: #fafafa;
{% endif %}
{% endif %}
}
.secondary {
flex-shrink: 1;
flex-grow: 0;
margin-right: 10px;
padding: 0 5px;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
--secondary-text-color: #1a1a1a;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
--secondary-text-color: #1a1a1a;
{% else %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}};
--secondary-text-color: #fafafa;
{% endif %}
{% endif %}
}
.: |
.container {
display: flex;
{% if states(config.entity) == 'on' %}
z-index: 1;
flex-direction: row !important;
align-items: baseline;
pointer-events: none !important;
margin-left: 10px;
margin-right: -8px;
{% else %}
{% endif %}
}
mushroom-button:nth-child(2)$: |
:host {
{% if state_attr(config.entity, 'rgb_color') == none %}
--bg-color: rgba(var(--rgb-disabled),0.5) !important;
--icon-color: #1a1a1a !important;
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: rgba{{state_attr(config.entity,'rgb_color')[0], state_attr(config.entity,'rgb_color')[1], state_attr(config.entity,'rgb_color')[2], 0.9}} !important;
{% else %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
# --icon-color: #dedede !important;
{% endif %}
{% endif %}
}
mushroom-button:nth-child(3)$: |
:host {
{% if state_attr(config.entity, 'rgb_color') == none %}
--bg-color: rgba(var(--rgb-disabled),0.5) !important;
--icon-color: #1a1a1a !important;
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: rgba{{state_attr(config.entity,'rgb_color')[0], state_attr(config.entity,'rgb_color')[1], state_attr(config.entity,'rgb_color')[2], 0.9}} !important;
{% else %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: #dedede !important;
{% endif %}
{% endif %}
}
mushroom-light-brightness-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% set rgb = (config.show_color_control != false) %}
{% set color_temp = (config.show_color_temp_control != false) %}
{% if (rgb == true and color_temp == true) %}
width: calc(100% - 190px);
{% elif (rgb == false and color_temp == true) %}
width: calc(100% - 136px);
{% elif (rgb == true and color_temp == false) %}
width: calc(100% - 136px);
{% else %}
width: calc(100% - 80px);
{% endif %}
left: 68px;
top: 18.2%;
}
.slider-track-background {
background-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.75, state_attr(config.entity,'rgb_color')[1] * 0.75, state_attr(config.entity,'rgb_color')[2] * 0.75, 0.5}} !important;
}
mushroom-light-color-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% if (config.show_color_temp_control != false) %}
width: calc(100% - 190px);
{% else %}
width: calc(100% - 136px);
{% endif %}
left: 68px;
top: 18.2%
}
mushroom-light-color-temp-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% if (config.show_color_control != false) %}
width: calc(100% - 190px);
{% else %}
width: calc(100% - 136px);
{% endif %}
left: 68px;
top: 18.2%
}
.: |
.actions {
display: flex;
flex-basis: min-content;
align-items: flex-end !important;
justify-content: flex-end !important;
flex-grow: 0;
flex-shrink: 0;
}
mushroom-state-info {
display: flex;
}
If you want the righthand buttons to follow the default color scheme rather than the RGB of the light, you could remove the mushroom-button:nth-child(2)$ and mushroom-button:nth-child(3)$ sections. I’ve tried both ways and I’m on the fence about which I prefer, but I see the appeal!
3 Likes
I like it. I also use decluttering (in fact this entire thing is 7 decluttering cards). These actually include other decluttering cards for mushroom-light, mushroom-chip for quick colors and currently custom button until I change them to mushroom for the 8 modes built-in plus speed control of the modes. SO easy to manage this way, decluttering is the best!
Going to make the modification now to extend the slider bar for the RGBW lights.
1 Like
Sorry, was viewing the wrong group when I composed - previous issue was resolved with some hacking about at the css.
1 Like
Here’s what I’ve managed to create from Rhys cards and the guide from Dimitri to replace my ui minimalist layout:
Dark:
Light:
Room Card: Room card with card mod (no UI minimalist) - Pastebin.com
card mod changes to Rhys top bar:
card_mod:
style: |
ha-card {
/* Set padding of card */
padding: 8px 8px 12px;
/* Move card up to match header card */
margin-top: -8px;
/* Styling of card background */
background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color)) !important;
border-radius: var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px) 0px 0px ;
transition: all 0s;
}
/* Make card sticky at top of page */
:host {
position: sticky;
z-index: 9;
top: 0px;
}
I’ve only just started rooms, but will be using the light control from Tyler, which will work great in rooms that have two ceiling lights:
Light control: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #7498 by Numotiv
19 Likes