Increase size of "grab" circle in climate card in lovelace UI

Hi all,

I have a thermostat card displaying climate controls in a pi3 touchscreen: https://www.home-assistant.io/lovelace/thermostat/

I like the resolution where it’s at currently (1024x768) but the grab circle to change my set point is hard to grab with a finger, nor is it the greatest touch screen in the world.

Can I increase it’s usable size?

1 Like

Following the Lovelace docs I did the following:

Created this file:

pi@hassbian:/home/homeassistant/.homeassistant $ cat custom-lovelace-pi.css
.rs-handle.rs-move {
    height: 40px;
    width: 50px;
    margin: -7.5px 0px 0px -15px;
}

My “info” pannel shows “/home/homeassistant.homeassistant” as the dir.

So in ui-lovelace.yml I have:

views:
  - title: default_view
    icon: mdi:home
    cards:
      - type: thermostat
        entity: climate.portable_climate
        panel: true
      - type: entities
        title: Sun
        entities:
          #- script.make_coffee
          - sun.sun
      - type: entity-button
        entity: script.make_test
        #replace _test with _coffee for real
        icon: mdi:coffee
        name: Coffee Maker
        tap_action: toggle
        hold_action: more-info
    resources:
      - url: /custom-lovelace-pi.css
        type: css

But the custom css doesn’t seem to be loading. The same css pasted into developer tools during a live inspection results in what I want.

Not sure what I’m doing wrong.

Ahh THink I got it to anyone trying this with hassbian:

Per https://www.home-assistant.io/blog/2016/04/07/static-website/

anything in your .homeassistant in the www dir as linux sees it is served as *:8132/local.

So the dir “www” needs to exist in whatever the information panel spits out is the config dir. In my case, that dir didn’t even exist. I made it, put a test html file in there. Restarted hass and I can hit the html file directly.

Just doesn’t seem to want to even attempt to load it for me.

I can hit my custom css with: http://192.168.0.14:8123/local/custom-lovelace-pi.css and get a simplified css selector for testing:

.rs-handle {
    width: 40px !important;
}

So we know the file is valid and can be served. so in ui-lovelace.yml I have:

views:
  - title: default_view
    resources:
      - url: /local/custom-lovelace-pi.css
        type: css
    icon: mdi:home
    cards:
      - type: thermostat

I see no attempt to load it, no error and no desired CSS changes.

Edit:

I’m now loading it by moving

resources:
      - url: /custom-lovelace-pi.css
        type: css

… outside of “views:” and see the relevant results in chrome dev tools and it’s being picked up as a stylesheet. The selector still doesn’t apply however.