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

caspix · October 27, 2023, 9:46am

I am trying to port a existing theme by adding a .png with snow on top of cards on the dashboard. My understanding is that this can be done by adding card-mod inside the theme.yaml.

But I am not sure on what to add. I believe I needed to use a pseudo element and ::after.

Has anybody done this before or can guide me towards an example on how this would look? If you have a code example using pseudo element with card mod, that would be great, I can then try to port it to suit my needs.

Thank you

aman · October 27, 2023, 6:21pm

Answering myself maybe somebody will find it useful.

style: |
        --mdc-icon-size: 18px;

or

ha-icon:
            $: |
              ha-svg-icon {
                --mdc-icon-size: 18px;
                color: yellow;
              }

Krivatri · October 29, 2023, 8:42am

Hi all,
question: is it possible to transition an icon animation?
for example: a fan has 2 speeds, when the speed changes from low to high or vice versa, can this change gradually instead of instant? (like a slow down or a speed up)

this is the code I’m currently using to change the rotating speed of the spinning fan animation:

styles:
   icon:
     - animation: |
         [[[
           var a = entity.state;
           var b = states['binary_sensor.ventilation_low'].state;
           var c = states['binary_sensor.ventilation_high'].state;
           if (a == 'on' && b == 'on') return 'rotating 2s linear infinite'; 
           if (a == 'on' && c == 'on') return 'rotating 1s linear infinite'; 
           else return 'rotating 0s linear infinite';
         ]]]

Ildar_Gabdullin · October 29, 2023, 8:52am

Seems that your question is related to custom:button-card, why asking in card-mod thread…

Krivatri · October 29, 2023, 8:58am

oops, you’re right, sorry about that, my bad.

Ildar_Gabdullin · October 30, 2023, 4:29pm

How to add an icon to a card’s title

Some cards support an icon for a title, some not.
Here 2 examples:
– history-graph
– custom:stack-in-card

code

