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

Aaaah. Yes. Was not aware, that it only works with card_mod. Even without this completely, I got the errors. With card_mod and new notation, it is working. Great.

Update: No, not the root cause. It worked once. Back in edit mode, the errors are there again.

O.k. If I use something different than true or false, e.g. a or tru or ā€¦ it is working without errors at the moment.

It was clearly specified ā€œundocumented featureā€ - i.e. probably it is not supposed to work and it may stop working one day.
Here is a picture from my setup:

You can see that:

  • the style works
  • there are errors

I bet that if you are in yaml-mode and create a card with this code then the card will work.
These are Editor issues. The Editor performs syntax checks and gives errors if smth is not as per syntax rules. But as we can see these wrong code works))).

Hi everybody
I have a few RGB downlighters on my verandah that are working great and I would like to display (not change) their status as a bunch of icons only in Lovelace. The native Button card works well and it updates the colour of the icon to match the colour of the light. My problem is I need to remove the background and the shadow. My CSS skills are non-existent, so I was unable to apply Card-mod to the Button card. Just to be clear, I tried this on the vanilla Lovelace Button card. Romriderā€™s custom button card is incredible, but it doesnā€™t follow the colour of the light, so it wonā€™t work for my application.

The closest I could get using the Button card was to stack them in the ā€œcustom:vertical-stack-in-cardā€, but it still doesnā€™t remove all the shadows. It looks like this:
image
and the Yaml looks like this (up to the first light):

          - type: custom:vertical-stack-in-card
            horizontal: true          
            cards:
              - entity: light.verandah
                type: 'custom:button-card'          
                size: 60px               
                show_name: false 
                tap_action:
                  action: toggle  
              - type: custom:vertical-stack-in-card
                cards:
                  - type: custom:vertical-stack-in-card
                    horizontal: true
                    cards:                
                        - type: button
                          entity: light.vo2p  
                          icon_height: 30px
                          show_name: false

So as you can see, it is close, but not there.

Next stop was to use the excellent custom:paper-buttons-row. It formats beautifully, but it doesnā€™t follow the colour. I set the icon colour with a template and it looks great, but it only updates on page reloads. :frowning: I will also have to manage the colours with some more templating when the RGB attributes drop away.

image

Here is the yaml up to the first light:

          - type: custom:vertical-stack-in-card
            horizontal: true          
            cards:
              - entity: light.verandah
                type: 'custom:button-card'          
                size: 60px               
                show_name: false 
                tap_action:
                  action: toggle  
              - type: entities
                entities:
                  - type: custom:paper-buttons-row
                    buttons:
                      - - entity: light.vo2p
                          layout: icon
                          style:
                            button:
                              color: >-
                                 rgb({{(states.light.vo2p.attributes.rgb_color[0] | int)}},{{(states.light.vo2p.attributes.rgb_color[1] | int)}},{{(states.light.vo2p.attributes.rgb_color[2] | int)}})

So my question are:

  1. Is it possible to remove the background and shadow of the native Lovelace Button card with Card-mod? If it is, I would really appreciate a small example.
  2. If not, is it possible to update the card (maybe every 10 s or so)?
  3. If somebody managed to achieve this in some other way, please let me know.
  • the style works

even not this. Most of the time, this is not the case as well and I have only a greyed out card with a ircle. And you are not able to save with these errors.

But anyway, as long it is working with foo or bar or tru or whatever <> true/false, is is finefor me for now. :wink:

Did not understand you. But as long as it is fine for you - OK

Styling stack-in-card (specially for @Jens_Wymeersch):
Similar to vertical-stack:

type: 'custom:stack-in-card'
title: Some title
keep:
  background: true
  box_shadow: true
  margin: true
  outer_padding: true
  border_radius: true
cards:
  - type: entities
    entities:
      - entity: sun.sun
      - entity: sun.sun
    card_mod:
      style: |
        ha-card {
          height: 200px !important;
        }
  - type: entity
    entity: sun.sun
    card_mod:
      style: |
        ha-card {
          height: 150px !important;
        }
