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

[Ildar_Gabdullin]

Some (useless?) styles for history-graph - Styling a tooltip

code

  - type: history-graph
    entities:
      - entity: sun.sun
    card_mod:
      style:
        state-history-charts $:
          div :first-child $:
            ha-chart-base $: |
              .chartTooltip {
                background: lightgreen !important;
              }
              .chartTooltip .title {
                color: red;
              }
              .chartTooltip .beforeBody {
                color: magenta;
              }
              .chartTooltip li {
                color: yellow;
              }

code

  - type: history-graph
    entities:
      - entity: person.ildar
    card_mod:
      style:
        state-history-charts $:
          div :first-child $:
            ha-chart-base $: |
              .chartTooltip .beforeBody:after {
                content: "";
                background-image: url("/local/images/persons/ildar.png");
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                height: 100px;
                display: block;
              }

Note that you may place a more useful picture instead of my photo here - like a generated route “from A to B”, or a position of a person on a map ! (update: no, it is not great to show the LATEST state instead of a state for a particular time… So, we may show only same image for all time points… )

[Ildar_Gabdullin]

Restoring the old logo:

Here

---

Another method to show a legacy HA logo is here.

[stleusc]

I have a very simple problem.
I am using a grid card as my outermost card and use it as Panel (1 card).
Visually the grid card has no padding and has its own border.

I’d like to remove that.

I can simply do that by ‘wrapping’ my content in

type: custom:mod-card
style: |
  ha-card {
    padding: 8px;
    border: 0px;
  }
card:
...

But this effectively disables the visual editor saying:
“No visual editor available for type ‘custom:mod-card’.”

How can I remove the border/add padding WITHOUT custom:mod-card?
Not that I care about not using it, I just want to keep the visual editor.

Or would it be hard to support a visual editor for custom:mod-card? Does not seem to have much functionality…

[Ildar_Gabdullin]

@stleusc

But this effectively disables the visual editor saying:
“No visual editor available for type ‘custom:mod-card’.”

End of days.
You need to choose if you need visual editor or a functional UI.

[Ricks88]

Is it possible to use Card mod style inside “more-info-card”?
I am trying to remove the title/head but i can not get it done in the style:

tried :host to

[arganto]

You should address it via element and not try to address it via a class, where there is no class. In short remove the dot and try again.

Same error in ha-card.

[andyblac (Andy Blackburn)]

try:

style: |
  state-card-content { display: none }

it’s a shame that the more-info-card does not resize with other cards

[Ricks88]

How did you got a slider on 2 sides with different colors?
I also was trying to shrink the size of the thermostat, but no succes yet.

[Ricks88]

Do you have a custom thermostat card? i only get this one when using the default card:

[andyblac (Andy Blackburn)]

the ones on the left are “Better Thermostat UI” just search for it in HACS.

[Ricks88]

thanks, will find it
I found the line to resize the circle, it’s in the svg, but again, no idea how to place it as css.

[andyblac (Andy Blackburn)]

yeah, I’m hoping they update the thermostat card to this new layout.

[hiddevanbrussel]

Question i want to set opacity to the mushroom chip card. If the person has the state not_home or unknow i want to set the opacity to 0.1. This is what i have. But it doesnt work.

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: person.xxxx
    content_info: none
    use_entity_picture: true
  - type: entity
    entity: person.xxxxx
    content_info: none
    use_entity_picture: true
card_mod:
  style:
    opacity: |
      [[[
        if (state === 'not_home' || state === 'unknown') return 0.1;
        else return 1;
      ]]]

[maverik80]

hi guys, I have a problem with this button card, I would like if a state is different from zero (so every time it changes and is different from zero) the state flashes for a time set by me. can anyone help me? I really don’t know where I’m going wrong

this is the code:

      type: custom:button-card
      entity: sensor.bilancia_xiaomi_vins
      show_units: false
      show_state: true
      show_icon: false
      show_name: false
      state:
        - value: '0'
          operator: '>'
          styles:
            card:
              - animation: blink 2.5s ease
      extra_styles: |
        @keyframes lamp {
          0% {
            opacity: 0;
          }
          50% {
            opacity: .5;
          }
          100% {
            opacity: 1;
          }
        }
      styles:
        card:
          - border-width: 0px
          - font-size: 35px
      card_mod:
        style: |
          ha-card {
            color: white;
            text-align: center;
            font-family: digital;
            text-shadow: 1px 1px 0px white,  0 0 0.2em white;
          }

I tried this too but it doesn’t work for me…

      type: custom:button-card
      entity: sensor.bilancia_xiaomi_vins
      show_units: false
      show_state: true
      show_icon: false
      show_name: false
      styles:
        card:
          - border-width: 0px
          - font-size: 35px
        state:
          - animation: |
                [[[
                  if (states['sensor.bilancia_xiaomi_vins'].state !== 0)
                    return 'blink 5s';
                ]]]
      card_mod:
        style: |
          ha-card {
            color: white;
            text-align: center;
            font-family: digital;
            text-shadow: 1px 1px 0px white,  0 0 0.2em white;
          }

[arganto]

Did you find only one example here in this thread where a button-card-JS worked in card-mod instead of jinja2?

[Pico1965]

Good morning.
It has become very complex to read this whole post.
I have a problem with a simple gauge…
My goal is to have it the same size as the button next to it (120x70px).
Thanks to the contribution of another user in this thread I managed to get here:

type: gauge
entity: sensor.lastricosolare_temperaturaacqua
name: Temperatura acqua
card_mod:
  style:
    .: |
      .name {
        font-size: 10px !important;
        background-color: ;
        position: absolute;
        bottom: 25px;
        padding-bottom: 0px;
        padding-top: 0px;
        padding-left: 0px
        padding-right: 0px
        }
    ha-gauge$: |
      svg {
      transform: scale(0.9) translateY(-20px);
      overflow: visible;
      }
      svg text {
      transform: scale(0.4) translateY(-290px);
      }
unit: °C
needle: true
min: -5
max: 50
segments:
  - from: -10
    color: '#FF0000'
  - from: 10
    color: '#FFD700'
  - from: 15
    color: '#43a047'
  - from: 30
    color: '#FFD700'
  - from: 40
    color: '#FF0000'

What I can’t do is:

• size the gauge to the desired dimensions;
• change the font size of the temperature value and its position;
• change the color of the text and the temperature value
• change the sensor background
• add the border.

Thanks for your attention!

[calve64 (Carlo)]

I can’t assign the number of columns (which are now static 7) to be variable and take the number of person present in the home (zone.home)

type: custom:stack-in-card
cards:
  - type: vertical-stack
    cards:
      - type: custom:auto-entities
        card:
          title: null
          type: grid
          columns: 7
          alignment: center
        card_param: cards`Preformatted text`

[arganto]

Where is this related to the topic of the thread: card-mod?

[Paga777]

I think it’s related to the part of the title you left out: Add css style to any lovelace card.

[Ildar_Gabdullin]

The code is posted is not related to card-mod.
Suggest to ask your question in the custom:button-card thread.