type: vertical-stack
cards:
  - type: custom:stack-in-card
    title: some title
    mode: horizontal
    keep:
      outer_padding: true
      border: true
      margin: true
      border_radius: true
    cards:
      - type: entity
        entity: sun.sun
      - type: button
        entity: sun.sun
    card_mod:
      style: &ref_style
        $: |
          .card-header {
            display: flex !important;
            align-items: center;
            color: red !important
          }
          .card-header:before {
            content: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgb(47,166,242)' d='M257.5 420L286.6 391H313.4C315.5 396.8 321 401 327.6 401C335.9 401 342.6 394.3 342.6 386C342.6 377.7 335.9 371 327.6 371C321.1 371 315.5 375.2 313.4 381H282.4L255.4 407.9V375L287.5 342.9H339.4C341.5 348.7 347 352.9 353.6 352.9C361.9 352.9 368.6 346.2 368.6 337.9C368.6 329.6 361.9 322.9 353.6 322.9C347.1 322.9 341.5 327.1 339.4 332.9H297.5L327.5 303V278L349.1 256.5C351.1 257.4 353.3 258 355.6 258C363.9 258 370.6 251.3 370.6 243C370.6 234.7 363.9 228 355.6 228C347.3 228 340.6 234.7 340.6 243C340.6 245.3 341.1 247.5 342.1 249.5L327.6 264V218.2C333.4 216.1 337.6 210.6 337.6 204.1C337.6 195.8 330.9 189.1 322.6 189.1C314.3 189.1 307.6 195.8 307.6 204.1C307.6 210.6 311.8 216.2 317.6 218.2V264L303.1 249.5C304 247.5 304.6 245.3 304.6 243C304.6 234.7 297.9 228 289.6 228C281.3 228 274.6 234.7 274.6 243C274.6 251.3 281.3 258 289.6 258C291.9 258 294.1 257.5 296.1 256.5L317.7 278V298.9L290.7 325.9V306.1C296.5 304 300.7 298.5 300.7 292C300.7 283.7 294 277 285.7 277C277.4 277 270.7 283.7 270.7 292C270.7 298.5 274.9 304.1 280.7 306.1V335.9L255.7 360.9V214.1L276.3 193.6C278.3 194.5 280.5 195.1 282.8 195.1C291.1 195.1 297.8 188.4 297.8 180.1C297.8 171.8 291.1 165.1 282.8 165.1C274.5 165.1 267.8 171.8 267.8 180.1C267.8 182.4 268.3 184.6 269.3 186.6L250.8 205.1L232.3 186.6C233.2 184.6 233.8 182.4 233.8 180.1C233.8 171.8 227.1 165.1 218.8 165.1C210.5 165.1 203.8 171.8 203.8 180.1C203.8 188.4 210.5 195.1 218.8 195.1C221.1 195.1 223.3 194.6 225.3 193.6L245.9 214.1V319L209.8 283V254.2C215.6 252.1 219.8 246.6 219.8 240.1C219.8 231.8 213.1 225.1 204.8 225.1C196.5 225.1 189.8 231.8 189.8 240.1C189.8 246.6 194 252.2 199.8 254.2V273L171.7 245V217.2C177.5 215.1 181.7 209.6 181.7 203.1C181.7 194.8 175 188.1 166.7 188.1C158.4 188.1 151.7 194.8 151.7 203.1C151.7 209.6 155.9 215.2 161.7 217.2V249.1L192.7 280H174.9C172.8 274.2 167.3 270 160.7 270C152.4 270 145.7 276.7 145.7 285C145.7 293.3 152.4 300 160.7 300C167.2 300 172.8 295.8 174.9 290H202.7L245.8 333.1V408L222.8 385V356.2C228.6 354.1 232.8 348.6 232.8 342.1C232.8 333.8 226.1 327.1 217.8 327.1C209.5 327.1 202.8 333.8 202.8 342.1C202.8 348.6 207 354.2 212.8 356.2V375L179.3 341.5C180.2 339.5 180.8 337.3 180.8 335C180.8 326.7 174.1 320 165.8 320C157.5 320 150.8 326.7 150.8 335C150.8 343.3 157.5 350 165.8 350C168.1 350 170.3 349.5 172.3 348.5L205.8 382H188C185.9 376.2 180.4 372 173.8 372C165.5 372 158.8 378.7 158.8 387C158.8 395.3 165.5 402 173.8 402C180.3 402 185.9 397.8 188 392H215.8L243.9 420H104.5C100.2 420 96.7 416.5 96.7 412.2V279H61.3C56.1 279 52 274.8 52 269.7C52 267.2 53 264.9 54.7 263.1L242.2 73.4C246.7 68.8 254.1 68.8 258.7 73.3L258.8 73.4L356.7 172V153.8C356.7 149.5 360.2 146 364.5 146H397C401.3 146 404.8 149.5 404.8 153.8V220.7L446.4 263.1C450 266.8 450 272.7 446.3 276.3C444.6 278 442.2 279 439.8 279H404.9V412.2C404.9 416.5 401.4 420 397.1 420H257.5ZM173.3 393C170 393 167.3 390.3 167.3 387C167.3 383.7 170 381 173.3 381C176.6 381 179.3 383.7 179.3 387C179.3 390.3 176.6 393 173.3 393ZM217.4 348C214.1 348 211.4 345.3 211.4 342C211.4 338.7 214.1 336 217.4 336C220.7 336 223.4 338.7 223.4 342C223.4 345.3 220.7 348 217.4 348ZM165.3 341C162 341 159.3 338.3 159.3 335C159.3 331.7 162 329 165.3 329C168.6 329 171.3 331.7 171.3 335C171.3 338.3 168.6 341 165.3 341ZM160.3 291C157 291 154.3 288.3 154.3 285C154.3 281.7 157 279 160.3 279C163.6 279 166.3 281.7 166.3 285C166.3 288.3 163.6 291 160.3 291ZM285.5 298C282.2 298 279.5 295.3 279.5 292C279.5 288.7 282.2 286 285.5 286C288.8 286 291.5 288.7 291.5 292C291.5 295.3 288.8 298 285.5 298ZM353.6 344C350.3 344 347.6 341.3 347.6 338C347.6 334.7 350.3 332 353.6 332C356.9 332 359.6 334.7 359.6 338C359.6 341.3 356.9 344 353.6 344ZM327.6 392C324.3 392 321.6 389.3 321.6 386C321.6 382.7 324.3 380 327.6 380C330.9 380 333.6 382.7 333.6 386C333.6 389.3 330.9 392 327.6 392ZM355.6 249C352.3 249 349.6 246.3 349.6 243C349.6 239.7 352.3 237 355.6 237C358.9 237 361.6 239.7 361.6 243C361.6 246.3 358.9 249 355.6 249ZM322.6 210C319.3 210 316.6 207.3 316.6 204C316.6 200.7 319.3 198 322.6 198C325.9 198 328.6 200.7 328.6 204C328.6 207.3 325.9 210 322.6 210ZM282.5 186C279.2 186 276.5 183.3 276.5 180C276.5 176.7 279.2 174 282.5 174C285.8 174 288.5 176.7 288.5 180C288.5 183.3 285.8 186 282.5 186ZM218.4 186C215.1 186 212.4 183.3 212.4 180C212.4 176.7 215.1 174 218.4 174C221.7 174 224.4 176.7 224.4 180C224.4 183.3 221.7 186 218.4 186ZM166.3 209C163 209 160.3 206.3 160.3 203C160.3 199.7 163 197 166.3 197C169.6 197 172.3 199.7 172.3 203C172.3 206.3 169.6 209 166.3 209ZM204.3 246C201 246 198.3 243.3 198.3 240C198.3 236.7 201 234 204.3 234C207.6 234 210.3 236.7 210.3 240C210.4 243.3 207.7 246 204.3 246ZM289.5 249C286.2 249 283.5 246.3 283.5 243C283.5 239.7 286.2 237 289.5 237C292.8 237 295.5 239.7 295.5 243C295.5 246.3 292.8 249 289.5 249Z'/%3E%3C/svg%3E");
            height: 24px;
            width: 24px;
            margin-top: -12px;
            padding-left: 8px;
            padding-right: 18px; 
          }
  - type: history-graph
    title: some title
    entities:
      - sun.sun
    card_mod:
      style: *ref_style

