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

[CM000n (Simon)]

Nope, that doesn’t seem to work

      - type: horizontal-stack
        cards:
          - type: conditional
            style:
              justify-content: flex-start
              flex-grow: 1
              flex-shrink: 1
              flex-basis: 1
            conditions:
              - entity: binary_sensor.spuehlmaschine
                state: "on"
            card:
              type: 'custom:button-card'
              template: chip_mdi_icon_only
              variables:
                ulm_chip_mdi_icon_only_entity: binary_sensor.spuehlmaschine
                ulm_chip_mdi_icon_only_icon: mdi:dishwasher
          - type: conditional
            style:
              justify-content: flex-start
              flex-grow: 1
              flex-shrink: 1
              flex-basis: 1
            conditions:
              - entity: binary_sensor.waschmaschine
                state: "on"
            card:
              type: 'custom:button-card'
              template: chip_mdi_icon_only
              variables:
                ulm_chip_mdi_icon_only_entity: binary_sensor.waschmaschine
                ulm_chip_mdi_icon_only_icon: mdi:washing-machine
          - type: conditional
            style:
              justify-content: flex-start
              flex-grow: 1
              flex-shrink: 1
              flex-basis: 1
            conditions:
              - entity: binary_sensor.trockner
                state: "on"
            card:
              type: 'custom:button-card'
              template: chip_mdi_icon_only
              variables:
                ulm_chip_mdi_icon_only_entity: binary_sensor.trockner
                ulm_chip_mdi_icon_only_icon: mdi:tumble-dryer
        view_layout:
          grid-area: chips_c

[boheme61]

ok, that’s what i thought thx. for the pic"overview", always good to know the whole context, as the code-snippet dont tell whether you are editing yaml, or a card, with cards within a card … also a browser, + refresh of same is essential
… seems like in the code-snippet you have 3 “button-card” , but pic showing 2 ?
anyway, justify-content: flex-start might not work on a “conditional” card ( as it’s not a card )
If you f.ex. use paper-button-row, you get exactly ( the most “intensified” packed to the left ) view, thou maybe then you have to “specify” your “conditions” else where, i don’t even know what the purpose here, setting each button to “on” vs “of”, or what are you trying to achive with the 1 “condition”, isn’t it something that should/could be in a template ?
To be honest it looks like your view is a “grid-view”

PS: you have (it shows) 2 cards> with content to the most left ! , will never be(look) different, unless you pack that “row” with cards

Edit2: https://github.com/jcwillox/lovelace-paper-buttons-row
Edit3: or you have in fact 1 row -2 column ?

@CM000n … i did type “styles” above, anyway wont be of any use due to your “setup” … unless you skip your “card-setup”, use other cards to achieve what/which “look” you want

[CM000n (Simon)]

It shows only two cards because they are conditional cards.
And the conditions are only fulfilled for two of them

[boheme61]

Seems like your card now, ( " horizontal-stack" = a row )( filled with Button-card from “conditional-card” “on”)(only 1 condition) … so sometimes none, or 1 card, 2 or 3 cards, if entity is “on” … they will take available space, whether 1, 2 or 3
Maybe start with a grid, define width of column ( to match your Icon ), place a “conditional - button-card” in each “space”, or define column-width to hold 3 Icons (3 button-cards) ( i.e 3 column for a row, in your case) = most likely not possible
… Or , fill the row with button-cards, use the first 3, replace with empty card ( if not-on)

I definitely don’t like this way, as i want my “View” responsive, have to look good whether i use 4K TV, Laptop or Phone, regardsless of res

[CM000n (Simon)]

Thx, but that’s what I already know
But if I change the „flex“ condition in the root of the conditional cards in the developer tools of a browser it works as intended.
All Buttons on the left and no gap between them.
So I thought it would be something that I can achieve via card mod.

[CM000n (Simon)]

Look here for further explanation:

Lovelace UI • Minimalist

Same Problem here. The Conditional Card is using the horizontal space dynamically. How it looks in Chrome Developer view: [Bildschirmfoto 2021-08-12 um 22.43.52] And the CSS for the Element: #root > * { flex: 1 1 0px; margin: var( --horizontal-stack-card-margin, var(--stack-card-margin, 0 4px) ); min-width: 0px; } Tried to modify the CSS for the conditional card. But I am not so familiar with CSS. So without success until now.

[boheme61]

ok, yes i guess the “button-card” match the size of your Icon

What do you mean “in developer tools of a browser” ? , work in developer tools, but not when applied to “View” ? or

[boheme61]

lol, i don’t have these concerns, i want my “Centered”

