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

Thanks so much for your help and patience. You were right. I changed the two colors below in my custom theme… that did the trick…

card-background-color: rgba(28, 28, 28, .9)  #<-- directly affected the drop-down menu background color.
ha-card-background: rgba(115, 115, 115, 0.1)

Is there a way to use card-mod for text-divider-row?

The text below is what I have so far. I’m not very familiar with CSS and the variables to use for different cards.

type: custom:text-divider-row
text: Smoke and CO Detectors
card_mod:
  style: |
    :host { 
    --text-divider-font-size: 28px !important;
    }

Thanks!

So, looking at the page source for that page, it is Javascript returning the data. Not an html table. I don’t believe you can do that.

It has been years since I had to deal with this. I am sure someone will correct me if something has changed.

Hi,
Is anyone aware if it’s possible to add a gradient fill to a Statistics Graph Card?

It’s possible to change the color of the graph by using this:

    card_mod:
      style: |
        ha-card {
          --graph-color-1: #5F03F2;
          --graph-color-2: #1CE222;
          --graph-color-3: #FF9E13;
        }

But is there any way to add a gradient fill for the graphs itself?

No any possible way)))

Starting point:
1st post - link at the bottom - text-divider-row

Thanks a lot for the great examples and documentation. I’m really happy with my ‘compact’ energy-distribution card and stack:

(Left the apex chart out of the code below)

type: vertical-stack
cards:
  - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 60% 40%
      margin: 0px 0px 0px 0px
    cards:
      - type: energy-distribution
        link_dashboard: false
        card_mod:
          style: |
            ha-card {
              height: 375px;
            }
            .spacer {
              display: none;
            }
            .row {
              justify-content: center !important;
            }
            .circle-container.solar {
              display: flex;
              position: absolute;
              top: 10px
            }
            .circle-container.grid {
              display: flex;
              position: absolute;
              top: 145px;
              left: 18px;
            }
            .circle-container.grid span.label {
              display: flex !important;
              position: relative !important;
              top: -100px;
            }
            .lines.high {
              display: flex;
              position: absolute;
              top: 110px;
            }
            .circle-container.home {
              display: flex;
              position: absolute;
              top: 145px;
              right: 18px;
            }
            .circle-container.gas {
              display: flex;
              position: absolute;
              top: 235px;
              left: 14px;
            }
            .circle-container.gas span.label {
              display: flex !important;
              position: relative !important;
              top: 100px;
            }
            .circle-container.water {
              display: flex !important;
              position: absolute !important;
              top: 255px !important;
              right: 14px;
            }
            .circle-container.gas svg {
              display: none;
            }
            .circle-container.water svg {
              display: none;
            }
      - type: vertical-stack
        cards:
          - type: energy-grid-neutrality-gauge
            card_mod:
              style: |
                .name {
                  overflow: hidden;
                  max-width: 0ch;
                  white-space: nowrap;
                }
          - type: custom:mod-card
            card:
              type: markdown
              content: Net grid
              card_mod:
                style: |
                  ha-card {
                    background: none;
                  }
                  ha-markdown {
                    padding: 0px !important;
                    display: flex;
                    justify-content: center;
                  }
            card_mod:
              style: |
                :host {
                  top: -35px;
                  position: relative;
                  height: 0px !important;
                  margin: 0px !important;
                }
          - type: energy-solar-consumed-gauge
            card_mod:
              style: |
                .name {
                  overflow: hidden;
                  max-width: 0ch;
                  white-space: nowrap;
                }
          - type: custom:mod-card
            card:
              type: markdown
              content: Solar-consumed
              card_mod:
                style: |
                  ha-card {
                    background: none;
                  }
                  ha-markdown {
                    padding: 0px !important;
                    display: flex;
                    justify-content: center;
                  }
            card_mod:
              style: |
                :host {
                  top: -35px;
                  position: relative;
                  height: 0px !important;
                  margin: 0px !important;
                }
          - type: energy-self-sufficiency-gauge
            card_mod:
              style: |
                .name {
                  overflow: hidden;
                  max-width: 0ch;
                  white-space: nowrap;
                }
          - type: custom:mod-card
            card:
              type: markdown
              content: Self-suffiency
              card_mod:
                style: |
                  ha-card {
                    background: none;
                  }
                  ha-markdown {
                    padding: 0px !important;
                    display: flex;
                    justify-content: center;
                  }
            card_mod:
              style: |
                :host {
                  top: -35px;
                  position: relative;
                  height: 0px !important;
                }

