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

Anchors should be used in yaml mode only.
When used in UI editor then these anchors like "ref_my_anchor_for_sensor" MAY BE saved as "ref_0" - but also may be just replaced by code (depends, I haven’t investigated this issue).

You may just define a card-mod style for ALL entities in the Entity card (see the 1st post → accumulative post → post for Entities card). Note that since Entity card may contain different types of rows (text0entity-row, sensor-entity-row, …) you have to specify a code for each type.

I never tried but can’t we set a theme for a particular card?

1 Like

Huh, I didn’t know there’s a real difference between editing the yaml file directly, and doing it through the “code editor”.


I think you’re referring to the first code block in that post here, where style: is at the very front of the line (not indented). This indeed would have been great, but only for static styling, at least that’s what it looked like to me. I couldn’t get anything regarding to config.entity working when using that method.


We can (apparently). I never used themes, so I never noticed this option. This is the winner for me, for now at least.

Basically just follow these steps: Card mod Themes · thomasloven/lovelace-card-mod Wiki · GitHub
Make sure to create the theme folder, create the theme yaml file, add the frontend bit in configuration.yaml, restart HA, reload themes, and of course set the theme to the entities list.

It’s not perfect, since you need to call the reload themes service every time you update a theme (which is VERY easy to forget, especially if you haven’t done it for a while), but it’s the best option I’ve seen so far.

Agreed, this cannot be used on the card level.

Each time you edit a template sensor you need to reload them template sensors.
Here is the same situation.

Not sure if this is possible, but seeing how some users seem to be magicians, I hope someone knows how to achieve this. Basically I want an iframe (webcard) to adjust to the screen size automatically. I use this card on different devices. The content in the iframe is already responsive, so I hope the iframe can be as well. This is the code I currently use. I used mod-card because (if I remember correctly when creating this) it didn’t work as standard card-mod style.

                      - type: custom:mod-card
                        card_mod:
                          style: |
                            ha-card {
                              border-radius: 20px !important;
                              --ha-card-border-radius: 20px !important;
                              height: 85vh;
                              
                            }            
                        card:            
                          type: iframe
                          url: 'https://LINK/'
                          aspect_ratio: 165%

The main challenge with iframe is that you need to use an aspect ratio, which forces it to a certain shape. So I hope I can alter this card using card-mod to make it responsive and always fill the entire screen.

But perhaps I need Config Template Card for this and use a template to determine the ratio depending on the viewport of the screen…?

I cannot reproduce it.
Tried with the 1st site and it is scaled properly:


And there is no need for mod-card:
изображение

card_mod:
  style: |
    ha-card {
      --ha-card-border-radius: 20px !important;
    }            
type: iframe
url: https://meduza.io
aspect_ratio: 165%
1 Like

The content inside the iframe is scaled fine, that’s not the issue. It’s the card element of the iframe. I need the card to take the size of the entire screen automatically. The content in the card already fit’s itself fine to the card size.

So If I open the webcard on a screen with less height, it’s should still be fullscreen and I don’t need to scroll the page. Also when the screen has more height, it needs to fill the entire screen and not leave empty spaces below it. I tried with height: 100vh but that didn’t work.

See my example: Imgur: The magic of the Internet

I hope I explained it well what I’m trying :slight_smile:

What’s funny is that it does work as intended when I open the url as it’s own custom panel (in sidebar). It adapts to the screensize. Ofcourse I can forward to that as well, but then I have no UI there and no way to go back with a simple button (like I have now in my own dashboard).

Your example - what I noticed is:

  • if you change a height of the screen then you see more/less “lines” on the page;
  • there is a sticky footer (probably as a part of the page).

