[solved with the tile card] Smaller thermostat card?

Configuration Frontend
1

Searched, tried but didn’t find what I want.

I have a smart plug with electric heater configured as climate (helper), so far so good.
Using this in the Thermostat card works as expected, so that’s OK as well.

But… the card is too big for my liking!
I found the custom Simple thermostat card but that’s the same somehow.
I also tried it in the new Sections view so that I could resize them, no good either… :grimacing:

image
image1577×579 30.5 KB

Is there another way to have a smaller card with

  • current temp
  • requested temp
  • a way to set the temp
2

You could try the Mushroom climate card.

1 Like
3 

type: custom:mushroom-climate-card
entity: climate.tstat_f8cf07_t6_thermostat
name: Centrale Verwarming
hvac_modes:
  - 'off'
show_temperature_control: true
collapsible_controls: true
icon_type: entity-picture
icon: mdi:fire
fill_container: true
layout: horizontal
card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        .button:nth-child(1) {
          --control-icon-size: 15px;
        }
        .button:nth-child(3) {
          --control-icon-size: 15px;
        }
        .value {
          font-size: 12px;
          color: lime !important;
        } 
        #container {
          height: 20px !important;
          margin-top: 10px !important;
        }
    mushroom-climate-hvac-modes-control$:
      mushroom-button:nth-child(1)$: |
        .button {
        #--card-mod-icon: mdi:test-tube;
        height: 30px !important;
        margin-top: 2px !important;
        }
    mushroom-shape-icon$: |
      .shape {
        --icon-symbol-size: 35px;
        background: none !important;
      }  
    mushroom-badge-icon$: |
      .badge {
        --badge-icon-size: 15px;
        margin-top: 3px;
        background: none !important;
      }
    mushroom-button$: |
      .button {
        --card-mod-icon: mdi:fire;
        height: 30px !important;
        margin-top: 2px !important;
      }
    mushroom-state-info$: |
      .container {
        #--card-primary-color: blue;
        #--card-secondary-color: orange;
      }          
    .: |
      ha-card {     
        height: 40px !important;
        padding-top: 5px !important;
      }

That small enough?
Ya need mushroom cards
And card_mod tho!

Fill in your own thermostat…
It even hides buttons when off etc
Have fun!

2 Likes
4

The core tile card is quite compact. Two tiles in a grid card:

Screenshot 2024-08-07 at 22-52-18 Administration – Home Assistant

1 Like
5

The winner is @tom_l - well it’s more his idea of using the tile card, which is exactly what I was searching for. :star_struck:

To give an idea how it looks (compared to my previous attempts):

image
image1526×634 36.6 KB

Thanks guys! :bowing_man:

1 Like
6

Hey @Nick4, how did you manage, to not only hide the title of the default climate card, but also remove the spacing from it’s title. If I add a name to the card like Heizung, it is like in the screenshot. If I want to remove the title, I could just add a spacing, however the space above the graphic is still occupied. Do you know what I mean?

1000005663
10000056631080×946 112 KB

7

Hi Erik, just put a blank (space) in the field of the name.
It’s that simple. :wink:

2 Likes
8

Interesting, when I tried that with the already created thermostat card, it just removed the name, but not the spacing. After your reply, I created a new card and it worked directly in the live preview…

Thank you!

1 Like