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

[Ildar_Gabdullin]

Learning any new stuff like card-mod is not an easy task.
This all needs a “try / make an error / repeat” approach.
I myself have never dealt with any web-programming, a “CSS” word I came to know in this thread first.

One thing is here.
When I started learning card-mod, I decided to create test cards with examples to cover different cases. That was a good lesson, a good practice.
A bit later I decided to post these examples in this thread.
All my examples here available in the consolidation post (1st post → link at the bottom).
Examples for the “button” card are not there - probably because most people are using a more powerful “custom:button-card”.
I think I should prepare some examples with the “button” card too.

[ATWindsor]

Yeah, those examples are great, and very helpful, those are the ones i used to get to my first version of the code. postet above. Thanks for putting in the work.

[Ildar_Gabdullin]

@ATWindsor

those are the ones i used to get to my first version of the code

…and you should not use a code for a “xxx-card” to style a “yyy-card”.
These cards may have different structure, different CSS properties.
What you can do with some new card is - using Code Inspector, try to use methods which you learned with other cards.

[fantnhu]

Hello!
I found a lot of good solutions here. I have a problem that I couldn’t figure out. I want to hide this entire column.
I can hide the cards separately by entity status, but I can’t hide the VERTICAL-STACK at the same time.
Please help!

[Mariusthvdb (Marius)]

having successfully added scrollbars to many different cards, I now am confronted with a history-graph card and cant make it happen…

trying to do:

              type: history-graph
              card_mod:
                style: |
                  ha-card {
                    box-shadow: none;
                    margin: 8px -16px 0px -16px;
                  }
                  ha-chart-base canvas {
                    max-height: 400px;
                    overflow-y: scroll;
                  }

but the path to the canvas isnt correct . Ive also tested:

                  ha-chart-base {
                    chart-max-height: 400px;
                    overflow-y: scroll;
                  }

but no such luck.
Could you please have a look with me where I go wrong? thanks!
btw, tis is part of a bigger panel view, replacing the now deprecated History panel ‘all’ entities

- title: History auto
  path: history-auto
  icon: mdi:history
  panel: true
  cards:

    - type: entities
      title: History include all domains
      entities:

        - entity: input_number.history_span

        - type: custom:config-template-card
          entities:
            - input_number.history_span
          variables:
            span: states['input_number.history_span'].state
          card:
            type: custom:auto-entities
            card:
              type: history-graph
              hours_to_show: ${span}
              card_mod:
                style: |
                  ha-card {
                    box-shadow: none;
                    margin: 8px -16px 0px -16px;
                  }
                  .chartContainer {
                    max-height: 400px;
                    overflow-y: scroll;
                  }
            filter:
              include:
                - domain: "*"

btw, a workaround: using an extra entities card inside the entities card and set the scroll on that section with:

    - type: entities
      title: History include all domains
      entities:

        - entity: input_number.history_span

        - type: custom:hui-element
          card_type: entities
          card_mod:
            style: |
              ha-card {
                box-shadow: none;
              }
              .card-content {
                max-height: 700px;
                overflow-y: scroll;
              }
          entities:
            - type: custom:config-template-card
              entities:
                - input_number.history_span
              variables:
                span: states['input_number.history_span'].state
              card:
                type: custom:auto-entities
                card:
                  type: history-graph
                  hours_to_show: ${span}
                  card_mod:
                    style: |
                      ha-card {
                        box-shadow: none;
                        margin: 8px -16px 0px -16px;
                      }
                filter:
                  include:
                    - domain: "*"

works ok. Would still love to be able to scroll the history-graph itself…

[Ildar_Gabdullin]

@Mariusthvdb

added scrollbars to many different cards, I now am confronted with a history-graph

What you are trying to do is adding a scrollbar to an each graph:

code

type: history-graph
entities:
  - entity: sun.sun
  - entity: sensor.mijia_300_1_co2
  - entity: sensor.ac66u_snmp_24_temp
  - entity: sensor.disk_use_percent
  - entity: sensor.ac66u_nvram_total
  - entity: sensor.xiaomi_cg_1_tvoc
card_mod:
  style: |
    .content {
      max-height: 550px;
      overflow-y: scroll;
    }

instead of more reasonable adding a scrollbar to the whole stack of graphs:

code

type: history-graph
entities:
  - entity: sensor.xiaomi_cg_1_co2
  - entity: sensor.xiaomi_cg_2_co2
  - entity: sensor.xiaomi_cg_1_tvoc
  - entity: sensor.xiaomi_cg_2_tvoc
card_mod:
  style:
    state-history-charts $:
      .entry-container:
        state-history-chart-line $ ha-chart-base $: |
          .chartContainer {
            color: red;
            max-height: 150px;
            overflow-y: scroll !important;
          }