looks very cool. thanks for sharing.
stolen some code from you here but i am not able to put the energy lines and the “Home” to their place.
What could be wrong with my code?

thanks in advance

type: vertical-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:layout-card
        layout_type: grid
        layout:
          grid-template-columns: 65% 36%
          margin: 0px px px 0px
        cards:
          - type: energy-distribution
            link_dashboard: false
            card_mod:
              style: |
                ha-card {
                  height: 375px;
                }
                .spacer {
                  display: none;
                }
                .row {
                  justify-content: center !important;
                }
                .circle-container.solar {
                  display: flex;
                  position: absolute;
                  top: 10px
                }
                .circle-container.grid {
                  display: flex;
                  position: absolute;
                  top: 145px;
                  left: 18px;
                }
                .circle-container.grid span.label {
                  display: flex !important;
                  position: relative !important;
                  top: -100px;
                }
                .lines.high {
                  display: flex;
                  position: absolute;
                  top: 110px;
                }
                .circle-container.home {
                  display: flex;
                  position: absolute;
                  top: 145px;
                  right: 18px;
                }
          - type: vertical-stack
            cards:
              - type: energy-grid-neutrality-gauge
                card_mod:
                  style: |
                    .name {
                      overflow: hidden;
                      max-width: 0ch;
                      white-space: nowrap;
                    }
              - type: custom:mod-card
                card:
                  type: markdown
                  content: Net grid
                  card_mod:
                    style: |
                      ha-card {
                        background: none;
                      }
                      ha-markdown {
                        padding: 0px !important;
                        display: flex;
                        justify-content: center;
                      }
                card_mod:
                  style: |
                    :host {
                      top: -35px;
                      position: relative;
                      height: 0px !important;
                      margin: 0px !important;
                    }
              - type: energy-solar-consumed-gauge
                card_mod:
                  style: |
                    .name {
                      overflow: hidden;
                      max-width: 0ch;
                      white-space: nowrap;
                    }
              - type: custom:mod-card
                card:
                  type: markdown
                  content: Solar-consumed
                  card_mod:
                    style: |
                      ha-card {
                        background: none;
                      }
                      ha-markdown {
                        padding: 0px !important;
                        display: flex;
                        justify-content: center;
                      }
                card_mod:
                  style: |
                    :host {
                      top: -35px;
                      position: relative;
                      height: 0px !important;
                      margin: 0px !important;
                    }
              - type: energy-self-sufficiency-gauge
                card_mod:
                  style: |
                    .name {
                      overflow: hidden;
                      max-width: 0ch;
                      white-space: nowrap;
                    }
              - type: custom:mod-card
                card:
                  type: markdown
                  content: Self-suffiency
                  card_mod:
                    style: |
                      ha-card {
                        background: none;
                      }
                      ha-markdown {
                        padding: 0px !important;
                        display: flex;
                        justify-content: center;
                      }
                card_mod:
                  style: |
                    :host {
                      top: -35px;
                      position: relative;
                      height: 0px !important;
                    }

I see you are using a nested vertical-stack, perhaps this gets in the way. Otherwise, try to suffix !important

i’ve copied(copy/paste) the exact code shared by you but no positive effect.
Removed also the “!Importance” option from code.

The view settings were changed from Masonry to Grid/vertical/horizontal layout but same effect.
Sadly as i liked it much and wanted on my dashboard.

What I meant is that you have (1 extra ‘level’ of vertical-stack):

type: vertical-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:layout-card
      ...

While I have:

type: vertical-stack
cards:
  - type: custom:layout-card
  ...

Second, I actually meant to suffix !important to the .lines.high class, like:

            .lines.high {
              display: flex !important;
              position: absolute !important;
              top: 110px !important;
            }

You could try whether you need !important for all attributes or not. Otherwise I’m not sure whether I can help you :sweat_smile:

i’ve took the exact code from original post and checked that i have exactly begininning code mentioned by you above but no luck :slight_smile:
nevertheless, thanks for work and sharing! :+1:

Hi,

