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

DjJoakim · December 1, 2023, 10:47pm

Thank you for the reply, and your clarification.

I was able to change the colour of the secondary-info to red by using this

    style:
      hui-generic-entity-row:
        $:
          .info.pointer .secondary: |
            ha-relative-time {
              color: red !important;
            }

But i still can’t get it to change to red ONLY if the last_update is longer then 2 minutes (for testing), i don’t know what i am doing wrong - i have tried multiple ways, but it won’t change to red… any ideas?

type: entities
entities:
  - entity: sensor.badrum_temperature
    type: custom:multiple-entity-row
    style:
      hui-generic-entity-row:
        $:
          .info.pointer .secondary: |
            ha-relative-time {
              color: >
                {% set last_updated = (states.sensor.badrum_temperature.last_updated) %}
                {% if last_updated %}
                  {% set time_difference = as_timestamp(now()) - as_timestamp(last_updated) %}
                  {% if time_difference > 120 %}
                    red
                  {% else %}
                    inherit
                  {% endif %}
                {% else %}
                  inherit
                {% endif %}
            }
    name: Tempgivare Hall
    secondary_info: last-changed
    show_state: false
    entities:
      - entity: sensor.tempgivare_hall_batteri
        name: Batteri

DBB1 · December 1, 2023, 10:53pm

How would I go about using card-mod to alter what is displayed with the ‘more info’ portion of a light card (Mushroom in this case)?

My Tuya device has color temp control, but only warm-to-bright white capability. However, when using the Tuyalocal integration, more-info also displays a color wheel selector, additional colors, an Attributes drop-down, and an Effects/Scene selection:

Interestingly, the same card/more-info displays correctly for the device when using the cloud-based Tuya integration/entity. I’ve played with all the Tuya values used for this device until I finally got the power, brightness, and color temp controls working. But no combination of these worked to limit or turn off these additional controls, so I thought using card-mod might be the solution.

Ildar_Gabdullin · December 1, 2023, 11:11pm

This is definitely to be fixed in either Frontend or in this integration. Consider creating an issue in Github (may be start in Frontend repo).
Any more-info-related things is an off-topic here. There is a dedicated card-mod-themes thread. But I am not sure it is possible to fix more-info for a particular entity. But probably it could be possible for ALL light-related more-info - this may work if you use only similar lights.

Ildar_Gabdullin · December 1, 2023, 11:32pm

Suggest to use this DOM navigation path (I should have edited that m-e-r post earlier…) and this way to define conditions for css attributes:

  - type: custom:multiple-entity-row
    entity: input_boolean.test_boolean
    card_mod:
      style:
        hui-generic-entity-row $: |
          .info.pointer .secondary ha-relative-time {
            {% set last_updated = states[config.entity].last_updated %}
            {% set time_difference = as_timestamp(now()) - as_timestamp(last_updated) %}
            {% if time_difference > 120 %}
              color: red;
            {% endif %}
          }
    secondary_info: last-changed

instead of

some_property: {% if ... %} ... {% else %} ... {% endif %}

since it is more flexible.

DjJoakim · December 1, 2023, 11:50pm

You are a freaking star, thank you so much for helping me with this - now my headache will be gone.

Is there some way i can buy you a coffe or something?
Edit - just saw you link, coffe incomming.

Thank you so much once again, my hero without a cape.

josephny · December 2, 2023, 12:04am

It looks like !secret (and !include for that matter) will only work in the frontend (UI) in YAML mode.

I have no experience with YAML mode, but this is what I read elsewhere:

Just cannot get !secret to work - Home Assistant Community (home-assistant.io)

Ildar_Gabdullin · December 2, 2023, 12:06am

Not exactly if I understood you correctly.
In UI in “yaml editor” you CANNOT use “!secret”, “!include”.
They can only be used in yaml-made-dashboards, not in UI-made ones.

As for yaml-anchors - you MAY use them in UI “yaml-editor”.
But since after saving the yaml code is converted to json, all your anchors will be converted to a code before converting to json, so these anchors will not be restored as anchors after reopening the UI “yaml-editor”.

nelsonamen · December 2, 2023, 8:45am

type: custom:more-info-card
entity: light.luz_sofa
style: |
state-card-content { display: none }

How to remove the title Sofá please.

dtapro · December 3, 2023, 12:49am

When I used card-mod with vertical-stack, it turned everything into a single column, how to fix it?

type: custom:mod-card
style: |
  ha-card {
    }
card:
  type: vertical-stack
  cards:
    - show_current: true
      show_forecast: true
      type: weather-forecast
      entity: weather.forecast_home
      forecast_type: daily

type: custom:mod-card
style: |
  ha-card {
    }
card:
  type: vertical-stack
  cards:
    - show_current: true
      show_forecast: true
      type: weather-forecast
      entity: weather.forecast_home
      forecast_type: daily

