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

What is the correct order to use both a class and a extra style?

1:

        card_mod:
          class: content
        style: | 
          ha-card {

Or 2:

        card_mod:
          class: content
          style: | 
            ha-card {

Both seem to work.

As arganto said - happened after moving to material web.
Will update my post dedicated to a slider later.

this one is ok

1 Like

still a bit of a search, because not all variables here seem to be replaced:

  paper-slider-knob-color: var(--accent-color)
  paper-slider-knob-start-color: var(--accent-color)
  paper-slider-pin-color: var(--accent-color)
  paper-slider-active-color: var(--accent-color)
  paper-slider-container-color: linear-gradient(var(--primary-color), var(--secondary-background-color)) no-repeat
  paper-slider-secondary-color: var(--secondary-background-color)
  paper-slider-disabled-active-color: var(--disabled-text-color)
  paper-slider-disabled-secondary-color: var(--disabled-text-color)

Might be good if we could find and post a 1:1 table of replacement variables here

Ive asked Paul for assistance in 2023.11 To-do: Add release title - #289 by Mariusthvdb

Would appreciate a lot if you could find a fay to continue to use the “pointer-events: none” parameter.

I have this small issue with the selection menu. It alters the card configuration.

GIF-231111_200220

type: custom:stack-in-card
mode: vertical
cards:
  - type: vertical-stack
    cards:
      - type: entities
        card_mod:
          style: |-
            ha-card {
              margin-bottom: -18px !important;
              --ha-card-border-width: 0;
            }
        entities:
          - entity: input_select.shopping_places
            name: Local
            card_mod:
              style:
                hui-generic-entity-row $: |
                  state-badge {
                    display: none;
                  }
                  .info {
                    display: none;
                  }
                ha-select $: |
                  .mdc-select__anchor {
                    height: 40px !important;
                    #border: 1px solid rgba(127,127,127,0.5);
                    border-radius: 8px !important;
                  }
                  .mdc-select__selected-text-container {
                    align-self: end;
                  }
                  .mdc-line-ripple::after,
                  .mdc-line-ripple::before {
                    border-bottom-style: none !important;
                  }
                .: |
                  ha-select {
                    height: 40px;
                  }
                  :host {
                    --mdc-menu-item-height: 40px;
                    --mdc-select-fill-color: #272727;
                  }
      - type: entities
        card_mod:
          style: |-
            ha-card {
              margin-bottom: -18px !important;
              --ha-card-border-width: 0;
            }
        entities:
          - entity: input_text.shopping_item_name
            name: Produto
            card_mod:
              style:
                hui-generic-entity-row $: |
                  state-badge {
                    display: none;
                  }
                  .info {
                    display: none;
                  }
                ha-textfield $: |
                  .mdc-text-field {
                    height: 40px !important;
                    #border: 1px solid rgba(127,127,127,0.5);
                    border-radius: 10px !important;
                  }
                  .mdc-text-field__input {
                    align-self: end;
                  }
                  .mdc-line-ripple::after,
                  .mdc-line-ripple::before {
                    border-bottom-style: none !important;
                  }
                .: |
                  ha-textfield {
                    height: 40px;
                  }
                  :host {
                    --mdc-text-field-fill-color: #272727;
                  }
      - type: horizontal-stack
        cards:
          - type: entities
            card_mod:
              style: |-
                ha-card {
                  --ha-card-border-width: 0;
                }
            entities:
              - entity: input_number.shopping_item_number
                card_mod:
                  style:
                    hui-generic-entity-row $: |
                      state-badge {
                        display: none;
                      }
                      .info {
                        display: none;
                      }          
                    ha-textfield $: |
                      .mdc-text-field {
                        height: 40px !important;
                        #border: 1px solid rgba(127,127,127,0.5);
                        border-radius: 10px !important;
                      }
                    .: |
                      :host {
                        margin-right: -18px !important;
                        --mdc-text-field-idle-line-color: transparent !important;
                        --mdc-text-field-hover-line-color: transparent !important;
                        --mdc-theme-error: transparent !important;
                        --mdc-theme-primary: transparent !important;
                        --text-field-padding: 0px 0px 0px 16px;
                        --mdc-text-field-fill-color: #272727;
                      }   
          - type: entities
            card_mod:
              style: |-
                ha-card {
                  --ha-card-border-width: 0;
                }
            entities:
              - entity: input_select.shopping_item_metric
                name: Medida
                card_mod:
                  style:
                    hui-generic-entity-row $: |
                      state-badge {
                        display: none;
                      }
                      .info {
                        display: none;
                      }
                    ha-select $: |
                      .mdc-select__anchor {
                        height: 40px !important;
                        #border: 1px solid rgba(127,127,127,0.5);
                        border-radius: 8px !important;
                      }
                      .mdc-select__selected-text-container {
                        align-self: end;
                      }
                      .mdc-line-ripple::after,
                      .mdc-line-ripple::before {
                        border-bottom-style: none !important;
                      }
                    .: |
                      ha-select {
                        height: 40px;
                      }
                      :host {
                        top: 20px;
                        --mdc-menu-item-height: 40px;
                        --mdc-select-fill-color: #272727;

                      }
      - type: custom:mushroom-chips-card
        card_mod:
          style: |-
            ha-card {
              --chip-border-radius: 10px; 
              --chip-background: rgba(33, 150, 243, 0.2);
              --chip-box-shadow: none;
              --chip-border-width: 0;
              margin-right: 18px;
              margin-bottom: 14px;
            }
        alignment: end
        chips:
          - type: template
            content: Adicionar
            icon: mdi:plus-circle
            icon_color: blue
            tap_action:
              action: call-service
              service: input_button.press
              target:
                entity_id: input_button.shopping_item_add
            double_tap_action:
              action: none
            hold_action:
              action: none

got stuck with a

    style: |
      ha-card {
        height: 450px !important;
      }

got a combination from a state-switch which displays a power-flow-card-plus with differnt custom consumers selected by the state switch.
To keep redundant code as short as possible the power flow itself is split using the decluttering-card, means most of it is within a template.

getting the height adjusted works fine on the power-flow-card on it’s own.
But when being state-switched and decluttered I found no solution. Nor if trying to use the card-mod with the card in a dashboard nor if trying to apply the card-mod lines into the template of the power-flow … anyone with a hint on how to get this solved?

Hi all,

I’m trying to solve a mystery when trying to style four different icons inside a custom:flex-horseshoe-card.

I’m using the following code:

card_mod:
  style:
    .container:
      .card--filter-none:
        .datagroup: |
          g:nth-of-type(1) .icon {
            color: red;
          }

This works fine and styles only the first icon. It also works fine for the third and fourth icon. However when applied to the second icon (only) all four icons get styles. For the life of me I can’t figure out why.

With nth-of-type(1):

With nth-of-type(2):

Hey! I’m trying to do something like that also, can you share the entire card code? with the chips below?

The code was already provided in that post.

image

This is what i get, do you know how can i add the fan buttons below?

Probably it depends on the fan. It may have only “on/off” states or 4 states as described.

Oh I see now, well mine is no a “fan” im using script to send RF to control a fan. do you think there’s a way to draw chips or buttons like that and make them call a script?

Since you chose a conventional “tile” card - you are supposed to use native “features”.
Or you may develop your own custom card.
Or you may create a card based on any stack card combining any cards to get your design.
This is not related to card-mod and cannot achieved by card-mod (it may only be used to “polish” your design).

Picture Glance - distributing icons

image
image
image

code
type: vertical-stack
cards:
  - camera_view: auto
    type: picture-glance
    image: /local/images/test/blue.jpg
    entities:
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: input_boolean.test_boolean
    card_mod:
      style: |
        .box div:nth-child(1) div:nth-child(4) {
          flex-basis: 100%;
        }
        .box div:nth-child(1) {
          flex-wrap: wrap;
        }
  - type: picture-glance
    image: /local/images/test/blue.jpg
    entities:
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: input_boolean.test_boolean
    card_mod:
      style: |
        .box div:nth-child(1) {
          display: grid !important;
          grid-template-columns: repeat(4,1fr);
        }
  - type: picture-glance
    image: /local/images/test/blue.jpg
    entities:
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
    card_mod:
      style: |
        .box div:nth-child(1) div:nth-child(4) {
          flex-basis: 100%;
        }
        .box div:nth-child(1) {
          flex-wrap: wrap;
        }
        .box div:nth-child(2) {
          display: grid !important;
          grid-template-columns: repeat(4,1fr);
          max-height: 80px;
        }
2 Likes

Hi

Trying to change the size of the text for temperature in the custom:hourly-weather card.

It looks like this:

image

In the explorer:

I’ve tried:

card_mod:
                style: |
                  ha-card {
                    background-color: inherit;
                    color: white;
                    border-width: 0px;
                    pointer-events: none;
                  }
                  weather-bar$: |
                    .main axes bar-block bar-block-bottom temperature {
                      color: red !important;
                    }

The ha-card element works, the rest doesn’t.

Thanks
Andy

Try this:

card_mod:
  style:
    .: |
      ha-card {
        background-color: inherit;
        color: white;
        border-width: 0px;
        pointer-events: none;
      }
    weather-bar$: |
      .main axes bar-block bar-block-bottom temperature {
         color: red !important;
      }

Thanks. Doesn’t work - no change.

Thanks for the great help! I managed to change the font of the scrolling bar displaying title and song name.

Unfortunately, this does not work on iPad.

I have made this adjustment (increase the font size of the text, and increase the overall height of the element so that the text can be fully displayed and is not cut off on bottom and top):

type: custom:mini-media-player
entity: media_player.essen
sound_mode: full
name: null
icon: mdi:speaker-play
volume_stateless: false
toggle_power: false
group: false
artwork: full-cover
mini-media-player-scale: 0.5
hide:
  volume: true
  source: true
  power_state: true
  power: true
  controls: true
  icon_state: false
  state_label: true
  info: false
  name: true
  progress: false
  icon: true
info: scroll
replace_mute: next
style: |
  ha-card {
    .mmp-player .mmp-player__core.flex .entity__info .entity__info__media
    {
      font-size: 45px !important;
      max-height: 100px !important;
      line-height: 55px !important;
      height: 55px !important;
      
    }
    .mmp-player .mmp-player__core.flex .entity__info .entity__info__media .attr__media_title
    {
      font-size: 45px !important;
      max-height: 100px !important;
      line-height: 55px !important;
      height: 55px !important;
      
    }    
  }

Works great on PC with Safari and Chrome, but not on iPad.

Do you have any idea what I can change/do to show the same change on iPad?

Whatever related to Safari (especially turned to be “old versions” < 16) seems to be a low-priority things to devs - so no guaranteed output. Try, experiment…