does /config/custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/language.yaml file exist ?
ok, you seem to be missing the language folder for the customer card, grab it here and put the folder in the custom card folder.
donāt just put the yaml files in the custom card folder
Is this integration no longer supported?
No, alive and well, and constantly updated and very active users, this is phenominal for a cell phone:
Also look here:
https://ui-lovelace-minimalist.github.io/UI/
https://ui-lovelace-minimalist.github.io/UI/setup/customizing/#add-multiple-dashboards
Thanks, I just noticed the last update was November 2023 and there is a bug that causes HA to crash. Itās been reported and I believe someone has made a fix but not implemented.
1 Like
Thanks for the heads up. Either I have an older implementation that still works or I do not have mine configured in a way that exposes the issue. Sorry I didnāt see it in this endlessly long thread, can you repeat the details of the issue or reply with a link to the related post/details of the issue?
1 Like
If you have a look at the issues on GitHub it appears a couple of times
That makes sense. Happy I never tried it! As I had learned through the video to set it all up by manually updating the files for the dashboard, and therefore continued that is why I have never run into the problem. Iām not surprised that trying to change it or updated through the UI would cause problems since itās all originally built by hand anywayā¦ There should at least be some kind of warning or disabled button for configuring via the UI I would thinkā¦
Two questions about Vertical Buttonsā¦
- Iād like my Label to display the power consumption of an entity, but it doesnāt seem to be evaluating my expression. Is this doable? And if so, am I missing something?
Hereās my YAML:
- type: "custom:button-card"
template: card_vertical_button
entity: input_boolean.toggle_calamansi_power
name: Calamansi
label: >
{{ states('sensor.sonoff_s31_10_power') }} W
icon: mdi:desktop-tower
show_last_changed: false
and hereās whatās being displayed:
- Iām using a āPingā
binary_sensorto determine if the system is on or not, so Iād like the initial state of the button to reflect the actual state of the machine, not necessarily the state of theinput_booleanthe button is attached to: I was hoping to do something along the lines of:
variables:
ulm_card_vertical_button_state: >
{{ states('binary_sensor.ping_calamansi') }}
but that also doesnāt seem to be working.
Sad if it is not fixed it could be soon removed
Just had an update and I can also download and add custom cards again 
On that note I was wondering if someone could tell me how to add a custom background image?
I updated to the new version and suddenly it is missing lots of cards for instance card_esh_welcome. How can I fix this?
Reading the comment above. The folder custom cards is still filled.
HI all
i have a ui lovelace page for my climate winter/summer environmental . I have two specific cards, one for winter use and other card for summer user . I would like only one of these cards is visible at a time in function of season entity .
I am using visiblity + condition but with lovelace ui minimla dosenāt work for me.
This is my code :
title: "Climate"
icon: mdi:home-thermometer-outline
path: "climate"
type: "custom:layout-card"
layout_type: "custom:grid-layout"
layout:
grid-gap: 2px 2px
grid-template-rows: "auto"
grid-template-columns: "33% 33% 33%"
grid-template-areas: >
"title1 title1 title1"
"title2 title2 title2"
"card_clima_inverno card_clima_generale card_temperature"
"card_clima_estate card_clima_generale card_temperature"
". card_clima_generale card_temperature"
mediaquery:
# Mobile
"(max-width: 800px)":
grid-gap: 2px 2px
grid-template-columns: "50% 50%"
grid-template-rows: auto
grid-template-areas: |
"title1 title3"
"card_clima_inverno card_clima_inverno"
"card_clima_estate card_clima_estate"
"card_clima_generale card_clima_generale"
"card_temperature card_temperature"
################ back button ##############
cards:
- view_layout:
grid-area: "title1"
type: "custom:button-card"
template: chip_back
variables:
ulm_chip_back_path: /ui-lovelace-minimalist/home
################ seconda riga ##############
- view_layout:
grid-area: "title2"
type: "custom:button-card"
template: "card_title"
name: "Climate"
################### Card CLIMA Inverno ########################
- view_layout:
grid-area: "card_clima_inverno"
square: false
type: grid
cards:
- type: entities
entities:
- type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: thermostat
entity: climate.salone
show_current_as_primary: true
features:
- style: icons
type: climate-hvac-modes
hvac_modes:
- auto
- heat
- 'off'
- type: climate-preset-modes
style: dropdown
theme: minimalist-desktop
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: >-
{% set mode = states('climate.splitter_salone', 'hvac_modes')
%}
{% if mode == 'off' %}
mdi:sofa-outline
{% elif mode == 'cool' %}
mdi:fire
{% else %}
mdi:sofa-outline
{% endif %}
entity: input_boolean.splitter_heat_salone
icon_color: >-
{% set status = states('input_boolean.splitter_heat_salone')
%}
{% if status == 'on' %}
blue
{% else %}
grey
{% endif %}
primary: Salone
layout: vertical
fill_container: false
name: Salone
tap_action:
action: more-info
badge_icon: >-
{% set portellone_state =
is_state('binary_sensor.portellone_salone_contact', 'on') %}
{% set balcone_state =
is_state('binary_sensor.balcone_dinner_zone_contact', 'on') %}
{% if not portellone_state and not balcone_state %}
mdi:window-closed-variant
{% else %}
mdi:window-open-variant
{% endif %}
badge_color: >-
{% set portellone_state =
is_state('binary_sensor.portellone_salone_contact', 'on') %}
{%
set balcone_state =
is_state('binary_sensor.balcone_dinner_zone_contact', 'on') %}
{% if not portellone_state and not balcone_state %}
green
{% else %}
red
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 56px !important;
height: 36px !important;
}
.: |
ha-card {
background: none;
box-shadow: none;
}
:host {
--mush-icon-border-radius: 10px;
--mush-icon-size: 50px;
}
- type: custom:mushroom-template-card
icon: >-
{% set mode = states('climate.termostato_bagno', 'hvac_modes')
%}
{% if mode == 'off' %}
mdi:human-female-female
{% elif mode == 'heat' %}
mdi:fire
{% else %}
mdi:human-female-female
{% endif %}
entity: input_boolean.splitter_heat_bagno
icon_color: |-
{% set status = states('input_boolean.splitter_heat_bagno') %}
{% if status == 'on' %}
blue
{% else %}
grey
{% endif %}
primary: Bagno
layout: vertical
fill_container: false
tap_action:
action: more-info
badge_icon: |-
{% if is_state('binary_sensor.bagno_contact', 'on') %}
mdi:window-open-variant
{% else %}
mdi:window-closed-variant
{% endif %}
badge_color: |-
{% if is_state('binary_sensor.bagno_contact', 'off') %}
green
{% else %}
red
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 56px !important;
height: 36px !important;
}
.: |
ha-card {
background: none;
box-shadow: none;
}
:host {
--mush-icon-border-radius: 10px;
--mush-icon-size: 50px;
}
- type: custom:mushroom-template-card
icon: >-
{% set mode = states('climate.splitter_camera_letto',
'hvac_modes') %}
{% if mode == 'off' %}
mdi:bed-king-outline
{% elif mode == 'cool' %}
mdi:fire
{% else %}
mdi:bed-king-outline
{% endif %}
entity: input_boolean.splitter_heat_camera_letto
icon_color: >-
{% set status =
states('input_boolean.splitter_heat_camera_letto') %}
{% if status == 'on' %}
blue
{% else %}
grey
{% endif %}
primary: Camera Letto
layout: vertical
fill_container: false
tap_action:
action: more-info
badge_icon: >-
{% if is_state('binary_sensor.balcone_camera_letto_contact',
'on') %}
mdi:window-open-variant
{% else %}
mdi:window-closed-variant
{% endif %}
badge_color: >-
{% if is_state('binary_sensor.balcone_camera_letto_contact',
'off') %}
green
{% else %}
red
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 56px !important;
height: 36px !important;
}
.: |
ha-card {
background: none;
box-shadow: none;
}
:host {
--mush-icon-border-radius: 10px;
--mush-icon-size: 50px;
}
- type: custom:mushroom-template-card
icon: >-
{% set mode = states('climate.termostato_bagno_camera',
'hvac_modes') %}
{% if mode == 'off' %}
mdi:human-female-female
{% elif mode == 'heat' %}
mdi:fire
{% else %}
mdi:human-female-female
{% endif %}
entity: input_boolean.splitter_heat_bagno_camera
icon_color: >-
{% set status =
states('input_boolean.splitter_heat_bagno_camera') %}
{% if status == 'on' %}
blue
{% else %}
grey
{% endif %}
primary: B.Camera
layout: vertical
fill_container: false
tap_action:
action: more-info
badge_icon: >-
{% if is_state('binary_sensor.finestra_bagno_camera_contact',
'on') %}
mdi:window-open-variant
{% else %}
mdi:window-closed-variant
{% endif %}
badge_color: >-
{% if is_state('binary_sensor.finestra_bagno_camera_contact',
'off') %}
green
{% else %}
red
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 56px !important;
height: 36px !important;
}
.: |
ha-card {
background: none;
box-shadow: none;
}
:host {
--mush-icon-border-radius: 10px;
--mush-icon-size: 50px;
}
- type: custom:mushroom-template-card
icon: >-
{% set mode = states('climate.splitter_cameretta',
'hvac_modes') %}
{% if mode == 'off' %}
mdi:bed-king-outline
{% elif mode == 'cool' %}
mdi:fire
{% else %}
mdi:bed-king-outline
{% endif %}
entity: input_boolean.splitter_heat_cameretta
icon_color: >-
{% set status =
states('input_boolean.splitter_heat_cameretta') %}
{% if status == 'on' %}
blue
{% else %}
grey
{% endif %}
primary: Cameretta
layout: vertical
fill_container: false
tap_action:
action: more-info
badge_icon: >-
{% if is_state('binary_sensor.balcone_cameretta_contact',
'on') %}
mdi:window-open-variant
{% else %}
mdi:window-closed-variant
{% endif %}
badge_color: >-
{% if is_state('binary_sensor.balcone_cameretta_contact',
'off') %}
green
{% else %}
red
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 56px !important;
height: 36px !important;
}
.: |
ha-card {
background: none;
box-shadow: none;
}
:host {
--mush-icon-border-radius: 10px;
--mush-icon-size: 50px;
}
- type: custom:bar-card
show_icon: true
align: split
columns: 1
max: 24
decimal: 1
positions:
icon: inside
indicator: inside
name: inside
value: inside
unit_of_measurement: h
severity:
- color: cyan
from: 0
to: 6
- color: green
from: 6
to: 10
- color: yellow
from: 10
to: 15
- color: orange
from: 15
to: 20
- color: red
from: 20
to: 24
name: Ore Attivo
entity_row: true
entities:
- entity: sensor.time_on_elettrodomestici_3
card_mod:
style: |
ha-card {
--ha-card-border-radius: 0%;
box-shadow: none;
background-color: none;
margin-top: 0rem;
margin-left: 0rem;
margin-right: 0rem;
margin-bottom: 0rem;
}
- type: custom:bar-card
show_icon: true
align: split
columns: 1
max: 5000
positions:
icon: inside
indicator: inside
name: inside
value: inside
unit_of_measurement: W
severity:
- color: '#27b376'
from: 0
to: 600
- color: '#006f3c'
from: 601
to: 1000
- color: '#FFFF00'
from: 1001
to: 1500
- color: '#f9a73e'
from: 1501
to: 2000
- color: '#FF2A00'
from: 2001
to: 3000
- color: '#B11313'
from: 3001
to: 6000
name: Consumo Istantaneo
entity_row: true
entities:
- entity: sensor.potenza_elettrodomestici_w_3
card_mod:
style: |
ha-card {
--ha-card-border-radius: 0%;
box-shadow: none;
background-color: none;
margin-top: 0rem;
margin-left: 0rem;
margin-right: 0rem;
margin-bottom: 0rem;
}
show_header_toggle: false
state_color: true
header:
type: picture
image: local/foto-pkg/immagineheatingcooling.jpg
transparent: 100%
tap_action:
action: none
hold_action:
action: none
columns: 1
visibility:
- condition: or
conditions:
- condition: state
entity: sensor.season
state: winter
- condition: state
entity: sensor.season
state: autumn
- condition: state
entity: input_boolean.cooling_manual_mode
state: 'on'
################### Card CLIMA estate ########################
- view_layout:
grid-area: "card_clima_estate"
square: false
type: entities
entities:
- type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-fan-card
entity: fan.motore_climatizzatore
icon_animation: true
show_percentage_control: false
show_oscillate_control: false
collapsible_controls: false
fill_container: false
name: Climatizzatore Estate
icon: mdi:fan
secondary_info: state
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 81px;
--icon-size: 100px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: |-
{% set mode = states('climate.splitter_salone', 'hvac_modes') %}
{% if mode == 'off' %}
mdi:sofa-outline
{% elif mode == 'cool' %}
mdi:fire
{% else %}
mdi:sofa-outline
{% endif %}
entity: input_boolean.splitter_cool_salone
icon_color: |-
{% set status = states('input_boolean.splitter_cool_salone') %}
{% if status == 'on' %}
blue
{% else %}
grey
{% endif %}
primary: Salone
layout: vertical
fill_container: false
name: Salone
tap_action:
action: more-info
badge_icon: >-
{% set portellone_state =
is_state('binary_sensor.portellone_salone_contact', 'on') %} {%
set balcone_state =
is_state('binary_sensor.balcone_dinner_zone_contact', 'on') %} {%
if not portellone_state and not balcone_state %}
mdi:window-closed-variant
{% else %}
mdi:window-open-variant
{% endif %}
badge_color: |-
{% set portellone_state =
is_state('binary_sensor.portellone_salone_contact', 'on') %} {%
set balcone_state =
is_state('binary_sensor.balcone_dinner_zone_contact', 'on') %}
{% if not portellone_state and not balcone_state %}
green
{% else %}
red
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 106px !important;
height: 36px !important;
}
.: |
ha-card {
background: none;
box-shadow: none;
}
:host {
--mush-icon-border-radius: 10px;
--mush-icon-size: 50px;
}
- type: custom:mushroom-template-card
icon: >-
{% set mode = states('climate.splitter_camera_letto',
'hvac_modes') %}
{% if mode == 'off' %}
mdi:bed-king-outline
{% elif mode == 'cool' %}
mdi:fire
{% else %}
mdi:bed-king-outline
{% endif %}
entity: input_boolean.splitter_cool_camera_letto
icon_color: >-
{% set status = states('input_boolean.splitter_cool_camera_letto')
%}
{% if status == 'on' %}
blue
{% else %}
grey
{% endif %}
primary: C.Letto
layout: vertical
fill_container: false
tap_action:
action: more-info
badge_icon: >-
{% if is_state('binary_sensor.balcone_camera_letto_contact', 'on')
%}
mdi:window-open-variant
{% else %}
mdi:window-closed-variant
{% endif %}
badge_color: >-
{% if is_state('binary_sensor.balcone_camera_letto_contact',
'off') %}
green
{% else %}
red
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 106px !important;
height: 36px !important;
}
.: |
ha-card {
background: var(--card-background);
box-shadow: none;
}
:host {
--mush-icon-border-radius: 10px;
--mush-icon-size: 50px;
}
- type: custom:mushroom-template-card
icon: >-
{% set mode = states('climate.splitter_cameretta', 'hvac_modes')
%}
{% if mode == 'off' %}
mdi:bed-king-outline
{% elif mode == 'cool' %}
mdi:fire
{% else %}
mdi:bed-king-outline
{% endif %}
entity: input_boolean.splitter_cool_camereretta
icon_color: >-
{% set status = states('input_boolean.splitter_cool_camereretta')
%}
{% if status == 'on' %}
blue
{% else %}
grey
{% endif %}
primary: Cameretta
layout: vertical
fill_container: false
tap_action:
action: more-info
badge_icon: |-
{% if is_state('binary_sensor.balcone_cameretta_contact', 'on') %}
mdi:window-open-variant
{% else %}
mdi:window-closed-variant
{% endif %}
badge_color: >-
{% if is_state('binary_sensor.balcone_cameretta_contact', 'off')
%}
green
{% else %}
red
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 106px !important;
height: 36px !important;
}
.: |
ha-card {
background: var(--card-background);
box-shadow: none;
}
:host {
--mush-icon-border-radius: 10px;
--mush-icon-size: 50px;
}
- type: custom:bar-card
show_icon: true
align: split
columns: 1
max: 24
decimal: 1
positions:
icon: inside
indicator: inside
name: inside
value: inside
unit_of_measurement: h
severity:
- color: cyan
from: 0
to: 6
- color: green
from: 6
to: 10
- color: yellow
from: 10
to: 15
- color: orange
from: 15
to: 20
- color: red
from: 20
to: 24
name: Ore Attivo
entity_row: true
entities:
- entity: sensor.time_on_elettrodomestici_3
card_mod:
style: |
ha-card {
--ha-card-border-radius: 0%;
box-shadow: none;
background-color: none;
margin-top: 0rem;
margin-left: 0rem;
margin-right: 0rem;
margin-bottom: 0rem;
}
- type: custom:bar-card
show_icon: true
align: split
columns: 1
max: 5000
positions:
icon: inside
indicator: inside
name: inside
value: inside
unit_of_measurement: W
severity:
- color: '#27b376'
from: 0
to: 600
- color: '#006f3c'
from: 601
to: 1000
- color: '#FFFF00'
from: 1001
to: 1500
- color: '#f9a73e'
from: 1501
to: 2000
- color: '#FF2A00'
from: 2001
to: 3000
- color: '#B11313'
from: 3001
to: 6000
name: Consumo Istantaneo
entity_row: true
entities:
- entity: sensor.potenza_elettrodomestici_w_3
card_mod:
style: |
ha-card {
--ha-card-border-radius: 0%;
box-shadow: none;
background-color: none;
margin-top: 0rem;
margin-left: 0rem;
margin-right: 0rem;
margin-bottom: 0rem;
}
show_header_toggle: false
state_color: true
header:
type: picture
image: local/foto-pkg/immagineheatingcooling.jpg
transparent: 100%
tap_action:
action: none
hold_action:
action: none
visibility:
- condition: or
conditions:
- condition: state
entity: sensor.season
state: summer
- condition: state
entity: sensor.season
state: spring
- condition: state
entity: input_boolean.cooling_manual_mode
state: 'on'
any idea how to solve ?
Regards
Luigi`
Is it possible to set the state of a Vertical Button based on the dynamic value of a binary sensor? Iām wanting to do something like:
- type: "custom:button-card"
template: card_vertical_button
entity: input_button.some_input_button
variables:
ulm_card_vertical_button_state: {{ states('binary_sensor.some_sensor') }}
If this is possible, what is the correct syntax to evaluate the state of the entity for ulm_card_vertical_button_state and pass it to the template?
NOOOOO Frenck rightly so closed that issue and it is NOT being removed (THANK GOD)
Did you figure this out? My theme file also resets after a restart
Hi @darrendavid
Do you have more information on this? What would you like to achieve with it?
For example, I use it to control the icon and its color of vertical button card
If the door is closed, the icon is green. If the door is open, the icon changes and turns red
- type: "custom:button-card"
template: custom_card_vertical_button
entity: binary_sensor.tursensor_balkon_contact
name: BalkontĆ¼r
icon: mdi:door-sliding-open
show_last_changed: true
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.tursensor_balkon_contact', 'off') %}
--card-mod-icon-color: green
{%else%}
--card-mod-icon-color: red
{%endif%}
}
:host {
{% if is_state('binary_sensor.tursensor_balkon_contact', 'off') %}
--card-mod-icon: mdi:door-sliding
{%else%}
--card-mod-icon: mdi:door-sliding-open
{%endif%}
}
Hi guys.
I have a big trouble with my popup.
It doesnt fit the card.
icon: phu:weather-page-alt
icon_color: brown
primary: Meteo
secondary: ''
layout: vertical
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: METEO e TEMPERATURE
content:
type: vertical-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:weather-card
entity: weather.forecast_casa
- type: custom:mushroom-template-card
primary: Salotto
secondary: >-
š”{{ states('sensor.temperatura_salotto') }} | š§{{
states('sensor.sala_umidita') }}
icon: null
card_mod:
style: |
ha-card {
z-index: 1;
--ha-card-border-width: 0;
}
- type: custom:hourly-weather
entity: weather.forecast_casa
num_segments: 12
name: Next 12 hours
- type: custom:mini-graph-card
entities:
- entity: sensor.temperatura_salotto
name: Temperature
color: '#ff33ff'
- entity: sensor.sala_temperatura
name: Humidity
color: '#f2bdf2'
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: true
fill: fade
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Camera da Letto
secondary: >-
š”{{ states('sensor.purificatore_temperature') }} | š§{{
states('sensor.purificatore_humidity') }}
icon: null
card_mod:
style: |
ha-card {
z-index: 1;
--ha-card-border-width: 0;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.purificatore_temperature
name: Temperature
color: '#298a20'
- entity: sensor.purificatore_humidity
name: Humidity
color: '#d3f043'
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: true
fill: fade
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Esterno
secondary: >-
š”{{ states('sensor.esterno_temperatura') }} | š§{{
states('sensor.esterno_umidita') }}
icon: null
card_mod:
style: |
ha-card {
z-index: 1;
--ha-card-border-width: 0;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.esterno_temperatura
name: Temperature
color: '#61c5ff'
- entity: sensor.esterno_umidita
name: Humidity
color: '#e7ff61'
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: true
fill: fade
card_mod:
style:
mushroom-shape-icon$: >
ha-icon:before {
content: "";
position: absolute;
width: 40%;
height: 30%;
margin: 6%;
animation: refresh 300ms linear infinite;
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(var(--rgb-{{
config.icon_color }}), 0.2) 0%, transparent 50%,
transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 25%, transparent 100%); }
50% { background: linear-gradient(180deg, transparent 0%,
rgba(var(--rgb-{{ config.icon_color }}), 0.2) 50%,
transparent 100%); }
75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 75%, transparent 100%); }
100% { background: linear-gradient(180deg, transparent 0%,
transparent 50%, rgba(var(--rgb-{{ config.icon_color }}),
0.2) 100%); }
}
entity: weather.forecast_casa