I’m trying to set the mushroom template card border radius to 40px.

I have this card (which is animated so that the “Fan” image spins when the state is ON and it stops when the state is OFF):

type: custom:mushroom-template-card
primary: Fan
secondary: |-
  {% if states(config.entity)=='on' %}
    On
  {% else %}
    Off
  {% endif %}
icon: ''
icon_color: ''
entity: switch.fan
tap_action:
  action: toggle
hold_action:
  action: none
double_tap_action:
  action: none
badge_color: ''
badge_icon: ''
picture: |-
  {% if states(config.entity)=='on' %}
    /local/Custom_Icons/Mushroom/V0/FAN_ON.png
  {% else %}
    /local/Custom_Icons/Mushroom/V0/FAN_OFF.png
  {% endif %}
card_mod:
  style:
    mushroom-shape-avatar$: |
      img {
        {% if states(config.entity)=='on' %}
          animation: spin 1s linear infinite;
        {% else %}

        {% endif %}
      }
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }

And I have this piece of code which I’m using in all other mushroom template cards and it’s working:

    ha-card {
      border-radius: 40px;
    }

This is how the card is at the moment:
image

This is how all my other cards look and what I would like it to be:
image

Please help me merge the two pieces of code so that the “Fan” card borders are rounded.

Thank-you

First post, link at the bottom, link to topic " Combining “$:” styles and “not $:” styles"

2 Likes

It works! (I know it shouldn’t be a surprise but for someone who can’t code like me it’s an achievement :smiley:)

card_mod:
  style:
    mushroom-shape-avatar$: |
      img {
        {% if states(config.entity)=='on' %}
          animation: spin 1s linear infinite;
        {% else %}

        {% endif %}
      }
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    .: |
      ha-card {
      border-radius: 40px;
      }

image
Thank you!

U are welcome. And esp. such achievements without giving the final solution directly will help you in the future. :wink:

1 Like

Example for customizing a color printer card:
posted here

image

image

Actually, this is an example of adding an outline for an icon, like here:
image

1 Like

havent really done much in the way of CSS modding before now but think ive found someting that my use case might require it

The new Tile Alarm card has a number of baked-in modes…of which I am using Home, Away, Custom (night) and Disarmed

it currently looks like this by default

I’d like to change the colour and icon on a couple of states…so right now when Home is set it is green, and that is all good…but the image above is showing in night mode which I’d like in blue with a crescent moon icon on the sheil.

Away/Armed is the correct icon but Id like to change it to red…

Is this even something I can do with CSS…I’m thinking yes, but I’d be guessing at how I’d even get that done.

Did manage to change the background colour pretty easily but to impact individual elements of a card seems to be a bit more complex…happy to read up and play if someone can point me in the right direction…TIA

Hi all, I’m trying to stylize the person badges…
1 2

I want to colorize the badges depending on state (home, away, etc) like example 1 (left one), with the badge container border in color (lime = home, orange = away, etc), but the best I can do is like example 2 (right one), gray container border, only the circular border with color. Don’t know how integrate “ha-label-badge:” into the “if” states.

Here is my code of example 1 and 2 , any help is appreciated. Thx!

  - entity: person.lainol
    name: Lainol
    style:
      ha-state-label-badge:
        $:
          ha-label-badge:
            $: |
              .badge-container .label-badge {
                border-color: lime;
                background-color: 1c1c1c;
               }
              .badge-container .label-badge .value {
                color: lime;
               }
              .badge-container .label-badge .label span {
                border-style: solid;
                border-color: lime;
                color: white;
                background-color: #1c1c1c;
               }
              .badge-container .title {
                color: white;
               }
  - entity: person.lainol
    name: Lainol
    style:
      ha-state-label-badge:
        $:
          ha-label-badge:
            $: |
              .badge-container .label-badge .label span {
                border-style: solid;
                border-color: gray;
                background-color: #1c1c1c;
               }          
            .: |
              :host {
                {% if is_state('person.lainol','home') %} --label-badge-red: lime;
                {% else %} --label-badge-red: red; 
                {% endif %}
                }

Why do you put it here?
It is misplaced.
Use examples from “1st post → link at the bottom → badges” as a starting point.
When you build a proper DOM path - then you will see how to “integrate “ha-label-badge:” into the “if” states”.