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

[dark10 (Darko)]

I won’t to change icon colour based on status of two sensors.
If one of my windows is open then I want gold colour else colour must be steelblue
Does not work as expected.
Can you please check my code:

show_name: true
show_icon: true
type: button
tap_action:
  action: navigate
  navigation_path: /devices-dashboarf/prozori_vrata
entity: ''
name: Prozori i vrata
card_mod: null
style: |
  :host {
      --paper-item-icon-color: {% if is_state("binary_sensor.senzor_prozora_dnevna_soba", "on") or ("binary_sensor.senzor_prozora_spavaca_soba", "on") -%} gold
                               {% else %} steelblue
                               {% endif %};
icon: mdi:window-closed-variant
show_state: true
icon_height: 70px
hold_action:
  action: none

[swifty]

I’m trying to use card mod to alter a card layout, and I have the individual elements working, but I’m not sure how the syntax should be to merge the two styles I’m trying to apply.

Could anyone advise what the correct syntax is to add this;

    mushroom-state-item:
      $: |
        .container {
          flex-direction: row-reverse !important;
        }

onto this;

  - type: custom:mushroom-template-card
    primary: Home
    icon: mdi:home
    icon_color: blue
    card_mod:
      style: |
        mushroom-card {
          background: rgba(10,70,170,0.2);
          padding: 6px;
          border-radius: 12px
        }
        ha-card {
          box-shadow: none !important;
          padding-top: 0px !important;
          padding-bottom: 10px !important;
          --card-primary-font-size: 18px;
          --card-primary-font-weight: 300 !important;
        }

?

[jkkataja (Jere Kataja)]

I’m trying to adjust the font size of the “value” for https://github.com/custom-cards/dual-gauge-card - if it’s been mentioned somewhere I accept the humiliation on failing to find the answer with Google.

I’ve attempted various combinations and tried to use developer view of browser but CSS is all Chinese to me.

What it looks currently:

Current attempt (yeah, I know 40px is not the value I want to use, but trying it for debug purposes to see when I would’ve managed to change the value).

type: custom:dual-gauge-card
title: Teho vaihe 1
min: -1370
max: 8050
outer:
  entity: sensor.shellyem3_1_channel_a_power
  label: Koti
inner:
  entity: sensor.shellyem3_2_channel_a_power
  label: Laturi
  min: 0
  max: 3680
  colors:
    - color: var(--label-badge-red)
      value: 3000
    - color: var(--label-badge-yellow)
      value: 1500
    - color: var(--label-badge-green)
      value: 500
    - color: var(--label-badge-blue)
      value: 0
colors:
  - color: var(--label-badge-red)
    value: 7000
  - color: var(--label-badge-yellow)
    value: 3000
  - color: var(--label-badge-green)
    value: -500
  - color: var(--label-badge-blue)
    value: -1370
card_mod:
  style: |
    ha-card.type-custom-dual-gauge-card {
    font-size: 40px;
    }

Thanks in advance!

[jkkataja (Jere Kataja)]

Also screenshot from developer view, on separate message due to these being my first 2 messages here so I’m allowed to post 1 media file per post.

[ATWindsor]

I am trying to set font size of the “kitchen” part of this card. But i am struggling a bit. The color and background and weight settings work, but not the font size. I am also not sure when to use ha-card vs :host? On a related note, can i set the background color as a rgb code, or take from the time, or does it have to be a “named color”?

cards:
          - type: button

            name: Kitchen

            show_icon: false

            card_mod:

              style: |

                :host {

                  --ha-card-background: teal;

                  font-size: 80px;

                  font-weight: 1000;

                  color: red;

                }

[Ildar_Gabdullin]

How to combine icons?

This is an example of probably useless styling; consider it as a demo.
“Useless” - because alternative ways may be used; anyway, this is up to a user which way to choose.

Consider some device with 2 attributes.
Each attribute may be expressed by some icon.

Here there is a device with 2 attributes:

• battery level - expressed by some “battery” icon;
• “working / not working” - expressed by some “fan” icon.

This example contains 2 Entities cards:

1. To select a battery level.
2. To represent this device.

The 2nd Entities card has 2 rows:

1. For battery level - has a hidden state label.
2. For “working/not working” state.

And both rows are placed in one row.
This is achieved by this styles:

  - type: entities
    card_mod:
      style: |
        div#states {
          display: grid;
        }
        div#states > * {
          grid-row-start: 1;
          grid-column-start: 1;
        }

Other styles are basically to improve a presentation.
Choose your own set of colors/opacities.
Battery color is implemented by Custom UI.

