šŸ”¹ Card-mod - Add css styles to any lovelace card

https://github.com/thomasloven/hass-config/wiki/Misc-tricks#node-anchors

1 Like

Thank you so much, and sorry I didnā€™t see these documents, so helpful!

Something related to Lovelace theme in general; I would like to do more styling changes to the dashboard as a whole. I have tried including a CSS resource, but only the body tag gets the changes.

Is there a way how to do this?

I am experiencing a strange error. I am using card-mod for the manual-alarm-panel. When I first load the panel, the new css is applied to all 3 arm buttons.
pre-arm

However when I disarm, the css only applies to the first button.
post-arm

I checked the styles applied and can confirm that the position and font-size are inserted in the computed style only on the first button.

Amazing. It struck me no more than an hour ago that this could potentially happen.
You have excellent timing, and Iā€™ll see what I can do about it.

1 Like

Thanks! I only noticed it this morning as I was disarming the alarm. If I refresh, all is good, but using Fully Kiosk as my tablet browser is a bit of a pain.

A bit off topic I guess, but it really annoys me.
Can I add style to the body?
I really want something like this:

  body: |
    body {
        overflow: hidden;
    }

So the scrollbar on the right is hidden:

Also thank you @thomasloven for your awesome work on the new card-mod 2.0, I really enjoy it! :slight_smile:

I think thatā€™s one of the few things you can actually do with a lovelace stylesheet resource.

1 Like

Yes. Thanks for the fast answer works! :smiley:

Source

I put a style.css in /www/css/style.css with:

 /* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
} 

and added it through lovelace resources /local/css/style.css.

2 Likes

Do you need any extra eyes on this? I am happy to lend a hand.

Huh? 

The issue with the card-mod only updating the first button.

Oh. You replied directly to a different message, so I was a bit confused.

Iā€™m quite sure I know exactly what the problem is, but unfortunately not how to solve itā€¦
Iā€™ll let you know if I need more information.

Oh. But please open an issue on github.

Issue submitted: https://github.com/thomasloven/lovelace-card-mod/issues/68

Hi guys, a noob question. I tried to read the entire thread, but I canā€™t anymore. :upside_down_face:

I have an element that I need to position and resize. So I have this style:

style:
   height: 87%
   left: 55%
   top: 40%
   width: 100%

Now I want to add some css customization:

style:
 :host {
      --tile-background: rgba(255, 255, 255, 0.8);
      --tile-border-radius: 12px;
      --tile-width: 100px;
      --tile-height: 100px;
}

How do I combine the two styles? :blush:

Thanks in advance

You ignore card-mod and add them to the styles: property like all others. Itā€™s already CSS.

elements:
  - ...
    style:
      height: 87%
      left: 55%
      top: 40%
      width: 100%
      "--tile-background": rgba(255, 255, 255, 0.8)
      "--tile-border-radius": 12px
      "--tile-width": 100px
      "--tile-height": 100px

No semicolons!

1 Like

After 2 days of trying iā€™m short on talent and stuck customising an entity_pictureā€¦

      - type: custom:button-card
        entity: sensor.rova_gft
        style:
          top: 63%
          left: 92%
          width: 10%
        show_entity_picture: true
        show_state: true
        show_name: false
        styles:
          card:
           [background: 'blue', border-radius: 0.7vw, box-shadow: none, border: '0.2vw solid #8B9DC3' ]
          state:
           [font-size: 1.7vw, font-family: SF Mono, color: "#F6F9FB" , opacity: 1, padding: 0.55vw 1.2vw 0.5vw 1.2vw]
          entity_picture: 
            - color: 'white'

I canā€™t figure out how to change the stroke color (if thatā€™s the right terminology, meaning the icon outline color) of the icon. no matter what I do, it remains black.
looking to change itā€™s color depending on state

appreciate your help !

Hey, I have a setup that uses card-mod to modify some widths, backgrounds and shadows. My setup looks great but the loading time is terrible even on high-end device, on mobile itā€™s even worse. The layout resizes and jumps for few seconds before itā€™s usable. It can even hang the tab of my Firefox. Am I doing anything wrong? Can I speed it up?

I am using version 14 of card-mod.

Layout:

ui-lovelace.yaml:

@thomasloven did you read about a problem like this? Did I overdo my setup?

Thereā€™s you issue. First the cards are loaded then card-mod styles are applied.

If you use the new class feature in card-mod 2.0 this improves the situation considerably as the styles seem to be loaded with the cards.

Documentation on these new features is not available yet but essentially you create a class for each item that needs modding in your theme. e.g. in my day and night themes I have added config like this:

  card-mod-theme: night
  card-mod-card: |

    ha-card.top-level-card {
      border: solid 1px var(--secondary-text-color);
      background: url("/local/background/card_bg_Night.png");
    }


    ha-card.inline-card-no-border {
      box-shadow: none;
      --ha-card-background: rgba(0, 0, 0, 0);
    }

Then in my cards instead of adding style: I add:

class: top-level-card

or

class: inline-card-no-border

depending on where and what style I want applied.

You can see more examples here:

1 Like

Thanks @tom_l ! That really helped with the looks of loading. Can you help me with one thing?
I have a card like this:

                - type: entities
                  class: bedroom-control
                  style:
                    .: |
                      .card-content {
                        padding-left: 0;
                        padding-right: 0;
                      }
                    "#states div":
                      hui-toggle-entity-row:
                        $:
                          hui-generic-entity-row:
                            $: |
                              :host {
                                justify-content:center;
                              }
                              .pointer {
                                display: none;
                              }
                      hui-input-datetime-entity-row:
                        $:
                          hui-generic-entity-row:
                            $: |
                              :host {
                                justify-content:center;
                              }
                              .pointer {
                                display: none;
                              }
                  show_header_toggle: false
                  entities:
                    - entity: input_datetime.sunrise_time_3
                    - entity: input_boolean.sunrise_light_toggle_3
                    - entity: input_boolean.sunrise_bed_light_toggle_left_3
                    - entity: input_boolean.sunrise_bed_light_toggle_right_3
                    - entity: input_boolean.sunrise_covers_toggle_3

How do I move it to a theme so all .bedroom-control have it applied? I did a lot of styles in card-mod-card but cannot make this work.

You would be better off asking Thomas in the topic I linked to. I have not used those particular css options.