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

IdahoSnakeHouse · September 30, 2024, 11:11pm

Can someone help me with some missing syntax? In spite of all the reading I’ve done, I’m missing something fundamental between moving card-mod styles from a card to a theme.

This works using card-mod with a Mushroom Select card:

card_mod:
  style:
    mushroom-select-option-control$:
      mushroom-select$: |
        .mdc-select__anchor {
          border-radius: 30px !important;
        }

Therefore, I thought it would be easy to move it to a theme. However, the following does not work:

  card-mod-card-yaml: |
 
    .type-custom-mushroom-select-card$:
      .mushroom-select-option-control$:
        mushroom-select$: |
          .mdc-select__anchor {
            border-radius: 30px !important;
          }

I assume I’m off somewhere with the .type-custom-mushroom-select-card$: but I’ve tried a lot of different things. Now I’m not sure if I need to be chasing shadow root stuff, indentation, etc. Any help would be greatly appreciated!

Ildar_Gabdullin · October 1, 2024, 2:22am

Fix for a restriction card inside a Grid with square cells

Test code:

  type: grid
  square: true
  cards:
    - type: custom:restriction-card
      card:
        type: entity
        entity: sun.sun
    - type: entity
      entity: sun.sun
    - type: history-graph
      entities:
        - sun.sun
    - type: custom:restriction-card
      card:
        type: entity
        entity: sun.sun
  columns: 2

Default look:

Modded:

type: custom:mod-card
card_mod:
  style:
    hui-grid-card $:
      hui-card:
        restriction-card $: |
          :first-child, div#card {
            height: 100%;
          }
        .: |
          restriction-card {
            height: 100%;
          }
card:
  type: grid
  square: true
  ...

Issue on Github.

isaak · October 1, 2024, 4:52pm

I want to change the opacity of the selected part, so it looks like the other parts, but I can’t figure out how to target it.

isaak · October 2, 2024, 10:03am

I managed to target it.

but when I make my background like the other parts, the opacity change doesn’t work.

gilles.blampain · October 2, 2024, 8:53pm

Hi,
I have an issue with the transparency of my mushroom cards on my mobile (iOS device). Everything is perfect on PC screen tough !
I searched this forum for days but couldn’t find an answer…

On my PC screen:

On my phone:

sample of code of ‘Prime Video’ key

type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: phu:prime-video
badge_color: cyan
tap_action:
  action: perform-action
  perform_action: media_player.select_source
  target:
    entity_id: media_player.salon
  data:
    source: Prime Video
