And why do you ask then “how” if you know the anwser and not “how with card-mod”?
type: thermostat
entity: climate.heizung_kellerflurthermostat
card_mod:
style:
.: |
ha-icon-button { display: none !important; }
ha-state-control-climate-temperature:
$: |
.label:nth-of-type(2) { display: none !important; }
sorry for my wrong question type 
and thanks for helping me out
Can I change the idle and heathing in my own language ?
Is it possible to end the card just below the +and - ? So no extra “white” space below ?
So maybe it is possible to put another card below to fit the screen on my mobile
I made a post of this and then saw this Thermostat post, so adding visibility here - What happened to Aux Heat toggle in Thermostat card? - Configuration - Home Assistant Community (home-assistant.io)
Can this setting be brought back in next versions? Heat pumps in colder climates have an aux heat function to bring on additional heat strips or gas furnace when the HP cannot keep up. This setting is now gone from the card.
Who can help me remove the + and - buttons via card-mod?
If I do this they disappear but only on the app.
I always see them in browsers.
type: thermostat
name: cucina
entity: climate.smarther_cucina
card_mod:
style: |
.buttons {
display: none !important;
}
What am I doing wrong?
Thank you!
I found it! If anyone needs it, here it is!
type: thermostat
name: cucina
entity: climate.smarther_cucina
card_mod:
style:
ha-state-control-climate-temperature:
$: |
.buttons { display: none !important; }
Is there anyway to move the name to the bottom? Or, at least, to reduce the font size
Play around with card-mod and this example
type: thermostat
entity: climate.klimaanlage_wohnzimmer
name: Wohnzimmer
card_mod:
style:
.: |
.title {
font-size: 14px !important;
text-align: left !important;
padding-left: 20px !important;
}
Thanks so much. I’ll start playing around with it.
I am using the new Thermostat Card
My problem is that the only Presets I get with the Drop down is None and Hold. My Honeywell Thermostat wants to see none and hold. Is there a way to change this?
Thanks
The frontend translates the options to look nice (changes them to title word case). The states and attribute values in the backend are still actually lowercase and this is what you should use in your card config. You can check by going to Developer Tools → States and looking at the presets available for your climate entity.
OK got it. Thanks
I interpret the blue and red regions as “heat until x” and “cool until y”. So I assume you vabe an AC amd heating combined. I want to achieve exactly the same view, how did you get this? I am on 2024.5.5, but I only get 1 slider for my AC that can both heat and cool.
You need to select Auto Mode to see both.
Bit of a different issue but apparently if you have a thermostat that publishes low and high set points regardless of state (like Crestron thermostats) the component will always show the heat and cool set points, even if the low/high is only used for heat/cool respectively.
If anyone else is having the same issue here is how I solved it:
- type: thermostat
entity: climate.kitchen_thermostat
name: ' '
show_current_as_primary: false
features:
- type: climate-hvac-modes
card_mod:
style:
"ha-state-control-climate-temperature $ ha-control-circular-slider $": |
svg > g > g:nth-child(4) {
{% if is_state('climate.kitchen_thermostat', 'cool') %}
display: none;
{% else %}
display: block;
{% endif %}
}
svg > g > g:nth-child(5) {
{% if is_state('climate.kitchen_thermostat', 'heat') %}
display: none;
{% else %}
display: block;
{% endif %}
}
I hope somebody can help me out. I’m stuck for ages 
Picture for reference:
Question1: Change field 1
I want another sensor’s data to be displayed. I worked out how to do it in field 2, see example code below:
card_mod:
style:
.: |
ha-state-control-climate-temperature:
$: |
.label:nth-of-type(2) {
display: inline-block !important;
visibility: hidden;
text-align: center;
width: 100%;
}
.label:nth-of-type(2):before {
content: "{{ states('sensor.mytemperaturesensor') | round(1) }} °C";
visibility: visible;
display: inline-block;
width: 100%;
text-align: center;
}
I dont know how to adress field 1
Question 2: Change icons of field 3 & 4
The icons in field 3 (fan speed) and field 4 (vane angle) are not picked up. How do i assign icons to this buttons?
I expected something like this, but it doenst work:
card_mod:
style:
hui-card-features $ hui-climate-fan-modes-card-feature $ ha-control-select $: |
div#option-1 ha-svg-icon {
content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='magenta' d='M20 22H4V20C4 17.8 7.6 16 12 16S20 17.8 20 20M8 9H16V10C16 12.2 14.2 14 12 14S8 12.2 8 10M19 4C18.4 4 18 4.4 18 5V6H16.5L15.1 3C15 2.8 14.9 2.6 14.7 2.5C14.2 2 13.4 1.9 12.7 2.2L12 2.4L11.3 2.1C10.6 1.8 9.8 1.9 9.3 2.4C9.1 2.6 9 2.8 8.9 3L7.5 6H6V5C6 4.4 5.6 4 5 4S4 4.4 4 5V6C4 7.1 4.9 8 6 8H18C19.1 8 20 7.1 20 6V5C20 4.5 19.6 4 19 4Z'/%3E%3C/svg%3E");
}
This refers to:
Strange thing is that changing the icon of HVAC modes does work with the above mentioned method
Does it still work for you after the upgrade to 2024.8.1 ?
Add the following parameter to the thermostat YAML to show the current temperature as the primary/larger display
show_current_as_primary: true
hi, from update 2024.11.1 i can’t see the mode icons.
i already cleared the browser cache but still no icons.
any ideas?
