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

[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?

[124tampines11]

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

[Ildar_Gabdullin]

@124tampines11
Moving a right sidebar to the left

[e-raser]

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.

[Ildar_Gabdullin]

@e-raser

Well this is a basic example:

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.

[e-raser]

@e-raser

hui-generic-entity-row

Well that’s pretty much my issue (where I need help): I don’t know how to address this element. Still not familiar with CSS inspectors.

I always only see so many trees - but no forest

That’s the biggest mountain to climb for me, the dark mode think afterwards seems to be a bit easier because of the example code you already provided.

[Ildar_Gabdullin]

I cannot see a header here.
What is hidden inside shadowRoot?

[carmin3]

Hello Everyone!

I was trying to create a “custom:vertical-stack-in-card” as an element of the main “picture-elements” card.

This is the vertical-stack-in-card code:

  - type: custom:vertical-stack-in-card
    horizontal: true
    cards:
      - type: custom:button-card
        entity: script.alza_tutte_tapparelle
        tap_action:
          action: call-service
          service: script.alza_tutte_tapparelle
      - type: custom:slider-entity-row
        entity: cover.finestra_soggiorno
        full_row: true
      - type: custom:button-card
        entity: script.abbassa_tutte_tapparelle
        tap_action:
          action: call-service
          service: script.abbassa_tutte_tapparelle
      - type: custom:button-card
        color_type: blank-card
      - type: custom:button-card
        entity: script.arrivederci
        tap_action:
          action: call-service
          service: script.arrivederci
      - type: custom:button-card
        entity: script.buonanotte
        tap_action:
          action: call-service
          service: script.buonanotte
    style:
      top: 9%
      left: 32.5%
      width: 55%

I get the following:

which is quite fine to me, but i would like to allign vertically the slider, and i can’t figure out how to do that! I tryed many card-mod configuration, but notthing actually works

Could you kindly help me?
Thank you in advance!

Best regards.
Carmin3