---

More examples

[Mariusthvdb (Marius)]

yes, thats what the solution I posted does. its just that I would have wished for a card config without the extra entities card embedded:

[clarinetJWD (Joe Dombrowski)]

Does anyone know of a way to add a class to an element so that the style info can go in the theme?

Specifically, I use two different styles for Paper Buttons Row buttons. I’d like to have the default style, then have a CSS entry for “paper-button.button-with-background” and then add the class “button-with-background” to only the buttons/rows that I want to style that way.

[Ildar_Gabdullin]

Check “class” in card-mod-themes.

[eggman (bertie basset)]

Hi all, I’m trying to get markdown table to take up the full width of the markdown card.

The table is inside an ha-markdown-element - that is full width. If I manually add width: 100% to the table using element styles in developer tools it works.

I can’t for the life of me work out how to do it with card_mod. I’ve tried a lot of things including the code below.

Can anyone help?

card_mod:
  style:
    .: |
      ha-card { 
        --mdc-icon-size: 50px;
      }  

      ha-markdown:
        $: |
          ha-markdown-element:first-of-type table {
            width: 100% !important;
          }

[arganto]

Without test: Fix the indention. ha-markdown has to be same as.:

And secondly first try as open as you can, without the first-something, etc.

[e-raser]

Hi Ildar,

another use-case came up where this card would be a perfect (only one I know currently) solution. For this I need to style the card (it already offers a buttonStyle option to apply CSS to the header/button of the card).

I want the background to be the same as the default HA theme color. So

1. white during the day (light mode) - already works out of the box
   
2. grey during the night (dark mode) - here unfortunately a full black is used. Here you can see the difference:
   
   It should instead be grey as the default card background (see lower part of the screenshot).
   → Is: #111111
   → Should: #1c1c1c (only when dark mode of HA theme is active)

I applied background: default; but it changes nothing.

• Do I need to add some “if dark mode is active, use #1c1c1c as background” logic magic maybe?
  → Update: I found your great post for dynamic dark/light mode CSS application here. Now I need to know how to address the collapsable-card section…
• Attempt for quick solution:
  Or can I use something like background-color: var(--divider-color) but instead of --divider-color or --accent-color (the only ones I know) there is one I am looking for? What other “–xxxxx-color” options do exist?

Would you mind having a look at this card (https://github.com/RossMcMillan92/lovelace-collapsable-cards)?

[eggman (bertie basset)]

Thanks, I’ve fixed the indentation and tried without the first-of-type and still doesn’t work. I’ve also tried the slightly different structure from this post and nothing.

Card-mod - Super-charge your themes!

I recently came across a post where users show what kinds of entities their setup consists of. I found this interesting, especially that you can just group on the state object without the need to go to the DB. The markdown table is neat but I wanted something that looked prettier. Card-mod to the rescue! I’m using theme variables where possible. [Screenshot 2021-04-19 at 12.19.30] - type: markdown content: > Domain | Count :---|---: {% for domain…

card_mod:
  style:
    .: |
      ha-card { 
        --mdc-icon-size: 50px;
      }  
    ha-markdown:
      $:
        ha-markdown-element: |
          table {
            width: 100% important!;
          }

[arganto]

card_mod:
  style:
    ha-markdown:
      $: |
        ha-markdown-element table {
          width: 50% !important;
        }

is working here as expected.

[eggman (bertie basset)]

@eggman

    .: |
      ha-card { 
        --mdc-icon-size: 50px;
      }  

great, thanks.

I think that woks here but am getting odd results with my browser. When I refresh the page it’s not right. Then I press edit dashboard and it works, press done and it continues to work until I refresh the page. Maybe some weird caching thing going on.

[eggman (bertie basset)]

works as expected on another device - so must be a browser issue

[Ildar_Gabdullin]

@eggman Try using a more structured way.

And check these issues - some of them are similar.

[Ildar_Gabdullin]

@e-raser Hi!
Post here a working code w/o using a “dark mode support” to specify a custom background to the header.
Then we’ll try to enhance it with a “dark mode support”.

Also, I see here an issue with this card - not all it’s elements follow “dark mode”. Probabaly you should register an issue for this card.

[RichardU (Richard)]

Installed Card Mod with HACS, added this to configuration

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

When I enter this in Studio Code Server, I get Property card_mod not allowed

          - type: entities
            entities: 
              - entity: switch.garage_soffit
                card_mod:
                  style: |
                    :host {
                      color: red;
                      }

[Ildar_Gabdullin]

@RichardU

Studio Code Server, I get Property card_mod not allowed

Doesn’t it let you using card_mod?