Yeah, I merged a change to similar coloring of the buttons as the HA native thermostat. Unfortunately overriding those with custom CSS becomes more difficult as there is now a class for each state. Using !important on the value should suffice to set them all blue.
1 Like
Hi, anyone used this property?
-
toggle_entitystring : An entity id to create a toggle in the header for. This gives the option to control a separate entity which can be related to the thermostat entity (like a switch, or input_boolean)
I wanted to use this with an input boolean…but nothing is showing
The goal was to replace the operation line with a simple boolean switch on the top right to gain some space.
Anyway if you have another idea how I could do that…
@nervetattoo: Thanks very much. Works like a charm. 
@Sergio_pt: Here is the complete card (with corrections “!important” as suggested by nervetattoo).
Quiet long but when you are interessted:
###################################################################################################################
###################################################################################################################
# office ##########################################################################################################
###################################################################################################################
###################################################################################################################
###################################################################################################################
#--------#
# 1 init #
#--------#
###################################################################################################################
title: office
panel: true
background: center / cover no-repeat url("/local/background/white_03.jpg") fixed
icon: mdi:desk
cards:
- type: custom:layout-card
# min_width: 20%
# max_columns: 5
cards:
###################################################################################################################
#------------#
# 2 entities #
#------------#
###################################################################################################################
- type: entities
title: ÜBERSICHT
show_header_toggle: false
entities:
- type: section
label: LICHT
- entity: light.bu_licht_dimmer
secondary_info: last-changed
toggle: true
type: 'custom:slider-entity-row'
name: Deckenlicht
- entity: sensor.bu_deckenlicht_power
name: []
- type: section
label: SICHERHEIT
- entity: binary_sensor.bu_fenster
secondary_info: last-changed
name: Fenster
- entity: binary_sensor.bu_rauchwarnmelder
secondary_info: last-changed
name: Rauchwarnmelder
style: |
ha-card {
background-image: url("/local/rooms/room_buero_V003.png");
background-position: 0% 70%;
background-repeat: no-repeat;
background-size: 100% auto;
border-radius: 15px;
background-color: rgba(220,220,220,0.5);
box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.50);
font-weight: bold;
}
###################################################################################################################
#--------------#
# 3 thermostat #
#--------------#
###################################################################################################################
#------------------------------------------------------------------------------------------------------------------
# 3.1 main part #
#---------------#
- type: entities
title: THERMOSTAT
show_header_toggle: false
style:
.: |
ha-card {
border-radius: 15px;
background-color: rgba(220,220,220,0.5);
box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.50);
font-weight: bold;
}
"#states div":
mini-graph-card:
$: |
ha-card {
padding: 0px;
}
entities:
- type: section
- type: 'custom:simple-thermostat' # card type
entity: climate.generic_thermostat_office # used climate entity
name: false # card title or false
icon: false # icon details or false
# heating: mdi:fire # defines icon for heating beside card title. Alternative - mdi:radiator
# idle: mdi:fire # defines icon for heating beside card title. Alternative - mdi:radiator-disabled
# 'off': mdi:power # defines icon for heating beside card title. Alternative - mdi:radiator-off
fallback: 'AUS' # defines what is shown if no temperature is available
decimals: 1 # defines number of shown decimals
step_size: 0.5 # defines step size of the thermostat
step_layout: column # defines layout
label:
temperature: Temperatur # defines used label for temperature
state: Status # defines used label for state
hide:
temperature: true # defines if temperature should be shown
state: true # defines if temperature should be shown
control:
_headings: false # defines if actionname is written besides the hvac modes
_names: true # defines if button has a name
_icons: true # defines if buttons have an icon
hvac:
heat:
name: 'An' # defines label of mode heat
icon: mdi:radiator # defines icon of mode heat
'off':
name: 'Aus' # defines label of mode off
icon: mdi:radiator-off # defines icon of mode off
sensors:
- entity: sensor.homematic_ip_temperature_current_temperatur_office
name: Temperatur
icon: mdi:home-thermometer-outline
- entity: sensor.bu_wandthermostat_humidity
name: Luftfeuchtigkeit
icon: mdi:water-percent
- entity: sensor.bu_heizkorperthermostat_heating
name: Heizleistung
icon: mdi:radiator
style: |
ha-card {
border-radius: 15px;
background-color: rgba(000,000,000,0.0);
box-shadow: 1px 1px 2px 0px rgba(000,000,000,0.0);
font-weight: bold;
--st-font-size-sensors: 21px;
--st-spacing: 2px;
}
ha-card .mode-item {
border-radius: 8px;
background: rgba(200,200,200,0.5) !important;
}
ha-card .mode-item.active {
border-radius: 8px;
background: rgba(002,136,209,1.0) !important;
}
ha-card .mode-item:hover {
border-radius: 8px;
background: rgba(150,150,150,0.5) !important;
}
- type: custom:mini-graph-card
hours_to_show: 48
points_per_hour: 12
animate: false
decimals: 1
height: 200
show:
icon: false
name: false
state: false
fill: true
labels: false
labels_secondary: false
extrema: false
lower_bound: 20
line_width: 1
hour24: true
entities:
- entity: sensor.average_office_temperature
name: Messung
color: rgba(002,136,209,1.0)
show_legend: true
- entity: sensor.homeassistant_temperature_setpoint_office
name: Soll
color: rgba(131,188,092,1.0)
show_legend: true
- entity: sensor.bu_heizkorperthermostat_heating
name: Heizung
color: rgba(050,050,050,1.0)
show_line: false
show_points: false
show_legend: true
y_axis: secondary
style: |
ha-card {
border-radius: 15px;
background-color: rgba(220,220,220,0.7);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
border: solid 2px rgba(200,200,200,1.0);
}
- type: custom:hui-horizontal-stack-card
cards:
- type: custom:button-card
entity: input_boolean.thermostat_boost_office_short
icon: mdi:fire
size: 25px
color_type: card
styles:
card:
- height: 46px
name:
- font-size: 13px
label:
- font-size: 13px
show_name: false
show_label: true
label: "Boost 10 min"
state:
- value: 'on'
color: rgba(002,136,209,1.0)
- value: 'off'
color: rgba(200,200,200,0.5)
styles:
name:
- color: rgba(120,120,120, 1.0)
style: |
ha-card {
border-radius: 10px;
background-color: rgba(000,000,000,0.0);
box-shadow: 1px 1px 2px 0px rgba(000,000,000,0.0);
font-weight: bold;
}
- type: custom:button-card
entity: input_boolean.thermostat_boost_office_middle
icon: mdi:fire
size: 25px
color_type: card
styles:
card:
- height: 46px
name:
- font-size: 13px
label:
- font-size: 13px
show_name: false
show_label: true
label: "Boost 30 min"
state:
- value: 'on'
color: rgba(002,136,209,1.0)
- value: 'off'
color: rgba(200,200,200,0.5)
styles:
name:
- color: rgba(120,120,120, 1.0)
style: |
ha-card {
border-radius: 10px;
background-color: rgba(000,000,000,0.0);
box-shadow: 1px 1px 2px 0px rgba(000,000,000,0.0);
font-weight: bold;
}
- type: custom:button-card
entity: input_boolean.thermostat_boost_office_long
icon: mdi:fire
size: 25px
color_type: card
styles:
card:
- height: 46px
name:
- font-size: 13px
label:
- font-size: 13px
show_name: false
show_label: true
label: "Boost 60 min"
state:
- value: 'on'
color: rgba(002,136,209,1.0)
- value: 'off'
color: rgba(200,200,200,0.5)
styles:
name:
- color: rgba(120,120,120, 1.0)
style: |
ha-card {
border-radius: 10px;
background-color: rgba(000,000,000,0.0);
box-shadow: 1px 1px 2px 0px rgba(000,000,000,0.0);
font-weight: bold;
}
- type: custom:button-card
entity: input_boolean.thermostat_boost_office_stop
icon: mdi:hand-left
size: 25px
color_type: card
styles:
card:
- height: 46px
name:
- font-size: 13px
label:
- font-size: 13px
show_name: false
show_label: true
label: "Boost Stop"
state:
- value: 'on'
color: rgba(002,136,209,1.0)
- value: 'off'
color: rgba(200,200,200,0.5)
styles:
name:
- color: rgba(120,120,120, 1.0)
style: |
ha-card {
border-radius: 10px;
background-color: rgba(000,000,000,0.0);
box-shadow: 1px 1px 2px 0px rgba(000,000,000,0.0);
font-weight: bold;
}
- type: custom:button-card
color_type: card
styles:
card:
- height: 23px
label:
- font-size: 13px
show_name: false
show_label: true
label: >
[[[ if (states['counter.thermostat_boost_office'].state > 0) return "Boost noch aktiv für " + states['counter.thermostat_boost_office'].state + " min"; else return "Boost inaktiv" ]]]
color: rgba(002,136,209,1.0)
style: |
ha-card {
border-radius: 10px;
background-color: rgba(000,000,000,0.0);
box-shadow: 1px 1px 2px 0px rgba(000,000,000,0.0);
font-weight: bold;
}
#------------------------------------------------------------------------------------------------------------------
# 3.2 humidity #
#--------------#
- type: custom:fold-entity-row
head:
type: section
label: Luftfeuchte
items:
- entity: input_number.homematic_ip_humiditylimit_office_upper
type: custom:slider-entity-row
toggle: false
hide_state: false
name: Max
style: |
:host {
--paper-item-icon-color:
{% if states('sensor.bu_wandthermostat_humidity')|float > states('input_number.homematic_ip_humiditylimit_office_upper')|float + states('input_number.homematic_ip_humiditylimit_office_escalation')|float %}
red
{% elif states('sensor.bu_wandthermostat_humidity')|float > states('input_number.homematic_ip_humiditylimit_office_upper')|float %}
orange
{% else %}
var( ---state-icon-color )
{% endif %}
;
}
- entity: input_number.homematic_ip_humiditylimit_office_lower
type: custom:slider-entity-row
toggle: false
hide_state: false
name: Min
style: |
:host {
--paper-item-icon-color:
{% if states('sensor.bu_wandthermostat_humidity')|float < ( states('input_number.homematic_ip_humiditylimit_office_lower')|float - states('input_number.homematic_ip_humiditylimit_office_escalation')|float ) %}
red
{% elif states('sensor.bu_wandthermostat_humidity')|float < states('input_number.homematic_ip_humiditylimit_office_lower')|float %}
orange
{% else %}
var( ---state-icon-color )
{% endif %}
;
}
- entity: input_number.homematic_ip_humiditylimit_office_escalation
type: custom:slider-entity-row
toggle: false
hide_state: false
name: Toleranz
style: |
:host {
--paper-item-icon-color:
{% if states('sensor.bu_wandthermostat_humidity')|float > states('input_number.homematic_ip_humiditylimit_office_upper')|float + states('input_number.homematic_ip_humiditylimit_office_escalation')|float %}
red
{% elif states('sensor.bu_wandthermostat_humidity')|float > states('input_number.homematic_ip_humiditylimit_office_upper')|float %}
orange
{% elif states('sensor.bu_wandthermostat_humidity')|float < ( states('input_number.homematic_ip_humiditylimit_office_lower')|float - states('input_number.homematic_ip_humiditylimit_office_escalation')|float ) %}
red
{% elif states('sensor.bu_wandthermostat_humidity')|float < states('input_number.homematic_ip_humiditylimit_office_lower')|float %}
orange
{% else %}
var( ---state-icon-color )
{% endif %}
;
}
- type: custom:hui-horizontal-stack-card
cards:
- type: history-graph
hours_to_show: 48
entities:
- entity: sensor.bu_wandthermostat_humidity
name: Gemessen
- entity: input_number.homematic_ip_humiditylimit_office_upper
name: Max-Warnung
- entity: input_number.homematic_ip_humiditylimit_office_lower
name: Min-Warnung
style: |
ha-card {
background-color: rgba(000,000,000,0.0);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
#------------------------------------------------------------------------------------------------------------------
# 3.3 extended configuration #
#----------------------------#
- type: custom:fold-entity-row
head:
type: section
label: Erweiterte Einstellungen
items:
- type: section
label: Homematic Thermostat
- type: 'custom:simple-thermostat'
entity: climate.buro
name: false
icon: false
fallback: 'AUS'
decimals: 1
step_size: 0.5
step_layout: row
hide:
temperature: true
state: true
control:
_headings: false
_names: true
_icons: true
hvac:
heat:
name: 'Manuell'
icon: mdi:car-shift-pattern
auto:
name: 'Auto'
icon: mdi:cogs
preset:
'boost':
name: 'Boost'
icon: mdi:fire
'HA Remote':
name: 'HA Remote'
icon: mdi:home-assistant
'Aus (Konstant 14°C)':
name: 'Aus'
icon: mdi:power
'An (Konstant 21,5°C)':
name: 'An'
icon: mdi:thermostat
style: |
ha-card {
border-radius: 15px;
background-color: rgba(000,000,000,0.0);
box-shadow: 1px 1px 2px 0px rgba(000,000,000,0.0);
font-weight: bold;
--st-font-size-sensors: 21px;
--st-spacing: 1px;
}
ha-card .mode-item {
border-radius: 8px;
background: rgba(200,200,200,0.5) !important;
font-size: 13px;
}
ha-card .mode-item.active {
border-radius: 8px;
background: rgba(002,136,209,1.0) !important;
font-size: 13px;
}
ha-card .mode-item:hover {
border-radius: 8px;
background: rgba(150,150,150,0.5) !important;
font-size: 13px;
}
- type: section
label: Thermostat Optimizer
- type: custom:hui-horizontal-stack-card
cards:
- type: custom:button-card
entity: automation.07_2_1_a_thermostat_optimizer_office_increase
icon: mdi:thermometer-plus
size: 25px
color_type: card
styles:
card:
- height: 46px
name:
- font-size: 13px
label:
- font-size: 13px
show_name: false
show_label: true
label: >
[[[ if (entity.state === 'off') return "Opt. Erhöhen: Aus"; else return "Opt. Erhöhen: An" ]]]
state:
- value: 'on'
color: rgba(002,136,209,1.0)
- value: 'off'
color: rgba(200,200,200,0.5)
styles:
name:
- color: rgba(120,120,120, 1.0)
style: |
ha-card {
border-radius: 10px;
background-color: rgba(000,000,000,0.0);
box-shadow: 1px 1px 2px 0px rgba(000,000,000,0.0);
font-weight: bold;
}
- type: custom:button-card
entity: automation.07_2_1_b_thermostat_optimizer_office_decrease
icon: mdi:thermometer-minus
size: 25px
color_type: card
styles:
card:
- height: 46px
name:
- font-size: 13px
label:
- font-size: 13px
show_name: false
show_label: true
label: >
[[[ if (entity.state === 'off') return "Opt. Reduzieren: Aus"; else return "Opt. Reduzieren: An" ]]]
state:
- value: 'on'
color: rgba(002,136,209,1.0)
- value: 'off'
color: rgba(200,200,200,0.5)
style: |
ha-card {
border-radius: 12px;
background-color: rgba(000,000,000,0.0);
box-shadow: 1px 1px 2px 0px rgba(000,000,000,0.0);
font-weight: bold;
}
- type: section
label: Temperaturverlauf
- type: custom:hui-horizontal-stack-card
cards:
- type: history-graph
hours_to_show: 48
entities:
- entity: sensor.bu_wandthermostat_temperature
name: Gemessen
- entity: sensor.average_office_temperature
name: Gemittelt
- entity: sensor.homematic_ip_temperature_setpoint_office
name: Homematic
- entity: sensor.homeassistant_temperature_setpoint_office
name: HomeAssistant
style: |
ha-card {
background-color: rgba(000,000,000,0.0);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
It looks mainly like the first picture and if both menus are expanded as shown in picture 2:
12 Likes
now I also have a question, I only want to show the presets? is that also possible?
So delete the things in green circle?
How can I move the icon form the top left to the top right?
how can I move the order of Modes?
Here is my code for future ones if it helps and a screenshot:
type: 'custom:stack-in-card'
cards:
- type: 'custom:simple-thermostat'
entity: climate.netatmo_salon_casa
decimals: '1'
show_header: true
name: Calefacción
label:
temperature: Temperatura
state: Estado
control:
_names: false
_icons: true
_headings: false
preset:
another_mode: false
away:
name: Away
icon: 'mdi:walk'
Frost Guard:
name: 'Off'
include: true
icon: 'mdi:radiator-off'
boost:
name: Calentón
icon: 'mdi:fire'
Schedule:
name: Programa
icon: 'mdi:calendar'
- type: 'custom:mini-graph-card'
entities:
- entity: sensor.netatmo_salon_casa_current_temperature
name: Temperatura
smoothing: true
show_fill: true
- entity: sensor.netatmo_salon_casa_temperature
name: Objetivo
smoothing: false
show_fill: false
- entity: sensor.netatmo_salon_casa_hvac_action
y_axis: secondary
color: orange
name: Caldera
show_line: false
show_points: false
show_legend: false
aggregate_func: max
smoothing: false
state_map:
- value: idle
label: Reposo
- value: heating
label: Calentando
hours_to_show: 24
points_per_hour: 4
line_width: 2
font_size: 90
animate: true
show:
name: false
icon: false
state: false
icon: 'mdi:fire'
Nice , mind sharing ?
thanks
I don’t have it… I need it 
the temperature control i meant
Hi,
It’s possible to dinamically change the actual temperature given from the climate entity?
I mean, i will create an input select with 4 thermostat, when i select one fo them, i want that the actual temperature will be used from it.
I think when i change it, it’s not changed at the card.
Thanks @nervetattoo for this awesome card.
I’m a complete HA noob but managed to get it working after spending some time learning my dumb IR codes using a Broadlink RMC4 Mini.
I was just wondering if anyone else had experienced this issue when using the up/down arrows, the target temperature displays a 3 digit number (see below). I’ve configured the card to not show any decimal as my AC only supports 1 degree increment
type: 'custom:stack-in-card'
mode: vertical
cards:
- type: 'custom:simple-thermostat'
name: Master A/C
entity: climate.master_ac
icon: 'mdi:air-conditioner'
step_layout: row
step_size: '1'
decimals: '0'
control:
_headings: false
hvac: true
fan: true
show_header: true
- type: entities
entities:
- entity: input_datetime.master_ac_time_on
name: 'ON'
- entity: input_datetime.master_ac_time_off
name: 'OFF'
I faced the same issue.
The problem is “step_size: ‘1’”
You need to update to “step_size: 1” without the ’ around the 1.
Its a problem with the Visual Editor.
1 Like
Hi,
These are the color I see in my instance:
These are the colors I want to have. Any idea how to change it?
Thx
Following what is explained here: https://github.com/nervetattoo/simple-thermostat#css-vars-for-theming, these css entry for those are:
--heat-color: blue;
--cool-color: blue;
--off-color: blue;
Assuming you want all three being blue when selected.
I am using card-mod. So in my thermostat card I have:
style: |
ha-card .mode-item {
border-radius: 8px;
background: rgba(200,200,200,0.5);
color: rgba(120,120,120, 1.0);
--heat-color: red;
--cool-color: blue;
--dry-color: grey;
}
ha-card .mode-item.active {
border-radius: 8px;
background: rgba(002,136,209,1.0);
}
ha-card .mode-item:hover {
border-radius: 8px;
background: rgba(150,150,150,0.5);
}
Which are “my” states and colors.
1 Like
Hi,
Seems my climate is very capable of heating :)) How can I repair the display?
type: 'custom:simple-thermostat'
entity: climate.livingroom_ac
name: Daikin
decimal: '0'
step_size: '1'
hvac_modes:
fan_only: false
dry: false
auto: false
ha-card-border-radius: 10px
icon: '[object Object]'
sensors:
- entity: sensor.immax_temperature
name: Temperatura Living
- entity: sensor.immax_humidity
name: Umiditate living
- entity: sensor.openweathermap_temperature
name: Temperatura afara
hide:
temperature: true
style: |
ha-card {
border-radius: 15px;
}
'--st-spacing': 7px
'--st-font-size-title': 24px
'--st-font-size-xl': 80px
'--iron-icon-fill-color': none
'--iron-icon-stroke-color': '#fff'
'--primary-text-color': '#5294E2'
'--st-spacing': 7px
'--st-font-size-title': 24px
'--st-font-size-xl': 80px
'--iron-icon-fill-color': none
'--iron-icon-stroke-color': '#fff'
'--primary-text-color': '#5294E2'
I want also to hide presets auto/dry/fan_only and to enlarge a bit the card in order to have name of sansor and unit of measure on same row:
states show following
climate.livingroom_ac off hvac_modes: off, auto, heat, cool, dry, fan_only
min_temp: 16
max_temp: 28
target_temp_step: 1
fan_modes: auto, low, medium, high, silent
swing_modes: swing, up, mid, down
current_temperature: null
temperature: 186
fan_mode: low
swing_mode: off
friendly_name: Livingroom AC
supported_features: 41
thank you
1 Like
See my comment above where this was replied 
2 Likes
thank you. skipped that post. can you help me with the other issues? want to hide hvac_modes. only heat and cool needed and unit of temperature to stay on same row.
also i noticed that card doesn’t keep mdi icon settings and drops every time i open the view. Although they are recognised when i open once again, the icon settings are dissapearing and I wanna see what status is climate to not turn in wrong mode.
L.E. got something ok-ish for now