The whole code is here

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_number.test_level_1
        name: battery level
  - type: entities
    card_mod:
      style: |
        div#states {
          display: grid;
        }
        div#states > * {
          margin: 0;
          grid-row-start: 1;
          grid-column-start: 1;
        }
    entities:
      - entity: sensor.test_battery
        name: ' '
        card_mod:
          style:
            hui-generic-entity-row $: |
              .text-content:not(.info) {
                display: none;
              }
              state-badge {
                opacity: 0.6 !important;
              }
            .: |
              :host {
                --mdc-icon-size: 32px;
              }
      - entity: input_boolean.test_boolean_2
        name: some device
        icon: mdi:fan
        card_mod:
          style:
            hui-generic-entity-row $ state-badge $ ha-state-icon $ ha-icon $: |
              ha-svg-icon {
                {% if is_state(config.entity,'on') %}
                  animation: spin 3s infinite linear;
                  color: black;
                  opacity: 0.2;
                {% else %}
                  opacity: 0.2;
                {% endif %}
              }
              @keyframes spin {
                0% {
                  transform: rotate(0deg);
                }
                100% {
                  transform: rotate(359deg);
                }
              }

BTW, a similar functionality may be used with a custom:button-card - see this example.

[Ildar_Gabdullin]

@ATWindsor