Ildar_Gabdullin · December 3, 2023, 1:00am

Fill a bug report on github if it is not made yet.
Try using a custom:layout-card to place these cards in diff columns.

Mngsps · December 3, 2023, 7:24pm

Does anyone know how to reduce the vertical spacing in the to do lists (former shopping list)?
Thank you, a lot, in advance!
All the best
Benedikt

e-raser · December 3, 2023, 10:13pm

Why does the outer card_mod applied to the entities card also affect the child elements (here: simple-clock-card GitHub - fufar/simple-clock-card: Simple clock card for Home assistant lovelace)?

border-with: 0px; is not respected here

type: entities
title: 🕒 Uhrzeit
state_color: true
show_header_toggle: true
entities:
  - type: custom:simple-clock-card
    use_military: true
    hide_seconds: false
    font_size: 1.5rem
    paddingLeft_size: 10px
    paddingRight_size: 10px
    paddingTop_size: 10px
    paddingBottom_size: 10px
    card_mod:
      style: |
        ha-card {
          letter-spacing: 1px;
          border-width: 0px;
          #padding: 3px;
          margin-left: -5px;
          #text-align: right;
          #margin-top: -10px;
        }
card_mod:
  style:
    .: |
      ha-card {
        border-width: 1px;
      }

Obviously I want to remove the border from the inner card.

Ildar_Gabdullin · December 3, 2023, 10:25pm

Even with “important”?

e-raser · December 3, 2023, 10:28pm

Yes. !important on the inner card_mod is automatically also applied to the outer card_mod.

Other styles also affected. Always applied to both inner and outter card. Crazy.

(note: final goal by the way is to position the clock card right next to the header text on the right side)

dma_k · December 4, 2023, 1:54am

Yes, I have HA v2023.4.0 and card_mod v3.2.4.

I also applied

ha-card {
  background-color: red;
}

and I see the background changes, also set

height: 150px !important;

and still height is not changed (stays 320px):

When I set this value manually to e.g. 150px the effect is applied, but during some internal refresh cycle it is set back to 320px.
Does card_mod set the value only once?
Thanks for helping!

Ildar_Gabdullin · December 4, 2023, 2:23am

What about other styles?
Could you test some amount of styles from a consolidation post (1st post → link at the bottom)?
May be your issues could be explained by old SW versions; or it also could be a particular browser issue.

agoberg2 · December 4, 2023, 11:45am

I it possible to target only the energy dashboard through the theme file?
I would like to add --masonry-view-card-margin: 8px 4px; to the host of <ha-panel-energy>.

I’ve been trying stuff like this but havent really been able to get it working.

  card-mod-theme: Rounded
  card-mod-ha-panel-energy: |
    :host {
      --masonry-view-card-margin: 8px 4px;
    }

dma_k · December 4, 2023, 4:04pm

I have checked the link with other style examples, trying to find a good candidate to play with. The graph has a legend, so I thought it should be pretty easy to change the font size on it. I tried two possibilities (with and without using $:) and none of them worked Have I done a stupid mistake in syntax? Otherwise I am puzzled…
P.S. Tested in Chrome and Firefox with same (negative) result.
P.P.S. ivory background worked just fine.

- type: history-graph
  entities:
    - entity: sensor.current_uv_index
  hours_to_show: 48
  refresh_interval: 60
  card_mod:
    style: |
      ha-card {
        background-color: ivory;
      }
      .chartLegend {
        font-size: 2em !important;
      }
      state-history-charts $:
        state-history-chart-line $:
          ha-chart-base $: |
            .chartLegend {
              font-size: 2em !important;
            }
      state-history-charts $:
        state-history-chart-line $:
          ha-chart-base $: |
            .chartContainer {
              height: 10px !important;
            }

Ildar_Gabdullin · December 4, 2023, 4:52pm

dma_k:

  card_mod:
    style: |
      ha-card {
        background-color: ivory;
      }
...
      state-history-charts $:
        state-history-chart-line $:
          ha-chart-base $: |
            .chartContainer {
              height: 10px !important;
            }

Because this is wrong.
1st post → link at the bottom → other stuff → how to combine ha-card & shadowRoot

dma_k · December 4, 2023, 10:07pm

I see, the syntax is not so simple as I would think. I have found the post (what exactly are $ | .: doing and how do I know when to use them or not?) and re-read DOM Navigation. OK, I have to step back and understand it better. So I have removed all styles and tried to start from a blank page.
When I specify:

card_mod:
  style: |
    state-history-charts {
      background-color: red !important;
    }

it works just fine, but when I try to step into first #shadow-root it does not work:

card_mod:
  style: |
    state-history-charts $: |
      .entry-container {
        background-color: red !important;
      }

Any ideas on that?