Tile card with card mod

Configuration Frontend
1

Hi
I am trying to change the font-size on the new tile card but i cant get it to work. i can change background and font family but font-size it will not. anyone have a solution?

  - type: tile
    entity: light.kokkenbordet
    features:
      - type: light-brightness
    tap_action:
      action: toggle   
    show_entity_picture: true
    card_mod:
      style:
        .: |
          ha-card {
            font-family: arial;
            font-size: 20px;
          }
2

Hi,

i have the same problem. I´ve tried…

- type: tile
        entity: sensor.raspberrymatic_sv_restmuell_tage
        color: black
        show_entity_picture: false
        name: ' '
        card_mod:
          style:
            ha-tile-info$: |
              .secondary {
                font-size: 20px;
              }

, but nothing.
It seems that font-size doesn´t work in this context. For eample font-style works.

I need help, Thanks.

3

Try this…

- type: tile
  entity: sensor.raspberrymatic_sv_restmuell_tage
  color: black
  style:
    ha-tile-info$: |
      .secondary {
        font-size: 20px !important;
      }
2 Likes
4

No idea if it worked for them but that was a big enough hint to get my problem solved. Thanks!

card_mod:
  style:
    ha-tile-info$: |
      .primary {
        color: var(--entity-warning-color) !important;
      }
5

I can’t get any of these approaches to work. :disappointed_relieved:

6

–PLEASE HELP–
I’ve been trying to make the slider thinner on a simple Tile card.
I found out with browser inspector that I can change it here:

ha-control-slider {
--control-slider-thickness: 40px;
}

I just cant figure out how to make it work with card_mod.
the above code do not work for me.

type: tile
entity: light.kontor
vertical: false
color: primary
features:
  - type: light-brightness
card_mod:
  style: |
      ??????

from inspection:

control-slider-thickness
control-slider-thickness1920Ă—1177 165 KB

7

@chrs This will solve your issue if you didn’t get it yet.

image
image742Ă—198 5.66 KB

type: tile
entity: light.tv_lights
hide_state: false
show_entity_picture: false
features:
  - type: light-brightness
tap_action:
  action: toggle
icon: mdi:light-recessed
card_mod:
  style:
    hui-card-features$:
      hui-light-brightness-card-feature$:
        ha-control-slider$: |
          .slider {
            --control-slider-border-radius: 4px !important;
            --control-slider-thickness: 75px !important;
            height:15px !important; 
              }
2 Likes