:host {

(untested) Try to replace it with ha-card

[ATWindsor]

I don’t know enough about car-mod to know when host is right and ha-card is right, but in this case i tried ha-card first and it seems to give the same result. Background, color and font-weight changes how it looks, but font-size seems to make no difference.

[arganto]

@ATWindsor

The color and background and weight settings work, but not the font size. I am also not sure when to use ha-card vs :host? On a related note, can i set the background color as a rgb code, or take from the time, or does it have to be a “named color”?

Try !important in such cases first. Did you do this? You can see this good in developer tools in Chrome, etc. as well. Just open it and see which styles are applied and which are crossed out, etc. If your set value is crossed out then another one overruling and you can avoid via !important.

And you can set any color you want, not only named.

[ATWindsor]

Thanks. You seem to be right it is crossed out (see picture on the bottom), not sure why though, but what does it mean to try “!important”? Do I have to write !important font-size: 80px? And to set an RGB-color how do i do it? Rgb(x,x,x) instead of “red”?

[arganto]

@ATWindsor

font-size: 80px;

Most of the time google is your friend as well. Try searching for css + important.

font-size: 80px !important;

@ATWindsor

And to set an RGB-color how do i do it? Rgb(x,x,x) instead of “red”?

Why are you not just testing it? As said, it is not important, if it is red or rgb(100,0,0) or #ff0000 or …

[ATWindsor]

Thanks, I’m sorry I am not that skilled with CSS, I tried googling, that is why i came up with the original solution. As with the testing, it just felt easier to ask about what the right syntax was instead of trying stuff that could just as well not work. Sorry for wasting your time.

Bit thanks a lot for the solution, it now works just like i wanted with the !important-tag and the rgb(x,x,x) syntax.

[Ildar_Gabdullin]

@ATWindsor let me explain you how it works.
To help you someone in most cases should:

• take your code,
• paste it into own dashboard,
• add necessary sensors, replace your sensors in the code with the added sensors,
• see if styles what you need are applied,
• try to experiment with different CSS properties, adding “!important”, changing DOM navigation.

This is not “1-second-glance”. This all takes time.
And this may be done by YOU.
There are a lot of examples here.
Enough to use them by “copy/paste”, enough to adapt them to personal needs, enough to self-educate.

[ATWindsor]

I understand it can take time to help, and i appreciate the help. I dont expect people to change out their whole config to help either (I don’t if I answer questions, i certainly understand why people won’t bother with that).

But while I agree I of course have the ability to educate myself to a high level in the subject if I put in the time, I don’t think it is that unreasonable to ask a question like this, I did go through the examples first, that is why i had the code i had, and tried exchanging ha-card with :host for instance, but In the examples i found no-one used an rgb-code, and the font size didn’t have important in front of it. I also tried things like em, percentage, “large” and so on with the font size. I don’t want to sound ungrateful, I am genuinely happy for the help, but I had a problem i wanted to solve, card-mod looked like the tool for the job, sometimes in can cost you quite a considerable amount of time trying to search for a problem that isn’t even necessarily solvable with the tool you chose. (I began with a different integration before but card-mod seems like a better solution).

[Ildar_Gabdullin]

Learning any new stuff like card-mod is not an easy task.
This all needs a “try / make an error / repeat” approach.
I myself have never dealt with any web-programming, a “CSS” word I came to know in this thread first.

One thing is here.
When I started learning card-mod, I decided to create test cards with examples to cover different cases. That was a good lesson, a good practice.
A bit later I decided to post these examples in this thread.
All my examples here available in the consolidation post (1st post → link at the bottom).
Examples for the “button” card are not there - probably because most people are using a more powerful “custom:button-card”.
I think I should prepare some examples with the “button” card too.

[ATWindsor]

Yeah, those examples are great, and very helpful, those are the ones i used to get to my first version of the code. postet above. Thanks for putting in the work.

[Ildar_Gabdullin]

@ATWindsor

those are the ones i used to get to my first version of the code

…and you should not use a code for a “xxx-card” to style a “yyy-card”.
These cards may have different structure, different CSS properties.
What you can do with some new card is - using Code Inspector, try to use methods which you learned with other cards.

[fantnhu]

Hello!
I found a lot of good solutions here. I have a problem that I couldn’t figure out. I want to hide this entire column.
I can hide the cards separately by entity status, but I can’t hide the VERTICAL-STACK at the same time.
Please help!

[Mariusthvdb (Marius)]

having successfully added scrollbars to many different cards, I now am confronted with a history-graph card and cant make it happen…

trying to do:

              type: history-graph
              card_mod:
                style: |
                  ha-card {
                    box-shadow: none;
                    margin: 8px -16px 0px -16px;
                  }
                  ha-chart-base canvas {
                    max-height: 400px;
                    overflow-y: scroll;
                  }

but the path to the canvas isnt correct . Ive also tested:

                  ha-chart-base {
                    chart-max-height: 400px;
                    overflow-y: scroll;
                  }

but no such luck.
Could you please have a look with me where I go wrong? thanks!
btw, tis is part of a bigger panel view, replacing the now deprecated History panel ‘all’ entities

- title: History auto
  path: history-auto
  icon: mdi:history
  panel: true
  cards:

    - type: entities
      title: History include all domains
      entities:

        - entity: input_number.history_span

        - type: custom:config-template-card
          entities:
            - input_number.history_span
          variables:
            span: states['input_number.history_span'].state
          card:
            type: custom:auto-entities
            card:
              type: history-graph
              hours_to_show: ${span}
              card_mod:
                style: |
                  ha-card {
                    box-shadow: none;
                    margin: 8px -16px 0px -16px;
                  }
                  .chartContainer {
                    max-height: 400px;
                    overflow-y: scroll;
                  }
            filter:
              include:
                - domain: "*"

btw, a workaround: using an extra entities card inside the entities card and set the scroll on that section with:

    - type: entities
      title: History include all domains
      entities:

        - entity: input_number.history_span

        - type: custom:hui-element
          card_type: entities
          card_mod:
            style: |
              ha-card {
                box-shadow: none;
              }
              .card-content {
                max-height: 700px;
                overflow-y: scroll;
              }
          entities:
            - type: custom:config-template-card
              entities:
                - input_number.history_span
              variables:
                span: states['input_number.history_span'].state
              card:
                type: custom:auto-entities
                card:
                  type: history-graph
                  hours_to_show: ${span}
                  card_mod:
                    style: |
                      ha-card {
                        box-shadow: none;
                        margin: 8px -16px 0px -16px;
                      }
                filter:
                  include:
                    - domain: "*"

works ok. Would still love to be able to scroll the history-graph itself…

[Ildar_Gabdullin]

@Mariusthvdb

added scrollbars to many different cards, I now am confronted with a history-graph

What you are trying to do is adding a scrollbar to an each graph:

code

type: history-graph
entities:
  - entity: sun.sun
  - entity: sensor.mijia_300_1_co2
  - entity: sensor.ac66u_snmp_24_temp
  - entity: sensor.disk_use_percent
  - entity: sensor.ac66u_nvram_total
  - entity: sensor.xiaomi_cg_1_tvoc
card_mod:
  style: |
    .content {
      max-height: 550px;
      overflow-y: scroll;
    }

instead of more reasonable adding a scrollbar to the whole stack of graphs:

code

type: history-graph
entities:
  - entity: sensor.xiaomi_cg_1_co2
  - entity: sensor.xiaomi_cg_2_co2
  - entity: sensor.xiaomi_cg_1_tvoc
  - entity: sensor.xiaomi_cg_2_tvoc
card_mod:
  style:
    state-history-charts $:
      .entry-container:
        state-history-chart-line $ ha-chart-base $: |
          .chartContainer {
            color: red;
            max-height: 150px;
            overflow-y: scroll !important;
          }

---

More examples