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

I can’t find anything that’s named “m-e-r” and I don’t know what that means, I have looked at that list 10 times but can’t find anything related to my problem.

multiple-entity-row

1 Like

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

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.

  1. 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).
  2. 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.

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.

1 Like

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.

1 Like

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)

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”.

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

How to remove the title Sofá please.

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


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.

1 Like

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

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

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.

Even with “important”?

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)

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!

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.

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

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