card_mod:
  style: |
    ha-card {
      border-style: solid;
      border-width: 5px;
      border-radius: 10px;
  
      background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
  
      --ha-card-header-color: white;
      --ha-card-header-font-size: 40px;
  
      height: 550px !important;
  
      --vertical-stack-card-margin: 0px 20px 80px 20px;
  
      --ha-card-background: rgba(50,50,50,0.3);
    }

3 Likes

Thank you for your links, it gives a lot of new ideas. I was just wondering if you were able to use the layout card nested in a stack-in-card ?

Give me an example

In essence, Iā€™m trying to create lights cards where I can change the colour without going to options. At the same time, I am trying to reduce the amount of space needed to control these lights.
The conclusion are after my research

  • the colour picker needs enough width but can be reduced in height.
  • ā€œtype : lightā€ allows me to get the brightness and the icon type to change without me coding it.
  • second, I want the individual lights to be controlled but ideally also the light group

So in essence, I thought to have each of the 5 spots to be presented first in a light type and then have the light group next to the 2 colour pickers (colour, temperature) in a 25/75 ratio.

OK, create an example card and tell what you want to style in this card, may be we can help.

1 Like

Iā€™m stuck trying to style a markdown-card and wonder if anyone has any pointersā€¦
I have some text in the markdown card that Iā€™d like to adjust font-weight and size of, I previously had this working via card-mod using;

              style:
                ha-markdown:
                  $: |
                    p {
                      font-size: 4em;
                      font-weight: 300;
                    }

however, I also need to disable box-shadow for the cardā€¦ and this is where I come unstuck, as it is outside of shadow-rootā€¦

I try this;

              style: |
                ha-card {
                  box-shadow: none;
                }
                ha-markdown:                 
                  $: |
                    p {
                      font-size: 4em;
                      font-weight: 300;
                    } 

Which disables the box-shadow, but now the font size/weight are not set correctlyā€¦

Hello,

Here is where Iā€™m at

cards:
  - type: vertical-stack
    cards:
      - type: "custom:stack-in-card"
        keep:
          background: true
          outer_padding: true
          margin: true
        modus: vertical
        triggers_update:
          - sun.sun
        cards:
          - type: vertical-stack
            cards:
              - type: horizontal-stack
                title: Master Colour Spots
                cards:
                  - type: light
                    entity: light.lamp_colour_l1_master
                    name: L1
                    icon: mdi:wall-sconce-flat
                    hold_action:
                      action: more-info
                    card_mod:
                      style: |
                        mwc-icon-button {
                            display: none;
                        }
                  - type: light
                    entity: light.lamp_colour_r1_master
                    name: R1
                    icon: mdi:wall-sconce-flat
                    hold_action:
                      action: more-info
                    card_mod:
                      style: |
                        mwc-icon-button {
                            display: none;
                        }
                  - type: light
                    entity: light.lamp_colour_l2_master
                    name: L2
                    icon: mdi:wall-sconce-flat
                    hold_action:
                      action: more-info
                    card_mod:
                      style: |
                        mwc-icon-button {
                            display: none;
                        }
                  - type: light
                    entity: light.lamp_colour_r2_master
                    name: R2
                    icon: mdi:wall-sconce-flat
                    hold_action:
                      action: more-info
                    card_mod:
                      style: |
                        mwc-icon-button {
                            display: none;
                        }
                  - type: light
                    entity: light.lamp_colour_r3_master
                    name: R3
                    icon: mdi:wall-sconce-flat
                    hold_action:
                      action: more-info
                    card_mod:
                      style: |
                        mwc-icon-button {
                            display: none;
                        }
              - type: entities
                entities:
                  - type: "custom:slider-entity-row"
                    entity: input_number.input_color
                    full_row: true
                    hide_state: true
                card_mod:
                  style: |
                    ha-card {
                      background: linear-gradient(to right, rgb(255,0,0) 0%, rgb(255,255,0) 16.6%, rgb(0,255,0) 33.2%, rgb(0,255,255) 49.8%, rgb(0,0,255) 66.4%, rgb(255,0,255) 83%, rgb(255,0,0) 100%);
                      height: 50px !important;
                    }
              - type: entities
                entities:
                  - type: "custom:slider-entity-row"
                    entity: input_number.input_color_temp
                    full_row: true
                    hide_state: true
                card_mod:
                  style: |
                    ha-card {
                      background: linear-gradient(to right, rgb(195, 209, 255) 0%, rgb(255,255,255) 50%, rgb(255, 169, 87) 100%);
                      height: 50px !important;
                    }