Styling is same for both cards.

For cards w/o ha-card like “horizontal-stack” & “grid”:

code

type: vertical-stack
cards:
  - type: custom:mod-card
    card:
      type: horizontal-stack
      title: some title
      cards: &ref_cards
        - type: entity
          entity: sun.sun
        - type: button
          entity: sun.sun
    card_mod:
      style: &ref_style
        :first-child $: |
          .card-header {
            display: flex !important;
            align-items: center;
            color: red !important;
          } 
          .card-header:before {
            content: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgb(47,166,242)' d='M257.5 420L286.6 391H313.4C315.5 396.8 321 401 327.6 401C335.9 401 342.6 394.3 342.6 386C342.6 377.7 335.9 371 327.6 371C321.1 371 315.5 375.2 313.4 381H282.4L255.4 407.9V375L287.5 342.9H339.4C341.5 348.7 347 352.9 353.6 352.9C361.9 352.9 368.6 346.2 368.6 337.9C368.6 329.6 361.9 322.9 353.6 322.9C347.1 322.9 341.5 327.1 339.4 332.9H297.5L327.5 303V278L349.1 256.5C351.1 257.4 353.3 258 355.6 258C363.9 258 370.6 251.3 370.6 243C370.6 234.7 363.9 228 355.6 228C347.3 228 340.6 234.7 340.6 243C340.6 245.3 341.1 247.5 342.1 249.5L327.6 264V218.2C333.4 216.1 337.6 210.6 337.6 204.1C337.6 195.8 330.9 189.1 322.6 189.1C314.3 189.1 307.6 195.8 307.6 204.1C307.6 210.6 311.8 216.2 317.6 218.2V264L303.1 249.5C304 247.5 304.6 245.3 304.6 243C304.6 234.7 297.9 228 289.6 228C281.3 228 274.6 234.7 274.6 243C274.6 251.3 281.3 258 289.6 258C291.9 258 294.1 257.5 296.1 256.5L317.7 278V298.9L290.7 325.9V306.1C296.5 304 300.7 298.5 300.7 292C300.7 283.7 294 277 285.7 277C277.4 277 270.7 283.7 270.7 292C270.7 298.5 274.9 304.1 280.7 306.1V335.9L255.7 360.9V214.1L276.3 193.6C278.3 194.5 280.5 195.1 282.8 195.1C291.1 195.1 297.8 188.4 297.8 180.1C297.8 171.8 291.1 165.1 282.8 165.1C274.5 165.1 267.8 171.8 267.8 180.1C267.8 182.4 268.3 184.6 269.3 186.6L250.8 205.1L232.3 186.6C233.2 184.6 233.8 182.4 233.8 180.1C233.8 171.8 227.1 165.1 218.8 165.1C210.5 165.1 203.8 171.8 203.8 180.1C203.8 188.4 210.5 195.1 218.8 195.1C221.1 195.1 223.3 194.6 225.3 193.6L245.9 214.1V319L209.8 283V254.2C215.6 252.1 219.8 246.6 219.8 240.1C219.8 231.8 213.1 225.1 204.8 225.1C196.5 225.1 189.8 231.8 189.8 240.1C189.8 246.6 194 252.2 199.8 254.2V273L171.7 245V217.2C177.5 215.1 181.7 209.6 181.7 203.1C181.7 194.8 175 188.1 166.7 188.1C158.4 188.1 151.7 194.8 151.7 203.1C151.7 209.6 155.9 215.2 161.7 217.2V249.1L192.7 280H174.9C172.8 274.2 167.3 270 160.7 270C152.4 270 145.7 276.7 145.7 285C145.7 293.3 152.4 300 160.7 300C167.2 300 172.8 295.8 174.9 290H202.7L245.8 333.1V408L222.8 385V356.2C228.6 354.1 232.8 348.6 232.8 342.1C232.8 333.8 226.1 327.1 217.8 327.1C209.5 327.1 202.8 333.8 202.8 342.1C202.8 348.6 207 354.2 212.8 356.2V375L179.3 341.5C180.2 339.5 180.8 337.3 180.8 335C180.8 326.7 174.1 320 165.8 320C157.5 320 150.8 326.7 150.8 335C150.8 343.3 157.5 350 165.8 350C168.1 350 170.3 349.5 172.3 348.5L205.8 382H188C185.9 376.2 180.4 372 173.8 372C165.5 372 158.8 378.7 158.8 387C158.8 395.3 165.5 402 173.8 402C180.3 402 185.9 397.8 188 392H215.8L243.9 420H104.5C100.2 420 96.7 416.5 96.7 412.2V279H61.3C56.1 279 52 274.8 52 269.7C52 267.2 53 264.9 54.7 263.1L242.2 73.4C246.7 68.8 254.1 68.8 258.7 73.3L258.8 73.4L356.7 172V153.8C356.7 149.5 360.2 146 364.5 146H397C401.3 146 404.8 149.5 404.8 153.8V220.7L446.4 263.1C450 266.8 450 272.7 446.3 276.3C444.6 278 442.2 279 439.8 279H404.9V412.2C404.9 416.5 401.4 420 397.1 420H257.5ZM173.3 393C170 393 167.3 390.3 167.3 387C167.3 383.7 170 381 173.3 381C176.6 381 179.3 383.7 179.3 387C179.3 390.3 176.6 393 173.3 393ZM217.4 348C214.1 348 211.4 345.3 211.4 342C211.4 338.7 214.1 336 217.4 336C220.7 336 223.4 338.7 223.4 342C223.4 345.3 220.7 348 217.4 348ZM165.3 341C162 341 159.3 338.3 159.3 335C159.3 331.7 162 329 165.3 329C168.6 329 171.3 331.7 171.3 335C171.3 338.3 168.6 341 165.3 341ZM160.3 291C157 291 154.3 288.3 154.3 285C154.3 281.7 157 279 160.3 279C163.6 279 166.3 281.7 166.3 285C166.3 288.3 163.6 291 160.3 291ZM285.5 298C282.2 298 279.5 295.3 279.5 292C279.5 288.7 282.2 286 285.5 286C288.8 286 291.5 288.7 291.5 292C291.5 295.3 288.8 298 285.5 298ZM353.6 344C350.3 344 347.6 341.3 347.6 338C347.6 334.7 350.3 332 353.6 332C356.9 332 359.6 334.7 359.6 338C359.6 341.3 356.9 344 353.6 344ZM327.6 392C324.3 392 321.6 389.3 321.6 386C321.6 382.7 324.3 380 327.6 380C330.9 380 333.6 382.7 333.6 386C333.6 389.3 330.9 392 327.6 392ZM355.6 249C352.3 249 349.6 246.3 349.6 243C349.6 239.7 352.3 237 355.6 237C358.9 237 361.6 239.7 361.6 243C361.6 246.3 358.9 249 355.6 249ZM322.6 210C319.3 210 316.6 207.3 316.6 204C316.6 200.7 319.3 198 322.6 198C325.9 198 328.6 200.7 328.6 204C328.6 207.3 325.9 210 322.6 210ZM282.5 186C279.2 186 276.5 183.3 276.5 180C276.5 176.7 279.2 174 282.5 174C285.8 174 288.5 176.7 288.5 180C288.5 183.3 285.8 186 282.5 186ZM218.4 186C215.1 186 212.4 183.3 212.4 180C212.4 176.7 215.1 174 218.4 174C221.7 174 224.4 176.7 224.4 180C224.4 183.3 221.7 186 218.4 186ZM166.3 209C163 209 160.3 206.3 160.3 203C160.3 199.7 163 197 166.3 197C169.6 197 172.3 199.7 172.3 203C172.3 206.3 169.6 209 166.3 209ZM204.3 246C201 246 198.3 243.3 198.3 240C198.3 236.7 201 234 204.3 234C207.6 234 210.3 236.7 210.3 240C210.4 243.3 207.7 246 204.3 246ZM289.5 249C286.2 249 283.5 246.3 283.5 243C283.5 239.7 286.2 237 289.5 237C292.8 237 295.5 239.7 295.5 243C295.5 246.3 292.8 249 289.5 249Z'/%3E%3C/svg%3E");
            height: 24px;
            width: 24px;
            margin-top: 0px;
            padding-left: 8px;
            padding-right: 18px; 
          }
  - type: custom:mod-card
    card:
      type: grid
      title: some title
      cards: *ref_cards
    card_mod:
      style: *ref_style