icon_color: light-blue
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        box-shadow: 0px 8px 15px 0px rgba(0,0,0,0.36) !important;
      }
    .: |
      :host {
        --mush-icon-size: 80px; 

      ha-card {
        background: none;
        width: 110px;
        box-shadow: none;
        padding-left: 15px !important;
          
        
      }

Do you have an idea where the issue is ?
Thank you in advance !

Ildar_Gabdullin · October 2, 2024, 10:57pm

Headings card

Some super useful/useless styles:

heading

code

type: vertical-stack
cards:
  - type: heading
    icon: mdi:fan
    heading: some long long long long long long title
    heading_style: title
    badges:
      - type: entity
        entity: sun.sun
        icon: mdi:fan
      - type: entity
        entity: fan.kitchen
    card_mod:
      style:
        .badges hui-heading-badge:nth-child(1) hui-entity-heading-badge $: |
          ha-heading-badge {
            --icon-color: red;
          }
          state-display {
            color: magenta;
          }
          ha-state-icon {
            animation: rotating 2s linear infinite;
          }
          @keyframes rotating {
            0% {transform: rotate(0);}
            100% {transform: rotate(359deg);}
          }
        .badges hui-heading-badge:nth-child(2) hui-entity-heading-badge $: |
          ha-heading-badge {
            --icon-color: orange;
          }
          state-display {
            color: red;
          }
          ha-state-icon {
            animation: rotating 2s linear infinite;
          }
          @keyframes rotating {
            0% {transform: rotate(359deg);}
            100% {transform: rotate(0);}
          }
        .: |
          ha-card {
            background-color: lightgreen !important;
            border-radius: var(--ha-card-border-radius, 12px);
            border-width: var(--ha-card-border-width, 1px);
            border-style: solid;
          }
          .title > p {
            color: red;
            white-space: break-spaces !important;
          }
          .title ha-icon {
            --icon-primary-color: yellow;
            --mdc-icon-size: 32px;
            animation: rotating 2s linear infinite;
          }
          @keyframes rotating {
            0% {transform: rotate(0);}
            100% {transform: rotate(359deg);}
          }

  - type: entities
    entities:
      - entity: sun.sun
      - entity: sun.sun

Ildar_Gabdullin · October 2, 2024, 11:24pm

Regarding the earlier discussion about styling a Map card:
Some time ago a card-mod based styling for markers was not persistent after F5 (post) - and we have to use an external js-file described here.
Retested the card-mod way - seems to be stable:

  - type: map
    entities:
      - device_tracker.xxx
    card_mod:
      style:
        ha-map $ ha-entity-marker $: |
          .marker {
            border: 1px solid red !important;
            background-color: yellow !important;
          }

Mariusthvdb · October 3, 2024, 7:23am

was experimenting with this too just now, and looking for a way to style the individual entity:

        entities:
          - entity: sun.sun
            color: state
            card_mod:
              style:
                ha-heading-badge:
                   $: |
                     .state-display {
                        color: red !important;
                     }
          - entity: sun.sun
            color: state

any chance you could help out here too?

usecase: see the post on the class in the card-mod theme just now, and requiring an override of those entities state colors

btw, I now spot that the official yaml (like you use) is with the badges, and type: entity… I had simply jotted this down:

      - type: heading
        heading: Speciale Scenes
        heading_style: title
        card_mod:
          class: class-section-heading
        entities:
          - entity: sun.sun
            color: state
            card_mod:
              style:
                ha-heading-badge:
                   $: |
                     .state-display {
                        color: red !important;
                     }
          - entity: sun.sun
            color: state

and those entities are picked up too
I’ll change that so the card-mod wont be affected by that. (still need the state-display to be modded, the icon is then car of by the color: state )

following your mods above, and considering it starts at the actual entity badge, I tried to use:

        badges:
          - type: entity
            entity: sun.sun
            color: state
            card_mod:
              style: |
                hui-entity-heading-badge $: |
                  state-display {
                    color: red !important;
                  }

but still no luck, the mod isnt applied in the path

vaderag · October 3, 2024, 1:01pm

Ildar_Gabdullin:

type: glance
title: Colored name (1st entity)
entities:
  - entity: sensor.cleargrass_1_co2
    style: |
      :host .name {
        color: red;
      }
  - entity: sensor.cleargrass_1_co2

Glance card - trying to make the name bold… (or red at this stage, but i actually want it bold)

<div class="name" title="Cat Flap">Cat Flap</div>

I’ve tried every variant of this I can think of

e.g.

    - type: glance
      entities:
        - entity: lock.harley_s_flap_locked_in
          name: Cat Flap
          fill_container: true
          state_color: true
          tap_action:
            action: none
          hold_action:
            action: toggle
      card_mod:
        style: |
          ha-card {
            background: {{ 'rgba(200, 0, 0, 0.05)' if is_state('lock.harley_s_flap_locked_in', 'unlocked') else 'rgba(230, 177, 6, 0.1)' if is_state('lock.harley_s_flap_locked_in', 'locking') else 'rgba(230, 177, 6, 0.1)' if is_state('lock.harley_s_flap_locked_in', 'unlocking') else 'rgba(0, 200, 0, 0.05)'}}; 
      style:
        .entities .entity:
          $: | 
            .name {
              font-weight: red;
            }

      card_mod:
        style: |
          ha-card {
            background: {{ 'rgba(200, 0, 0, 0.05)' if is_state('lock.harley_s_flap_locked_in', 'unlocked') else 'rgba(230, 177, 6, 0.1)' if is_state('lock.harley_s_flap_locked_in', 'locking') else 'rgba(230, 177, 6, 0.1)' if is_state('lock.harley_s_flap_locked_in', 'unlocking') else 'rgba(0, 200, 0, 0.05)'}}; 

        .entities .entity:
          $: | 
            .name {
              font-weight: red;
            }

But nothing seems to change the font in question…
I managed to sort the background without too much trouble, but making something bold should be easier than this

Timmuhhh · October 3, 2024, 1:15pm

With this code:

type: entities
entities:
  - entity: input_number.octet1
    name: Voer IP in
    icon: mdi:ip-network
  - entity: input_number.octet2
    name: ' '
    icon: mdi:none
  - entity: input_number.octet3
    name: ' '
    icon: mdi:none
  - entity: input_number.octet4
    name: ' '
    icon: mdi:none

I get this card:

I would like the card to look like this (quick and dirty ms paint job):

With horizontal stack the buttons get unusable due to the white space of the title element still being there. I thought of using card-mod to eleminate the title and icon element, only leaving the number input box, and then use horizontal stack but my card-mod skills are basicly none.

There doesnt seem to be an custom card providing only the input box. Does anyone know how to achive my goal?

vaderag · October 3, 2024, 2:25pm

Unrelated to my other post above, but funnily enough I’m trying to do quite similar

I want to have my button horizontal in the same pane - if i do horizontal stack it bumps it over and looks disconnected.

(I also want to round my text boxes but that’s a problem for another day!)

Ildar_Gabdullin · October 3, 2024, 2:35pm

Do you want to style a particular entity in the Heading card?
The example I posted above contains styles for an icon & “state-display”.

Mariusthvdb · October 3, 2024, 2:36pm

yes, but that is using the mod on the nth number of entity, seen from the main header?

I’d love to do that on the entity itself

slimak · October 3, 2024, 2:38pm

Hi guys! I want “ripple effect” in weather-forecast card, when it gets clicked. In the video below, the card on the left has “ripple effect” but weather-forecast card on the right doesn’t.

20241003_154044

I “buttonized” the weather-forecast card (it’s inside button-card, so that it looks the same as my other cards). Therefore I think either of below methods could work:

add “ripple effect” to weather-forecast card
OR
make button-card intercept click event, instead of weather-forecast card.

My code (only relevant parts):

button-card template to “buttonize” other cards:

buttonize:
  show_icon: false
  show_name: false
  show_state: false
  styles:
    card:
      - border: none
      - color: '#4b5254'
      - background-color: 'rgba(250, 250, 250, 0.75)'
      - padding: 0px
      - box-shadow: inset 0 0 20px var(--state-inactive-color)
      - '--mdc-ripple-color': 'rgba(0, 0, 0, 0.8)'
      - '--mdc-ripple-press-opacity': 0.5
    grid:
      - grid-template-areas: |
          "inner_card"
      - grid-template-columns: auto
      - grid-template-rows: auto
  tap_action:
    action: more-info

“buttonized” weather card:

type: custom:button-card
template: buttonize
entity: weather.forecast_dom
custom_fields:
  inner_card:
    card:
      type: weather-forecast
      show_current: false
      show_forecast: true
      entity: weather.forecast_dom
      forecast_type: daily
      card_mod:
        style: |
          ha-card {
            padding: 0px 0px 4px 0px !important;
            border: none;
            background-color: transparent;
          }
          /* here goes much more styling, irrelevant for the question */

Ildar_Gabdullin · October 3, 2024, 2:39pm

Hmm, I do not think this is possible. Will try a bit later once again. Note that in a “buttons-row” it was also not possible to style “from the button’s level” - here it seems to be a similar story.

Mariusthvdb · October 3, 2024, 2:41pm

right, that could be it yes.

I had hoped to use :host or some other high level element…
maybe you’ll find it, Ill keep trying too

RkcCorian · October 3, 2024, 7:48pm

Hello together,
does anybody know how I can change the color for the icon at the badge of the new heading card?

Many thanks!!

My YAML for the heading so far, but it has no effect

type: heading
icon: ""
heading: Batterien
heading_style: title
badges:
  - type: entity
    show_state: true
    show_icon: true
    entity: binary_sensor.hausbatterien
    tap_action:
      action: more-info
    card_mod:
      style:
        .: |
          ha-state-icon {
            {% if is_state(binary_sensor.hausbatterien, 'off') %}
              color: var(--success-color) !important;
            {% else %}
              color: var(--error-color) !important;
              animation: blink 2s linear infinite;
            {% endif %}
            }
              @keyframes blink {
              50% {opacity: 0;
              }
          }

Ildar_Gabdullin · October 3, 2024, 8:01pm

1st post → link at the bottom → heading

RkcCorian · October 3, 2024, 8:59pm

At thomasloven/lovelace-card-mod I cannot find anything about the new header, not sure if I miss something…
When I check at Heading card - Home Assistant (home-assistant.io) there is a section about color for the badges BUT this affects only the color in active condition. So when the battery is OK I would like to style that to green.

Can you help me to get the proper position for the solution? Many thanks in advance!

Ildar_Gabdullin · October 3, 2024, 9:03pm