🔹 Card-mod - Add css styles to any lovelace card

[Ildar_Gabdullin]

A useless animation example:

Starring:

• entities card
• dummy-entity-card
• card-mod

type: vertical-stack
title: testing
cards:
  - type: entities
    entities:
      - type: 'custom:dummy-entity-row'
        entity: sun.sun
        icon: 'mdi:web'
        name: ' '
        style:
          state-badge:
            $:
              ha-icon:
                $: |
                  ha-svg-icon {
                    color: red;
                    animation: move 3s linear alternate infinite;
                  }
                  @keyframes move {
                    0% {
                     left: 0px;
                    }
                    100% {
                      left: 408px;
                    }
                  }
    style: |
      ha-card {
        animation: wobble 3s linear alternate infinite;
      }
      @keyframes wobble {
        0% {
         -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
        }
        100% {
          -webkit-transform: rotate(5deg);
          transform: rotate(5deg);
        }
      }

[lanky8804]

Let me start off by appologising as im sure this is simple however can’t find a solution.

Just wanting to be able to edit font size but can’t get the right element.

Am trying to target the txt “Sat 14.53”

[Ildar_Gabdullin]

Try using this (“Changing a font-size” part):

Card-mod - Add css styles to any lovelace card

I am still a beginner and when I started learning card-mod for me it was not easy since I was not able to find a full info for all the possible cards))). Let me post sometimes little instructions for different cards. First, it will be an Entity card: NOTE: Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3). sensor: [изображение] type: entity entity: sensor.cleargrass_1_co2 style: | .header .name { color: green; } ha-card { color: red; } .info …

[Ildar_Gabdullin]

Regarding styling badges.

1. Tried to summarize everything in these posts:
   Badges: different styling
   Badges: conditional show/hide
   Badges: hidden name

2. Cannot find out how to change a font-size for the name:
   

      - entity: sensor.cleargrass_1_co2
        name: name font (very very long name)
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .title {
                    color: orange;
                    font-size: 8px !important;
                  }

Any advice will be welcome.

[sender]

Another “monster thread”. Simple question, might be harder answer, hope not…

I want to “scale” a large picture that is not fitting on a screen and does not scale properly in a picture entity card. Is there any example code I can (re)use?

Thanks

[Mariusthvdb (Marius)]

Not wanting to try and find an answer first yourself is one thing, but wanting the community to figure out what you want is a bit much to ask I fear.

If you’d start giving us a clue and maybe even some first attempts of a config, that might increase your chances at getting some help here…

[sender]

Ehm… I would like to have a picture entity card with a large floorplan that currently does not fit in a browser windows in full panel mode. I want to know how I can scale such an image. It that clear enough :)?

Edit: this was not meant to be snarky

[DavidFW1960 (David)]

No because you are asking people to write a card for you from scratch while making no effort yourself and not showing what you have tried or any screenshots no showing your problem. Is that clear enough for you? (Being snarky with people trying to help you won’t end well)

[sender]

Wow, that is not meant to be so.

I have tried so much, I don’t even know what to show. I really do not know another way of asking what I would like to achieve.

From another angle…

I have a large floorplan picture in /local. It shows in my picture entity elements card which I have created in my lovelace view in panel mode. The problem I am facing is that this picture scales out of the screen, it is too big… so my question is how is can “scale” down that image to for example 50% of the screen or 80% or fit to the window or whatever is possible.

Since I have really tried so much and in the end I only found 1 solution in the forum panels from someone that has put a lot of space around the plan to make the picture actually fit. I did that and that works, but it does not properly display on a mobile or scales when using on another resolution screen.

So sorry if I am asking the question in a wrong way, but I would like to know what the correct way to do this since I can not find any source, code, solution, whatever that solves my problem.

[sergio_pt]

Have you checked 🔹 Layout-card - Take control of where your cards end up ?

[sender]

Yes I have. But I think due to fact I want to use panel mode I have no issue with card placement, it is just 1 card which is full panel but the (picture in the) panel is too big

[sergio_pt]

If you read the docs, you can create a card that takes full space without using panel mode……

[sender]

Yes but can I use a lovelace Picture Elements Card Configuration in that?

[Mariusthvdb (Marius)]

@sender

It shows in my picture entity elements card which I have created in my lovelace view in panel mode. The problem I am facing is that this picture scales out of the screen, it is too big… so my question is how is can “scale” down that image to for example 50% of the screen or 80% or fit to the window or whatever is possible.

so post that config here, and allow the community to help you.

[sergio_pt]

Clearly you haven’t even checked the examples there…
Answer: yes you can.

[KTibow (Kendell R)]

@Ildar_Gabdullin

Cannot find out how to change a font-size for the name:

So what is the intended behavior? What is currently happening?

[Amishman]

I thought I was following the doc but I must have something wrong. I am trying to modify a couple of CSS variables.

Here is my config:

              - type: light
                hold_action:
                  action: none
                entity: light.master_bedroom_light
                name: Master Bedroom
                card_mod:
                  style: |
                    ha-card {
                      --font-size: 1.7rem;
                      }

If I’m reading the inspector right, it appears as thought the card mod is being applied to the ha-card but in the wrong place.

Is anybody able to see what I’m doing wrong?

[KTibow (Kendell R)]

Change that to --name-font-size: 1.7rem !important;.

[Ildar_Gabdullin]

@KTibow

So what is the intended behavior? What is currently happening?

I posted the picture:

The font is changed but the text is not centrally aligned.

[lanky8804]

Spot on, thank you so much. Have just learnt so much from your post that you linked.