resulting

I would like to get the light buttons inside the stack like the rest of my buttons, example

image

code associated

            styles:
              card:
                - width: 120px
                - height: 100px
                - margin: 3px
                - padding: 5px
                - border-radius: 15px
                - background-color: var(--primary-background-color)
                - box-shadow: >
                    [[[
                      if (states['sun.sun'].state == "below_horizon")
                        return '-5px -5px 15px #2c2c2c, 5px 5px 15px #191919';
                      else if (states['sun.sun'].state == "above_horizon")
                        return '-5px -5px 15px #ffffff, 5px 5px 15px #ebebeb';
                    ]]]

which I can easy use with the custom:button-card but I have trouble getting it into the code above.
Finally, I would like to get the slider more in the middle so I can make the cards a bit smaller still.

HI Ildar, a huge post, and still I couldnā€™t find what I am looking forā€¦

using

  - type: entities
    title: Tradfri hub switch
    card_mod:
      style: |
        .card-header {
          background-color: var(--primary-color);
          margin: 0px 0px -8px 0px;
        }
    show_header_toggle: false
    entities:
      - type: custom:toggle-lock-entity-row
        entity: script.reset_ikea_hub
        secondary_info: last-triggered
      - type: divider
      - type: custom:toggle-lock-entity-row
        entity: switch.ikea_hub

I try to decrease the height of the header, but it only shifts the entities upward, and doesnt affect the coloring, resulting in:

Schermafbeelding 2021-07-21 om 22.50.07

normally I shift the entities down, to create a little gap,

  - type: entities
    title: Tradfri hub switch
    card_mod:
      style: |
        .card-header {
          background-color: var(--primary-color);
          margin: 0px 0px 16px 0px;
        }

resulting in

Schermafbeelding 2021-07-21 om 22.59.08
but I would rather decrease the header 8px

Can we do that with the same .card-header,albeit another option?

What is this?
These are not options for stack-in-card.

I still do not understand.
You gave two different cards - stack with light controls & button-card.
What exactly do you want to change?
Better to create a picture with MS Paint to explain your needs.

Hi Marius, check this:

type: horizontal-stack
cards:
  - type: entities
    title: Title
    entities:
      - sun.sun
      - sun.sun
    card_mod:
      style: |
        .card-header {
          background-color: red;
          color: white;
        }
  - type: entities
    title: Title
    entities:
      - sun.sun
      - sun.sun
    card_mod:
      style:
        div:nth-child(1):
          hui-text-entity-row:
            $: |
              hui-generic-entity-row {
                margin-top: 10px;
              }
        .: |
          .card-header {
            background-color: red;
            color: white;
          }
  - type: entities
    title: Title
    entities:
      - sun.sun
      - sun.sun
    card_mod:
      style:
        div:nth-child(1):
          hui-text-entity-row:
            $: |
              hui-generic-entity-row {
                margin-top: 10px;
              }
        .: |
          .card-header {
            background-color: red;
            color: white;
            padding-top: 0px;
            padding-bottom: 0px;
          }

ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ

1 Like

perfect!

Schermafbeelding 2021-07-21 om 23.04.55

    card_mod: &header
      style: |
        .card-header {
          background-color: var(--primary-color);
          padding-top: 0px;
          padding-bottom: 0px;
          margin: 0px 0px 16px 0px;
        }

is my new default :wink: anchor created

Great, better than my solution))

Unfortunately, only one yaml file-wide(((

1 Like

I moved on. Got an other way of getting what I wanted. Thank you.
Another question. I want to use one button card template for my lights but I would like to have for some lights a different icon. Iā€™ve been trying to use variables without success. Any idea how I can do it ?

I think this is not a card-mod issue.
Probably it may be solved by card-mod, but I think it is better to use button-card-template + use variables.

Trying to play around, the name is very overlapping, how can I set the font size?

Tried this entry but not having luck