but as you like "empty row, 1,2,3 or more (entities) depending on State, maybe you are looking for auto-entities-card (horizontal add)

GitHub - thomasloven/lovelace-auto-entities: 🔹Automatically populate the...

[loeffelpan]

I would like to use card-mod-card: to apply styles to any of my cards.
But I can’t figure it out where to place that style code.

I tried this (top level of the dashboard - doesn’t work):

title: Dashboard
card-mod-card: |
  ha-card .card-header {
    font-size: 1.2em;
    font-weight: var(--mcg-title-font-weight, 500);
    max-height: 1.4em;
    min-height: 1.4em;
    opacity: 0.65;
    padding: 0px 16px 16px;
  }
views:
   [...]

And this (inside one view - doesn’t work, too):

title: Dashboard
views:
  - icon: mdi:home-battery
    card-mod-card: |
      ha-card .card-header {
        font-size: 1.2em;
        font-weight: var(--mcg-title-font-weight, 500);
        max-height: 1.4em;
        min-height: 1.4em;
        opacity: 0.65;
        padding: 0px 16px 16px;
      }
    cards:
       [...]

What I am doing wrong?

EDIT: Same style code in a single card with style: works.

[parautenbach (Pieter Rautenbach)]

You can’t use card-mod like that. You have to apply it directly to cards. Anchors could help reduce the duplication. But, I think this is more towards themes.

If you’d like to make global changes, there is a way to set theme overrides: https://gist.github.com/thomasloven/2a37152725c582fec4420ecedb65ebe3.

Also see:

• Rounded corners in every theme - #6 by DavidFW1960
• https://github.com/parautenbach/Home-Automation/blob/d2be90724ad372b489091f643748351a9e3f2dff/home_assistant/www/custom.js

[Mariusthvdb (Marius)]

modding the somewhat unique styled custom:browser-player,

I made this:

  - type: custom:browser-player
    card_mod:
      style: |
        ha-card {
          height: 48px;
        }
        .card-content {
          padding-top: 0px;
          padding-bottom: 0px;
        }
        .device-id {
          padding-left: 20px;
          position: absolute;
          left: 0%;
          bottom: 0%;
        }

appear like

and gives it the same size as my headers and menu bars.

I couldn’t move the device-id with other styling elements though, so maybe anyone here could have a look at the options?

think I will try to get the player tools (icon slider icon) to use more width of the card too, but I cant manage, even with:

        .card-content {
          padding-top: 0px;
          padding-bottom: 0px;
          justify-content: space-between;
          margin: 0px -16px;
        }

which shows a double card-content in inspector:

and clears the justify-content by itself…

Changing the top .card-content to space-between,

results in

which is more like it. However, how to get these 2 to work together in real life Lovelace…
thanks!

[boheme61]

@Mariusthvdb

think I will try to get the player tools (icon slider icon) to use more width of the card too, but I cant manage, even with:

I don’t have “media_player” and couldn’t find such “custom: browser_player” in hacs,(so i don’'t know whether it’s actually just 1 row, or 3 column.)

… but maybe you could try something like this:

        ha-slider {
          max-width: none;
          min-width: 100px;
          width: 100%;

and maybe “apply”

          flex-shrink: 100;

to the other 2 objects

[Mariusthvdb (Marius)]

thx, ill have a look. fyi, this card is provided by the browser-mod CC. If you have that, and have it make a media_player, you can use it like above.

[boheme61]

ok, thx , i did looked at browser-mod and mini-player , as i only need a “simple” player for “streaming-channels” , but your top-menu gave me more ideas for automation’s, i.e wakeup, cast

[loeffelpan]

Thanks for clarification.
So card-mod-{thing} is only for theming?
And this class-thing mentioned here, too?

I’ll try with anchors.

[Mariusthvdb (Marius)]

I had these .card-header {} mods in all of my cards, in 2 versions (with and without bottom margin) so the caused some serious repetition. Top card got the &header anchor, and all cards below that re-used it via *header. Very easy.

  - type: entities
    title: First card
    card_mod: &header_no_margin
      style: |
        .card-header {
          background-color: var(--background-color-off);
          color: var(--text-color-off);
          padding-top: 0px;
          padding-bottom: 0px;
          /* margin: 0px 0px 16px 0px; */
        }

  - type: entities
    title: Next card
    card_mod: *header_no_margin

However, I recently switched to creating a class in my card-mod-themes and now only set a class on the cards (and repeat those with anchors, which saves yet another line

have a look here for the class creation : https://gist.github.com/Mariusthvdb/9069c8c4dcad6324035a679244bbfdf1#file-themes_card_mod-yaml-L64

use them in the views:

type: entities
title: Audio settings
card_mod:
  class: class-header-margin

[jonochocki]

Hey everyone! Reaching out for some help here styling a card.
I’ve worked with card-mod before but struggling with styling the Mushroom Person card - if anyone is familiar with the Mushroom project.

My goal is to change the width/height of the div.container holding the entity picture.

Ive tried using Card-mod-helper. Below is the JS path to the div.container.

document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > vertical-layout").shadowRoot.querySelector("#columns > div > hui-horizontal-stack-card:nth-child(3)").shadowRoot.querySelector("#root > mushroom-person-card:nth-child(1)").shadowRoot.querySelector("mushroom-card > div > mushroom-state-item > mushroom-shape-avatar").shadowRoot.querySelector("div")

Any ideas? My goal is to change the container width/height to 75px - instead of 42px.

Thanks!

[parautenbach (Pieter Rautenbach)]

Are you referring to this?

thomasloven/lovelace-card-mod/blob/9748f1cb43e5db64b3bc7c2bfcaf6ed22ee50e9f/README-themes.md

If so, I haven’t used that feature, so I won’t be able to help with that, sorry. Just looking at the docs, there is a strong emphasis on where those themed definitions should be added, and that is not under a dashboard view.

[Ildar_Gabdullin]

@e-raser

@e-raser

How to set a custom width?

Check this decluttering template as an example:

  decl_horizontal_stack:
    default:
      - VALUE_WIDTH_1: 50%
      - VALUE_OVERFLOW_VISIBLE: true
      - OBJ_KEEP:
          background: false
          box_shadow: false
          margin: false
          outer_padding: false
          border_radius: false
    card:
      type: custom:stack-in-card
      keep: '[[OBJ_KEEP]]'
      mode: horizontal
      cards: '[[CARDS]]'
      card_mod:
        style:
          hui-horizontal-stack-card $: |
            div#root > :first-child {
              width: [[VALUE_WIDTH_1]];
              flex: auto; 
            }
            div#root > :last-child {
              width: calc(100% - [[VALUE_WIDTH_1]]);
              flex: auto; 
            }
          .: |
            ha-card {
              box-shadow: none;
              {% if [[VALUE_OVERFLOW_VISIBLE]] == true %}
              overflow: visible !important;
              {% endif %}
            }

Using the template:

type: vertical-stack
cards:
  - type: custom:decluttering-card
    template: decl_horizontal_stack
    variables:
      - CARDS: &ref_cards
          - type: entities
            entities:
              - entity: sensor.cleargrass_1_temperature
                name: Indoor
          - type: custom:bar-card
            entities:
              - entity: input_number.test_level_1
            positions:
              icon: 'off'
              name: 'off'
  - type: custom:decluttering-card
    template: decl_horizontal_stack
    variables:
      - CARDS: *ref_cards
      - VALUE_WIDTH_1: 60%
  - type: custom:decluttering-card
    template: decl_horizontal_stack
    variables:
      - CARDS: *ref_cards
      - VALUE_WIDTH_1: 70%
  - type: custom:decluttering-card
    template: decl_horizontal_stack
    variables:
      - CARDS:
          - type: entities
            entities:
              - entity: sun.sun
              - entity: sun.sun
              - entity: sun.sun
          - type: custom:mini-graph-card
            entities:
              - entity: sensor.cleargrass_1_co2
                name: CO2
            height: 250
            show:
              state: true
              name: true
              icon: false
              labels: false
              points: false
      - VALUE_WIDTH_1: 65%
      - OBJ_KEEP:
          background: false
          box_shadow: true
          margin: false
          outer_padding: false
          border_radius: false
  - type: entities
    entities:
      - sun.sun
      - type: custom:decluttering-card
        template: decl_horizontal_stack
        variables:
          - CARDS:
              - type: custom:hui-element
                row_type: sensor-entity
                entity: sensor.cleargrass_1_temperature
                name: Indoor
              - type: custom:slider-entity-row
                entity: input_number.test_number
                full_row: true
          - VALUE_WIDTH_1: 40%
      - entity: sensor.cleargrass_1_co2

Surely the template does not cover all possible needs. At least it gives you an example of customizing a width.

[boheme61]

@Mariusthvdb

I couldn’t move the device-id with other styling elements though, so maybe anyone here could have a look at the options?

In another card i used, i didn’t wanted a name, and with name: false i got the entity-name instead(how funny is that) … i went to Configuration/entities, gave the entity a (.) dot … as name, i know i doesn’t move/remove it , but now it’s only a tiny dot, i hardly see with my old eyes and dirty glasses
… ahhh i just got another idea … write whatever i want, style the text same color as background