Note a difference in “margin-top: 0px;” for this style.
I have no idea why I have to set a negative margin to the Entities & history-graph cards.

matata · October 30, 2023, 9:24pm

Hello, please, card_mode not working with entities? Or what is my fault?

Ildar_Gabdullin · October 30, 2023, 9:44pm

Do you have card_mod installed?
If it is installed - check if it is loaded in Code Inspector (F12 in Chrome, ??? in another browser):

Ildar_Gabdullin · October 31, 2023, 4:35am

Tile card - adding a button:

code

type: custom:mod-card
card_mod:
  style:
    hui-horizontal-stack-card:
      $: |
        div#root {
          display: grid;
        }
        div#root > * {
          grid-column-start: 1;
          grid-row-start: 1;
          margin: 0px;
        }
        div#root > *:nth-child(2) {
          --ha-card-border-width: 0px;
          --ha-card-background: rgba(0,0,0,0.0);
          width: 15% !important;
          min-width: calc(40px + 2 * 12px);
          height: calc(40px + 2 * 12px);
          justify-self: self-end;
        }
    .: |
      ha-card {
        border: none;
      }
card:
  type: horizontal-stack
  cards:
    - type: tile
      entity: fan.virtual_fan_kitchen_test
      features:
        - type: fan-speed
    - type: tile
      entity: light.bkomnata_ceiling
      card_mod:
        style:
          ha-tile-info $: |
            .info .secondary {
              display: none !important;
            }
          .: |
            .content {
             flex-direction: row-reverse !important;
            }
            .content .icon-container {
              margin-inline-end: 12px;
            }
            mwc-ripple {
              display: none;
            }