My example w/o height does the same (w/o sticky footer).
So, still I am not getting the problem((((.

What UI do you need? Not clear

I don’t want to see more/less lines on the page, that’s the challenge. I want the webcard to fill the entire screen, on different devices. I want the webcard to always fill the entire screen. Also as you can see, if I make the window smaller, I have to scroll within Lovelace, the webcard is larger than the screensize, it doesn’t adapt. This means that the webcard is not scaling with the screen, it’s fixed due to the aspect ratio. So I need the webcard to be responsive, like the content in the iframe.

Currently I have this inside my dashboard (i.e. UI). So I can open my LMS webpage as part of my dashboard. Basically I want the webcard to act like this: Imgur: The magic of the Internet As you can see, it always fit’s the entire screen.

But I think this is impossible due to how the webcard renders itself and needs an aspect ratio.

I am afraid I cannot help since haven’t got an example of a page which may fit whole area.

Hello all,

Any particular reason why HA doesn’t recognize “custom:multiple-entity-row” and similar?
Card-mod installed via HACS and updated.
Also, got a problem while rotating icon - it looks like center of the icon has been moved. Especially with increased size.

I’m trying to disable the ‘dimmed’ effect on some on my light icons, so that even when the brightness is at 1%, the icon is still fully lit. I’ve tried to modify the code in post #1363 but I’m having trouble getting it all to work.

I’ve figured out I need to override ha-state-icon, as shown here:
Schermafbeelding 2021-12-30 om 23.06.28

Please note that the light entity I want to change is nested about 4-5 levels inside other (custom) cards.

This is the relevant code:

                - entity: input_boolean.motion_light_office
                  icon: mdi:desk
                  type: custom:multiple-entity-row
                  name: Werkkamer
                  state_color: true
                  show_state: false
                  style: |
                    :host .entities-row .entity {
                      margin-right: 10px;
                    }
                  tap_action:
                    <somebrowser_modstuff>
                  secondary_info: null
                  entities:
                    - entity: light.light_hue_office
                      name: false
                      state_color: true
                      icon: mdi:floor-lamp-torchiere
                      tap_action:
                        action: toggle
                    - entity: light.light_office_light_0
                      name: false
                      state_color: true
                      icon: mdi:lightbulb
                      toggle: true
                      card_mod:
                        style: |
                          ha-state-icon {
                            filter: none !important;
                          }
                      tap_action:
                        action: toggle
                    - <somemoreentities>

However, the icon is still shown dimmed:
Schermafbeelding 2021-12-30 om 23.10.54

I’m having a hard time understanding CSS selectors so I try to modify posted code here, which usually works, but this time I’m stuck. Hope someone can help or point me in the right direction.

Would You mind send config for your entity card list & theme?
It looks very clean and will save time searching which CSS will works with icons here :smiley:

Any idea why names are sometimes on the top and in another case at the bottom?

Bottom = card-mod

Do You mean that it’s hardcoded in - custom:multiple-entity-row?
Do You know how to color multiple-entity-row icons? (like window icon in my screenshot above)
I can’t find good CSS anchor.

just for the fun of it I did:

with real time counting.

However, Id like it to blink, but it wont…

type: conditional
conditions:
  - entity: binary_sensor.christmas_time
    state: 'on'
#        {{now().month and now().day in range(22,31)}}
card:
  type: markdown

  card_mod:
    style: |
      ha-card {
        background: url('/local/wallpapers/fireworks.jpg');
        background-size: 100% 400px;
        color: var(--background-color-on);
        font-size: 25px;
        font-weight: bold;
        text-align: center;
        animation: blink 2s ease infinite;
      }
  content: >
    **New years events:**

    {% set new = states('sensor.new_years_day_countdown') %}
    {% set old = states('sensor.since_new_years_day_counting') %}


    New year in:

      {{new}}


    Since new year:

      {{old}}

I must be missing something. If at all possible, I want only the top countdown to new year to flash (in a secondary stage, only doing so the last 5 minutes of the year…)

please have a look if you can help me make it flash?

and ofc: Happy new year everyone!

Okay I got it. It’s from:

:host .entity {
   display: flex;
   flex-direction: column-reverse
}

Anyway I would like to ask You about one thing. I want to animate icon in entity-multiple-row but I can’t get it via CSS. Is it possible to animate window icon while open?
image
Normally for main entity I can use:

:host .icon-small {
   color: orange;
}

But for multiple-entity it’s not working.

You should write a code accordingly to a real DOM structure. Open Code Inspector and build a path to the required element. Do not try to use a code without understanding.
Surely you may use ready examples (1st post, see a link at the bottom), but these examples give you a direction and may not cover all your cases.

Because you have no animation specified!!!

Happy new year, dear Marius!

1 Like

but blink is native? I never specify that and it always works…maybe only for Button.

      @keyframes blink {
        100% {opacity: 0;}
      }

and blinking away :wink:

Dec-31-2021 18-32-11

Thank you!!

с новым годом

1 Like

Having another issue I can’t figure out…

Using multple-entity-row, I have one card which removes padding between the entities, which works great. I have another multiple-entity-card which uses a style to align the left icon more to the left, which also works great. However, I can’t seem to combine them.

This is the code from both individual cards:

                - entity: input_boolean.motion_light_garden
                  icon: mdi:nature-people
                  [...]
                  style: |
                    :host .entities-row .entity {
                      margin-right: 10px;
                    }
                - entity: input_boolean.motion_light_toilet
                  icon: mdi:paper-roll
                  [...]
                  card_mod:
                    style:
                      hui-generic-entity-row: 
                        $: |
                          state-badge {
                            flex: 0 0 0px !important;
                            height: 35px;
                            line-height: 35px;
                          }