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

Share your Projects! Dashboards & Frontend
3050

Im trying my best to find some kind of documentation on how to change the background color of the calendar card, and I have tried my best to figure it out myself. I am trying to change the background of the grid itsself, the card I did manage to change. How can I achieve this?

Update: I figured it out, again thanks to the knowledge shared in this forum;

style:
  .: |
    ha-card {
      background-color: rgba(0,0,0,0.1);
      width: 1425px;
      margin:auto;
      position: absolute; 
      left: 0;
      right: 0;
      border: none;
      box-shadow: none;
      border-radius: 20px;
    } 
    ha-full-calendar {
      min-height: 700px !important;
    } 
    div.header {
      padding-top: 0px;
    }
  ha-full-calendar:  (<- this bit)
    $: |
      #calendar {
        background-color: rgba(0,0,0,0.1) !important;
      }
3051

@Ildar_Gabdullin :smiley: I was going through your awesome examples and wanted to try and use some of them for a bunch of button cards, but it seems transferal from entity to button is not straight forward.

I wanted to create buttons with transparent background (works, although they seem to have a very slight border visibile) and with state dependent icon color with default white.
So by default the icon of the lights should be white and then switch to yellow when turned on.

But

        ha-state-icon:
          $: |
            ha-svg-icon {
              color: white;
            }

Does not seem to work.

      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: light.main_light_lr
        icon: mdi:ceiling-light-outline
        icon_height: 25px
        card_mod:
          style: |
            ha-card {
              background-color: transparent ;
            }
            ha-state-icon:
              $: |
                ha-svg-icon {
                  color: white;
                }
3052

Hi, Friends how to change 1 and 2 cards width ?

There is no way I can do that :frowning:

image

type: custom:vertical-stack-in-card
cards:

  • type: horizontal-stack
    cards:
    • type: custom:mushroom-template-card
      secondary: null
      icon: mdi:sofa
      icon_color: grey
      multiline_secondary: true
      primary: Svetainė
      card_mod: null
      style: |
      ha-card {
      box-shadow: 1px 1px;
      }
    • type: vertical-stack
      cards:
      • type: custom:button-card
        entity: sensor.oro_daviklis_svetaine_temperature
        show_name: false
        show_icon: true
        style: |
        ha-card {
        box-shadow: 1px 1px;
        }
        styles:
        grid:
        - grid-template-areas: ‘“n i” “s i” “l i”’
        - grid-template-columns: 1fr 30%
        img_cell:
        • justify-content: start
        • align-items: start
        • margin: none

alignment: center

3053

At the moment, you’ve got your CSS path slightly wrong, and are mixing elements from the top level (ha-card) with elements that are contained within shadow-roots slightly incorrectly (anything involving $: basically). In my experience, anything with a shadow-root needs to come first essentially.

This works for me, although the white color won’t survive the light being turned on, as by default it applies a fliter derived from the light’s current brightness/color. I see you also want to change that behaviour too, but I’m afraid that’s a bit beyond me.

  - type: button
    card_mod:
      style:
        ha-state-icon:
          $: |
            ha-icon {
              color: white;
            }
        .: |
          ha-card {
            background-color: transparent;
            box-shadow: none;
          }

I think the remaining visible border you are seeing is the box-shadow element, so I’ve added removing that too.

2 Likes
3054
  1. Use a proper formatting for a code. Posting a code like you did is not a good practice and does not help you to get answers.
  2. You are using custom:vertical-stack-in-card. Try to adapt (not just “copy/paste”) styles for conventional horizontal-stack or custom:stack-in-card described here: 1st post → link at the bottom.
3055

Styling a Logbook card:

I have some entities with entity_picture attribute specified.
By default these entities are shown in cards (like Entities card, Glance card, multiple-entity-row) with circular images:
image
It is possible to show it like this:
image
Described here for the Entities card; for other cards it is similar.

Here is how to do it with Logbook card:
image

type: logbook
entities:
  - person.ildar
hours_to_show: 24
card_mod:
  style:
    .content ha-logbook $ ha-logbook-renderer $: |
      .entry-container .entry state-badge {
        border-radius: 0px;
      }

Here the border-radius is zero; you may set it to 10% (as it was shown in the example for Entities card) to get rounded corners.

If needed, this code may be added to a card-mod-theme to apply this style for all Logbook cards:

  card-mod-card-yaml: |
    .content ha-logbook $ ha-logbook-renderer $: |
      .entry-container .entry state-badge {
        border-radius: 10%;
      }
    .: |
      ..... other styles

Even if some entity does not have an entity_picture attribute specified, applying this style will not harm.

As for styling the Logbook panel (available from the left sidebar) - have no idea how to achieve this since I do not know how to access “ha-panel-xxx” stuff in card-mod-themes. - check an Update below about using an external js module.

And some more styles which someone may find useful:
image

type: logbook
entities:
  - person.ildar
