Need help with card-mod and the gauge card

Configuration Frontend
1

Hey guys,

I’m currently trying my hand at using card-mod to customize some cards so they fit better with my Minimalist UI. Unfortunately I’m failing on the gauge card right now. I want to make the font (state / name) smaller, but it only works with the name, not with the state.
As I understood it, it should work like this:

type: gauge
entity: sensor.workingroom_printer_black_toner
card_mod:
  style: 
    .: |
      ha-card > div {
        font-size: 10px !important;
      }
    ha-card:
      ha-gauge:
        $: |
          svg.text > text {
            font-size: 20px !important;
          }

The result is:
image

It’s only working for the name. I’ve also tried about 1000 different approaches, but nothing works. I’m also not understanding that thing with $ and the shadow-root, I’ve watched a youtube tutorial on YT with a french speaker. I didn’t understand a word, but from that I derived the above code.

Thanks for your help! :slight_smile:

1 Like
2

Have you found a Solution yet? I’m struggeling with exactly the same Problem 🔹 Card-mod - Add css styles to any lovelace card - #3368 by smartin, but haven’t figured it out as well. The Shadow-Root is killing me. Really strange there are Tutorials in French (i found Spanish as well), but not in English…

Edit: Check this Guy’s great Explanation/Solution out! 🔹 Card-mod - Add css styles to any lovelace card - #3369 by reste_narquois

3 
    card_mod:
      style:
        ha-gauge:
          $: |
            svg.text > .value-text {
              fill: var(--accent-color) !important;
            }
        .: |
          ha-card {
            background: transparent !important;
            padding: 5px !important;
          }
          .name {
            color: var(--accent-color) !important;
          }
1 Like
4

thank you very much
another exemple, here I also change the color of needle and use the text color instead of the accent color

      card_mod:
        style:
          ha-gauge:
            $: |
              svg.text > .value-text {
                fill: var(--secondary-text-color) !important;
              }
              svg.gauge > .needle {
                fill: var(--secondary-text-color) !important;
              }
          .: |
            ha-card {
              background: transparent !important;
            }
            .name {
              color: var(--primary-text-color) !important;
            }