Pico1965 · October 31, 2023, 6:54am

I would like to know if the add-on is correctly installed since I have some errors at the top of the page:

Browser: Firefox 119

My configuration.yaml:

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

ManuelV · November 1, 2023, 1:21pm

I’m trying to modify this card because in mobile view, right side is too wide and left side too narrow, so the left part doesn’t show the whole name and the left have too much space.

This is the card:

type: entities
entities:
  - entity: input_datetime.cambio_luz_numero
    name: Luz Número
    type: custom:secondaryinfo-entity-row
    secondary_info: |-
      <b style='color:red'> 
        {% set dt = states('input_datetime.aviso_cambio_numero') | as_datetime %}
        {{ dt.strftime("%d-%m-%Y") }}
      </b>
  - entity: input_datetime.limpiafondos_piscina
    name: Limpiafondos
    type: custom:secondaryinfo-entity-row
    secondary_info: |-
      <b style='color:red'> 
        {% set dt = states('input_datetime.aviso_limpiafondos_piscina') | as_datetime %}
        {{ dt.strftime("%d-%m-%Y") }}
      </b>
  - entity: input_datetime.rellenado_descalcificador
    name: Descalcificador
    type: custom:secondaryinfo-entity-row
    secondary_info: |-
      <b style='color:red'> 
        {% set dt = states('input_datetime.aviso_rellenado_descalcificador') | as_datetime %}
        {{ dt.strftime("%d-%m-%Y") }}
      </b>
  - entity: input_datetime.cepillos_de_dientes
    name: Cepillos de Dientes
    type: custom:secondaryinfo-entity-row
    secondary_info: |-
      <b style='color:red'> 
        {% set dt = states('input_datetime.aviso_cepillos_de_dientes') | as_datetime %}
        {{ dt.strftime("%d-%m-%Y") }}
      </b>
  - entity: input_datetime.filtro_frigorifico
    name: Filtro Frigorífico
    type: custom:secondaryinfo-entity-row
    secondary_info: |-
      <b style='color:red'> 
        {% set dt = states('input_datetime.aviso_filtro_frigorifico') | as_datetime %}
        {{ dt.strftime("%d-%m-%Y") }}
      </b>
  - entity: input_datetime.cambio_filtro_ventilacion
    icon: mdi:wind-power
    name: Filtro Ventilación
    type: custom:secondaryinfo-entity-row
    secondary_info: |-
      <b style='color:red'> 
        {% set dt = states('input_datetime.aviso_cambio_filtro_ventilacion') | as_datetime %}
        {{ dt.strftime("%d-%m-%Y") }}
      </b>
