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

[Swallowtail (Simon)]

@CDRX2

Both still work indeed, however you should use the first example. The second one is legacy and will most likely stop working at some point.

@Ildar_Gabdullin

Also, the 2nd example will not work with picture-elements for styling an element. So, again we should use the 1st type (card_mod → style → …)

Thank you both - noted and changed in code.

[Shestak (Michael)]

Can you help me?

Trying to change the standard card https://pastebin.com/5fUNmPWH

Summary

But out of all css blocks only this ha-card {} is applied. And in blocks:
ha-card .header .name {}
ha-card .info .value {}
ha-card .info .measurement {}
For some reason, nothing is applied at all.

Plus, there is an additional question regarding the icons in this card, in particular, I would like to apply a code like this to it:

      img_cell:
        - background-color: rgba(var(--color-theme),0.05)
        - border-radius: 50%
        - place-self: center
        - width: 42px
        - height: 42px

Thank you.

[Ildar_Gabdullin]

@Shestak

Trying to change the standard card

You got a mixed code - Entities card + card_mod for Entity card.

    ha-card {
      border-radius: 20px;
      #font-weight: bolder;

Do not use “#” here since you are trying to comment a part inside a string.

@Shestak

      img_cell:
        - background-color: rgba(var(--color-theme),0.05)

This is for custom:button-card (ref this thread).

@Shestak

I would like to apply a code like this to it:

If you are talking about “may I apply a similar code for an entity icon” - ok, just a minute.

@Shestak

        - width: 42px
        - height: 42px

may be achieved:

type: entities
show_header_toggle: false
entities:
  - entity: sun.sun
  - entity: sun.sun
style: |
  ha-card {
    --mdc-icon-size: 60px;
  }

As for this:

@Shestak

        - border-radius: 50%

already applied for icons.
As for this:

@Shestak

        - background-color: rgba(var(--color-theme),0.05)
        - place-self: center

you can change a background:

type: entities
entities:
  - entity: sensor.cleargrass_1_co2
    card_mod:
      style:
        hui-generic-entity-row $: |
          state-badge {
            background-color: aqua;
          }

[Shestak (Michael)]

Thank you for help. Here’s what I got.

[Ildar_Gabdullin]

Similarly to this:

but with less efforts and only for static headers:

    type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sun.sun
        style: |
          :host .entity {
            display: flex;
            flex-direction: column-reverse;
          }
        entities:
          - entity: sun.sun
          - entity: sun.sun
          - entity: input_boolean.test_boolean
            toggle: true
        name: Bottom headers
        show_state: false

[Ildar_Gabdullin]

If anyone needs this:

type: entities
show_header_toggle: false
entities:
  - entity: input_boolean.test_boolean
    name: normal
  - entity: input_boolean.test_boolean
    name: toggle on the left
    card_mod:
      style:
        hui-generic-entity-row $: |
          state-badge {
            display: none;
          }
        .: |
          hui-generic-entity-row {
            flex-direction: row-reverse !important;
          }

[Shestak (Michael)]

What about shortcuts in mini-media-player?
Like this:

shortcuts:
  attribute: sound_mode
  buttons:
    - icon: mdi:monitor-cellphone-star
      id: Любимая музыка
      type: command

Color for play-control buttons - ok, i find it.

Summary

I realy use search, but don’t find solution. Thanks again *смайл_пожатия_рук

[Ildar_Gabdullin]

@Shestak

What about shortcuts in mini-media-player?

Never used shortcuts, cannot give a ready solution.
Try to adapt ready styles for these buttons.

[Ildar_Gabdullin]

Using card-mod to move a graph for the 2nd sensor to the bottom:
post

[Shestak (Michael)]

Hmm, it turned out to be very simple, but it is possible that other elements will be painted as well.

type: custom:mini-media-player
entity: media_player.yandex_station_lb00000000000000304600006f6ab3ee
shortcuts:
  attribute: sound_mode
  buttons:
    - icon: mdi:monitor-cellphone-star
      id: Любимая музыка
      type: command
      ......
  columns: 6
card_mod:
  style: |
    ha-card {
      color: var(--state-icon-color) !important;
    }

color: var(–state-icon-color) !important;

[Ildar_Gabdullin]

@Shestak

color: var(--state-icon-color) !important;

No, this attribute is TOO common, should not be used just to change icons…

[Shestak (Michael)]

I didn’t find any other way/variant
mmp-shortcuts__buttons
mmp-shortcuts__button
do not change color

Summary

[henry8866 (henry)]

Saw this error in the chrome console, anyone know what it is and how to fix it? Maybe this is the the reason that some of the style are not working. Thanks!

Failed to execute 'define' on 'CustomElementRegistry': the name "mod-card" has already been used with this registry at https://xxxxxx.duckdns.org/hacsfiles/lovelace-card-mod/card-mod.js?hacstag=190927524311:6:10674

[Ildar_Gabdullin]

@Shestak

didn’t find any other way/variant

Post a code with your attempts here - at least it will show people that you’re really trying hard ))).
I mean with using DOM navigation, not just setting a global color property.
We’ll see what is wrong there.