hours_to_show: 24
card_mod:
  style:
    .content ha-logbook $ ha-logbook-renderer $: |
      .entry-container .entry state-badge {
        border-radius: 0px;
      }
      .entry-container .entry .message-relative_time .message {
        color: red;
      }
      .entry-container .entry .message-relative_time .secondary {
        color: cyan;
      }
      .entry-container .entry {
        --divider-color: orange;
      }
      .entry-container h4.date {
        color: magenta;
      }
    .: |
      ha-logbook {
        height: 250px !important;
      }

Updated 02.06.22 due to changes in HA 2022.6.
Update 30.09.22: check this post about styling images by using an external js module.

More examples.

1 Like
3056

That is perfect, thank you! It works.
I actually did not really need to change the color when the light is turned on as yellow would be my first choise. I was just contemplating this to learn how to do so (in case I ever want this to be an alarm button or something).

I was also playing around with the custom:button-card which allows such stylings. But even there the box-shadow command is needed.

I enjoy playing with cards but it is fascinating how many problems one can face when you really try to get it right and not just get it done :slight_smile:

3057

Hi ! Did you achieve what you needed?

3058

Yes, thank you!

3059

I have a new question:
Is it possible that card-mod messes with the scaling? Or is it possible to use card-mod to fix scaling?

I am trying everything I can to get a layout that looks the same on all devices and all dashboard layouts. Something that to me would be “normal” behaviour. But it seems impossible.

I have tried grid and horizontal stack and custom:button-card. And none seem to work properly.

I am stating everything in relative sizes and coordinates so there should be no scaling or rounding issues.

Here is the code:

type: picture-elements
elements:
  - type: custom:button-card
    tap_action:
      action: navigate
      navigation_path: /lovelace-home/living-room
    style:
      bottom: 0%
      left: 0%
      width: 1000%
      height: 100%
      transform: none
    styles:
      card:
        - background-color: rgba(0,0,0,0)
        - box-shadow: none
  - type: image
    image: /local/images/black_50.png
    style:
      bottom: 0%
      left: 0%
      width: 100%
      height: 15%
      transform: none
      background-color: rgba(0, 0, 0, 0.5)
  - type: custom:hui-element
    style:
      bottom: 0%
      left: 25%
      transform: none
    card_type: grid
    square: false
    columns: 5
    cards:
      - type: custom:slider-entity-row
        entity: climate.eq_3_living_room
        name: Living Room
        full_row: true
        min: 4.5
        max: 23
        step: 0.5
        hide_state: false
        card_mod:
          style:
            ha-state-icon:
              $: |
                ha-icon {
                  color: white;
                }
            .: |
              ha-card {
                background-color: transparent;
                box-shadow: none;
              }
      - type: button
        show_name: false
        show_icon: false
        tap_action:
          action: none
        hold_action:
          action: none
        entity: sensor.eq_3_battery_living_room
        show_state: true
        card_mod:
          style:
            ha-state-icon:
              $: |
                ha-icon {
                  color: white;
                }
            .: |
              ha-card {
                background-color: transparent;
                box-shadow: none;
                text-transform: lowercase
              }
      - type: custom:button-card
        color-type: blank
        styles:
          card:
            - opacity: 0
      - type: button
        show_name: false
        show_icon: true
        tap_action:
          action: toggle
        entity: light.main_light_lr
        icon: mdi:ceiling-light-outline
        card_mod:
          style:
            ha-state-icon:
              $: |
                ha-icon {
                  color: white;
                }
            .: |
              ha-card {
                background-color: transparent;
                box-shadow: none;
              }
      - type: button
        show_name: false
        show_icon: true
        tap_action:
          action: toggle
        entity: light.ambient_light_lr
        icon: mdi:ceiling-light-multiple-outline
        card_mod:
          style:
            ha-state-icon:
              $: |
                ha-icon {
                  color: white;
                }
            .: |
              ha-card {
                background-color: transparent;
                box-shadow: none;
              }
image: /local/images/living_room_16_9.jpg

And here is the problem:
Masonry looks good
image

The wanted Panel (1 card) looks terrible

image
image1687×245 52 KB

3060

