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

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ā€¦

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

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:

Jul-13-2022 17-30-16

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.

Check ā€œclassā€ in card-mod-themes.

1 Like

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;
          }

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.

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
    grafik
  2. grey during the night (dark mode) - here unfortunately a full black is used. Here you can see the difference:
    grafik
    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ā€¦ :bulb:
  • 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)?

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

is working here as expected.

image

1 Like

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.

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

@eggman Try using a more structured way.

And check these issues - some of them are similar.

@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.

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;
                      }

Doesnā€™t it let you using card_mod?

Did you actually find a way of doing this?

Im trying to replace the sidebar card from HACS cos it doesnt work in 2022.7

@124tampines11
Moving a right sidebar to the left

1 Like

Well this is a basic example:

type: custom:collapsable-cards
title: āš™ļø Card header
defaultOpen: desktop-only
buttonStyle: 'font-size: 26px; background-color: var(--divider-color);'
cards:
  - type: entities
    title: null
    state_color: false
    show_header_toggle: false
    entities:
      - entity: sun.sun

Currently I simply use the var(--divider-color) directly in the offered CSS field ā€œbuttonStyleā€ without card-mod being involved. But letā€™s say we want green background for light mode and blue for dark mode.

How would I apply this from your exampleā€¦

    card_mod:
      style:
        hui-generic-entity-row $: |
          @media (prefers-color-scheme: dark) {
            state-badge {color: green;}
          }
          @media (prefers-color-scheme: light) {
            state-badge {color: blue;}
          }
  1. Replace state-badge (with background-color?) and hui-generic-entity-row (withā€¦?) as we want to change the background.
  2. Magically apply that to above shown custom:collapsable-cards.

I asked about a working example of the card with card-mod ā€œto specify a custom background to the header.ā€
So, provide the card-mod code for the header, then weā€™ll see how to apply a dark mode.