[gasolli]

I hope someone can help me with problem I have been struggling with, creating my first dashboard.
I have absolutely no experience with CSS or HTML, but I am trying to learn…

I am simply trying to decrease the spacing between text lines in the Entities card (or rather, decrease the height of that “box”), hoping to make the overall card more compact.
Does anyone have a solution for that?

type: entities
view_layout:
  column: 1
entities:
  - entity: sensor.sm_t510_battery_level
    name: Batteri
  - entity: binary_sensor.sm_t510_is_charging
    name: Ladestatus
  - type: divider
  - entity: sensor.sector_stue_24000553b73
    name: Temperatur Stue
  - entity: sensor.sector_gang_2400055381c
    name: Temperatur Gang
state_color: false
show_header_toggle: false
tap_action:
  action: none
style:
  .: |
    ha-card {
      background-color: transparent;
      box-shadow: none;
      margin-bottom: -20px;
      margin-top: -30px;
      margin-left: -30px;
      width: 300px;
          }

[ASNNetworks]

Did you check the first post in this thread? There is a link at the bottom with many card-mod examples. Go through that list, maybe you’ll find a solution.

Card-mod - Add css styles to any lovelace card

Here all my posts which may be useful: NOTE: Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3). And also read this important note to create optimized code. In most examples here a code is NOT optimized - just to describe a DOM navigation. Entity card post rotating icon (by @dolodobendan) disabled tap_action Entities card (including some special row elements - button, section, divider) post font-size for Entities card post Entities card with attributes …

[sebbaT]

Any Card-mod gurus able to help me on this? I’m trying to target this state-switch <div> to set overflow: visible so that the background colour/image can ‘escape’.

This is what it currently looks like:

This is the desired look:

This is the <div> I can target with overflow: visible to make it work under styles #root {}:

I’ve attempted to wrap the state-switch-card within a custom:mod-card but I’m not sure if this is the correct approach?

thanks!

YAML

      - type: custom:stack-in-card
        view_layout:
          grid-area: main1
          justify-self: middle
          show:
            mediaquery: '(min-width: 600px)'
        card_mod:
          style: |
            #root {
              overflow: visible !important;
            }
            :host {
              margin-top: -300px !important;
              padding-top: 300px !important;
              overflow: visible !important;
              margin-left: -4px !important;
              }
            ha-card {
              background-color: rgba(0,0,0,0) !important;
              backdrop-filter: blur(0px) !important;
              border-radius: 30px 30px 30px 30px !important;
              box-shadow: none !important;
              overflow: visible !important;
              }
        cards:
          - type: custom:mod-card
            card:
              type: custom:state-switch
              entity: hash
              transition: slide-left
              transition_time: 500
              view_layout:
                grid-area: main1
              states:
                kitchen:
                  type: custom:layout-card
                  layout_type: grid
                  view_layout:
                    grid-area: main1
                  layout:
                    grid-template-columns: auto 300px 300px auto
                    grid-template-rows: 1fr
                  cards:
                    - type: custom:mini-media-player

[gasolli]

Thank you. I did read through the examples in that post, but unfortunately I could not find something relevant to my specific case

[Ildar_Gabdullin]

Any examples & tutorials are not supposed to cover ALL possible needs - they just simplify learning.

[chezpaul2 (Paul B.)]

I want to change the size of my mdi icons seen here:

I use them in a grid:

         - type: grid
            view_layout:
              grid-area: sidebar
            columns: 3
            cards:
              - type: button
                icon: mdi:battery-charging-high
                tap_action: !include popup/battery.yaml
                hold_action:
                  action: none

              - type: button
                icon: mdi:arrow-up-bold-circle-outline
                tap_action: !include popup/sidebar_update.yaml
                hold_action:
                  action: call-service
                  service: homeassistant.update_entity
                  service_data:
                    entity_id: sensor.hacs

              - type: button
                icon: mdi:information-outline
                tap_action: !include popup/sidebar_information.yaml
                hold_action:
                  action: none

              - type: button
                icon: mdi:car
                tap_action: !include popup/sidebar_car.yaml
                hold_action:
                  action: none

              - type: button
                icon: custom:roborock-vacuum
                tap_action: !include popup/sidebar_vacuum.yaml
                hold_action:
                  action: none

              - type: button
                icon: mdi:radio
                tap_action: !include popup/radio.yaml
                hold_action:
                  action: !include popup/plex.yaml

I do use card-mod but I have no clue how to make it work on these icons. Couldn’t find any other thread explaining this.
Thanks