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

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… )

1 Like

Restoring the old logo:

изображение

изображение

изображение

Here


Another method to show a legacy HA logo is here.

1 Like

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…

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

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

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.

1 Like

try:

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

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

1 Like

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.

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

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

1 Like

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

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

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;
      ]]]

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;
          }

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

1 Like

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:
immagine

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!

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`

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

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

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