title: Recordatorios

I’ve tried to add this:

        card_mod:
          style:
            ha-time-input $ ha-base-time-input $:
              ha-textfield:
                $: |
                  .mdc-text-field {
                    height: 40px !important;
                  }
              ha-select $: |
                .mdc-select__anchor {
                  height: 40px !important;
                }

To try to modify width then, but I see no changes no matter what change I made.

Can you please help me?

VanDeFish · November 1, 2023, 11:25pm

Hi,
is it possible to adjust the height of the text? I would like to have the text a little higher:

type: custom:mushroom-template-card
            primary: Klima
            secondary: ''
            icon: mdi:home-thermometer-outline
            layout: vertical
            icon_color: blue
            tap_action:
              action: navigate
              navigation_path: media
            card_mod:
              style: |
                ha-card { 
                  background: var(--card-background-color);
                  width: 50px;
                  height: 80px !important;
                  border-radius: 30px;
                  margin-left: auto;
                  margin-right: 20px;
                  margin-bottom: 2px;
                  --card-primary-font-size: 9px;
                  --card-secondary-font-size: 10px;
                  --secondary-text-color: white;
                  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
                }

2023-11-02 00_25_07-Window

Thank you.

Krivatri · November 2, 2023, 9:14am

you could add a secondary text and make it the color of the background.
but your icon will go up too.

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Klima
    secondary: '.'
    icon: mdi:home-thermometer-outline
    layout: vertical
    icon_color: blue
    tap_action:
      action: navigate
      navigation_path: media
    card_mod:
      style: |
        ha-card { 
          background: var(--card-background-color);
          width: 50px;
          height: 80px !important;
          border-radius: 30px;
          margin-left: auto;
          margin-right: 20px;
          margin-bottom: 2px;
          --card-primary-font-size: 9px;
          --card-secondary-font-size: 10px;
          --secondary-text-color: var(--card-background-color);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

DrMor · November 2, 2023, 9:45am

Trying to achieve something with the shopping list card. I’d like it to be flex-wrap style, something like this:

I tried to add flex-wrap: wrap in several places, it didn’t seem to have any effect.
Also to wrap each item from the shopping list, along with its checkbox into something that looks like a “chip”. This will allow putting a shopping list in a wider card while saving space (having more items visible before scrolling will be needed).

I used most of the card_mod tricks from here:

But it still didn’t help me get to the flex design I wanted…

Any assistance will be highly appreciated…

dimitri.landerloos · November 2, 2023, 9:56am

Check out my guide linked in my profile. Specifically made for mushroom with card mod

    mushroom-state-info {
      position: relative;
      bottom: 8px;
    }

gedger · November 2, 2023, 10:05am

Thought I would share how to use YAML anchors and card_mod as it’s not immediately obvious, well it wasn’t for me! I wanted to colour the icons on a glance card to be dependant on the value.

Putting a card_mod section on every item is a pain so you can use an Anchor to repeat a code section.

my.colors:
  - card_mod: &ref_0
      style: |
        state-badge {
        {% set val = (states(config.entity)|int) %}
        {% if val > 70 %}
        color: red;
        {% elif val > 45 %}
        color: green;
        {% else %}
        color: orange
        {% endif %}
        }
show_name: true
show_icon: true
show_state: true
type: glance
entities:
  - entity: sensor.study_humidity
    name: Study
    card_mod: *ref_0
  - entity: sensor.garage_humidity
    name: Garage
    card_mod: *ref_0
  - entity: sensor.office_humidity
    name: Office
    card_mod: *ref_0
  - entity: sensor.bedroom_humidity
    name: Bedroom
    card_mod: *ref_0
  - entity: sensor.caravan_humidity
    name: Caravan
    card_mod: *ref_0
  - entity: sensor.kitchen_humidity
    name: Kitchen
    card_mod: *ref_0
  - entity: sensor.outside_humidity
    name: Outside
    card_mod: *ref_0
  - entity: sensor.utility_humidity
    name: Utility
    card_mod: *ref_0
  - entity: sensor.bathroom_humidity
    name: Bathroom
    card_mod: *ref_0
  - entity: sensor.workshop_humidity
    name: Workshop
    card_mod: *ref_0
  - entity: sensor.living_room_humidity
    name: Living Rm
    card_mod: *ref_0
  - entity: sensor.guest_bedroom_humidity
    name: Guest Bed
    card_mod: *ref_0
title: Humidity
state_color: true

Sometimes, for a reason I don’t understand, HA will expand the *ref_0 to the Anchor values rather than leave it as *ref_0, which kinda defeats the objective but mostly it leaves as is. This means you can change the code/colours without having to do it to every entity.

May help someone else.

CChris · November 3, 2023, 10:11am

Hi, does anyone know, how to change the Tile-Background color?

When I select a color within the default options of the card,
Then the Tile Card does have a corresponding color when I hover the mouse ofer it:

I have implemented CardMod on some tiles, where the Icon Color should change based on the selected value.
For those cards, the background color of the tile is always the default “grey”

this is my current card-mod config for the above card:

card_mod:
  style: |
    .tile {
       {% if is_state('select.openwb_lademodus', 'PV-Laden') %}
          --tile-color:var(--green-color); 
       {% elif is_state('select.openwb_lademodus', 'Sofortladen') %}
          --tile-color:var(--red-color); 
       {% elif is_state('select.openwb_lademodus', 'Standby') %}
          --tile-color:var(--blue-color); 
       {% elif is_state('select.openwb_lademodus', 'Min+PV-Laden') %}
          --tile-color:var(--lime-color); 
       {% elif is_state('select.openwb_lademodus', 'Stop') %}
          --tile-color:var(--grey-color); 
       {% endif %}
      }

dimitri.landerloos · November 3, 2023, 1:18pm

Example:
Untitled video - Made with Clipchamp - 2023-11-03T132440.190

card_mod:
  style: 
    mwc-ripple$: |
      .mdc-ripple-surface::after {
        background-color: yellow !important;
        opacity: 0.5 !important;
      }
      .mdc-ripple-surface--hover::before {
        background-color: blue !important;
        opacity: 0.2 !important;
      }

The ::after is the most important one to change as this is on the click. The hover::before is with a mouse hover so isnt so important for mobile at least

Opacity not needed if you only want to change the color.

iamrufus · November 3, 2023, 3:48pm

Being very new to home assistant and being overwhelmed on how to add custom css with card-mod can i just ask what does the ‘$’ represent in the code. I am trying to add a simple bottom border to my horizontal stack card but cant for the life of me work out how to do it as its inside a shadow dom and i keep seeing references to this ‘$’ in a selector.

card_mod:
  style: |
    mwc-ripple$: |
      .mdc-ripple-surface::after {
        background-color: yellow !important;
        opacity: 0.5 !important;
      }
      .mdc-ripple-surface--hover::before {
        background-color: blue !important;
        opacity: 0.2 !important;
      }

dimitri.landerloos · November 3, 2023, 4:06pm

$ means the object is in a shadow root of another so here is the example:

i cant refer to .mdc-ripple-surface without entering the shadow root of mwc-ripple first.