I managed to achieve a proper scaling on a PARTICULAR device with a FIXED SCREENSIZE.
Any resizing on Chrome on PC - everything becomes misaligned.
Any checks on iPhone, iPad - everything becomes misaligned.
End ((((.

3061

But I did not mean that I am scaling in the card. I am not. I meant that HA is scaling the card when I select Panel (1 Card) as dashboard layout.

Or is the problem not related to the code I use to create the card and picture elements is simply completely broken and essentially useless? Because no way anybody has only one resolution and screen size on all devices :smiley:

3062

I will try to test your code in my setup then.

1 Like
3063

Seems like your not using 1 Card, but Cards in Card.

… only First card is “rendered” , thou i agree that Panel-View is a-bit “ODD” and you can’t use it like you are trying, as every elements have to be placed in the first card in “relations” high/width ( most likely using %), for it to be “responsive” … you also seems to show 2 different “screen-size” in your example, and talking about same on All devices, does that means on a Phone, as-well on a 65Inns 4K TV ? , or whats your preferences ?, i tend to use Masonry in most Views, thou Horizontal on Floor-Plan (for obvious reasons) … i have very hard to see how you would get “Same” view on a Phone, Horizontal vs Vertical “ipad/touchpad” etc.

3064

@boheme61 :
But should it not be “one card” from the point of view of HA dashboards? It is a picture-elements card. What is inside should not matter, should it? After all, all cards in the picture-elements are in relative position to the picture-elements card. So they should move proportional to the picture-elements card.

But what I am noticing: is the problem maybe not the cards in card but the fact that for the lights the icon height is automatically adjusted to 100% whereas for the slider and the battery button this is maybe not the case?
Does anybody know how to make the slider and battery button always stay 100% height? Was unable to far to figure it out myself -.-

And a half-related note:
I have been trying to adjust the slider here and in other cards and somehow the styling does not seem to be applied.
Here a shorter example where I am trying to adjust the background

type: custom:slider-entity-row
entity: climate.eq_3_living_room
name: Living Room
min: 4.5
max: 23
step: 0.5
hide_state: false
card_mod:
  style: |
    ha-card {
      background-color: white ;
    }

The background of the slider does not change (goal is to make it look like entities inside the horizontal stack… seems like slider by default has black background):

image
image875×367 18.9 KB

Small bonus question:
the state of sensor.eq_3_battery_living_room is capitalized and I can change it to lowercase. But I cannot figure out how to change the first letter.
It should be something like ha-card:first-letter and then capitalize, but that is not working.

       card_mod:
         style: |
             ha-card {
               text-transform: lowercase
             }
3065

Yes , those are icons, in a Button-Card, and suppose to act that way, so what ever you “use” … i.e. custom:slider-entity-row, is suppose to be handled according to the Entity/Card-Specifications( .js ), and maybe you can use card-mod or additional CSS for that ( Common entities row ), other-vice below is the source-code , where you can see how it’s written (Suppose to act)

All Cards are different, written by someone, and you just have to learn how they “work” … or not work :slight_smile:
BTW. the pic you are showing, seems like having 2 cards within “something” ? , are you just trying to make it even more impossible to understand, by Adding “horizontal stack” …which are not “visible” in you above example ?? , and showing a pic of config, and not the “view” also says nothing, beside you are trying to add card-mod to custom:slider-entity-row, which is not a Card, but add-on to Entities-Card … is your “View” back-ground by any chance Black ?, as an entity-row don’t colorize a Card

3066

Sorry, the pic I was showing was a vertical stack with the slider in the first card and entity card with auto-entities in the second.
I only posted the slider card code as I was only trying to adjust that one.
But you are of course right, I had the card mod on the level of the auto-entities instead of the entities card.

I will try to check out the slider code.

But for the normal button card, should it not also stay az 100% height? Or is this only when it contains an icon and no longer works when the button only shows a state and no icon?

3067

I don’t have/use button card, but customized, but yes i believe the “size” depends on the size of the icon, or available space, if in fixed grid, or similar, ( state/text and icon are 2 different elements), beside 100% height of what ? … and yes the background-mod should be “higher” up, on a HA-Card, if not set in your Themes
… a Tip would be , that you set a tmp border n border color, while your working with grid and vertical/horizontal stack, until you know how they behave, in case you wonder why the “Slider” seems moving up, and in from the Left, … seems like you set that on the - type: custom:hui-element / Left 25% , and now you say you use a Vertical-stack in 1 of the Grid-Columns (what affect will that give ?) or you don’t have this card in your first example ? … also i don’t see any entities nor auto-entities-card anywhere ?

3068

Should maybe be:

columns: 5
cards:
   - type: entities
     entities:
        - entity: climate.eq_3_living_room
          type: custom:slider-entity-row

That could make a difference on the rendering

3069

Sorry for the confusion. As mentioned briefly, that is a second usage example that shows the styling problem with slider. It is being used in a different card in a different dashboard. There I use a vertical stack.

In the display problem I use picture-elements with a grid or horizontal stack. The grid/stack is the only workaround I could find that allows me to keep the different cards more or less aligned to each other. If I just set the relative positions, then they get messed up even when just switching from PC to mobile phone. Grid reduces this to a minimum.

The height in my opinion should in grid and stack cards always be 100% of the “cell”. So essentially a grid or a stack is nothing else than a table. And this table has one row and x columns. The row height is defined by the largest card (id defined manually) or by the system automatically (if no sizes are defined in absolute values). In my example it is shown that the stock button card is the largest card in those “cells” if an icon is displayed because it uses 100% of the available height.

It should also be mentioned that the height is limited by the amount of columns.
Since the picture elements card has a given width (defined by the used image), the columns are spread evenly in the width of the image. The height os the defined by the height of the largrst card (here button) and since button has a defined aspect ratio, the height is limited.
So the button card’s width is limited by the column width which is limited by the even spreading inside a boundary (image).
The height in turn is limited by the multiplication of (restricted) width with aspect ratio of card.

Only problem: Only button cards with icons seem to automatically take up 100% of the space they are given within such a “cell”.

P.S.: Maybe for additional explanation, I shift the grid by 25% from left because otherwise on mobile devices the slider gets located directly on the left border and looks weird. So I push it inwards a bit to prevent “content” from being placed right at the edge of the parent car (picture-elements).