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

svkoch · September 4, 2024, 12:19am

I have a similar problem to:

I have type: entities, type: conditional, type: 'custom:template-entity-row'

I want to recolor the State (“Open”) to purple.

type: entities
entities:
  - type: conditional
    conditions:
      - entity: input_boolean.confirm_door_open
        state: 'off'
    row:
      type: 'custom:template-entity-row'
      entity: lock.wohnungstur
      name: 'Wohnungstür'
      icon: mdi:door-closed-lock
      state: 'Open'
      tap_action:
        action: call-service
        service: script.temporarily_confirm_door_opening_request

<ha-card class="type-entities">
  <div id="states" class="card-content">
    <div>
      <hui-conditional-row class="type-conditional">
        <template-entity-row>
		  <!--#shadow-root (Open)-->
            <div id="wrapper" class="">
              <state-badge class=" pointer " statecolor="" icon=""></state-badge>
              <div class=" info pointer ">
                Wohnungstür
                <div class="secondary">
                </div>
              </div>
              <div class="state">
                Open
              </div>
            </div>
            <div id="staging">
              <hui-generic-entity-row no-secondary="">
              </hui-generic-entity-row>
            </div>
        </template-entity-row>
      </hui-conditional-row>
    </div>
  </div>
</ha-card>

(hope I copied it correctly with the shadow root)

For the life of me I can’t figure out the corect combination between the css levels, shadow roots etc.

This is one of the endless combinations I tried:

card_mod:
  style:
    hui-conditional-row:
      template-entity-row$: |
        .state {
          color: purple;
          font-weight: bold;
        }

I’d appreciate some help.

Ildar_Gabdullin · September 4, 2024, 7:10am

as a starting point:

type: entities
entities:
  - input_boolean.test_boolean
  - type: conditional
    conditions:
      - entity: input_boolean.test_boolean
        state: 'off'
    row:
      type: custom:template-entity-row
      entity: sun.sun
    card_mod:
      style:
        template-entity-row $: |
          div#wrapper {color: red}

Eigeplackter · September 4, 2024, 5:19pm

Hello everybody,

I’m not sure, if the following is an issue with card-mod or with bubble-card.

Generally bubble-card works as described, just one thing …

I’d like to replace the lower section part (Klima and the 2 following card) with a popup-card.
I added my standard style settings to the card

The card with the rounded border is the popup-button-card, with the following code:

type: custom:bubble-card
card_type: button
button_type: name
name: Klima
icon: mdi:temperature-celsius
button_action:
  tap_action:
    action: navigate
    navigation_path: '#showtime'
card_layout: large
card_mod:
  style: |
    ha-tile-icon {
      --mdc-icon-size: 30px;
    }
    ha-icon-button {
      width: 90px !important;
      height: 90px !important;
    }
    ha-card {
      --ha-card-background: #;
      font-size: 40px;
      border-radius: 15px;
      box-shadow: rgba(195, 255, 104, 1) 0px 1px 50px;
    }
    ha-card {
    --primary-text-color: grey;
    --text-align: center !important;
    }

As you can see it accepts some card-mod styles (border-radius & primary-text-color), and ignores others (box-shadow, text-align and font-size)

I moved the card to the end, to show the box-shadow in the 1st picture is actually those of the adjactend cards.

For the sake of completeness, the actual popup with the working styles

I traced the element with inspector, but couldnt make it work with:

.bubble-name {…

Sp33dFr34k · September 4, 2024, 6:18pm

Thanks a lot for the detailed explanation, appreciate it!

jeroenvdd89 · September 6, 2024, 8:14am

Anyone got a clue about this?

loocd · September 6, 2024, 12:15pm

I’m not working with section, but I wouldn’t know how you’d target this, as usually you go after the ha-card element.

If I wanted to achieve this I’d look into the card_mod themes, which probably allow you to do this if you find the right dom navigation + selectors.

stephanschleichstr13 · September 6, 2024, 6:03pm

someone knows why this code does not set my background?

card_mod:
  style: |
    ha-card {
      background: url('{{ state_attr("media_player.firetv_stick_4k_max", "entity_picture") }}') no-repeat center;
      background-size: cover;
    }

Ildar_Gabdullin · September 6, 2024, 6:12pm

Works fine:

Check what is a value of that attribute.
And check with this simplest just in case:

card_mod:
  style: |
    ha-card {
      background: red no-repeat center;
      background-size: cover;
    }

stephanschleichstr13 · September 6, 2024, 6:13pm

thanks for reply, this is the value

entity_picture: >-
  /api/media_player_proxy/media_player.firetv_stick_4k_max?token=6b6af85b5118fb9a51fcdf870101fbe7b34f7172045da9cc16ecddce0e54be35&cache=8673bbbc1758d827

this works for example, in the browser but not via card_mod

https://homeassistant.local:8123/api/media_player_proxy/media_player.firetv_stick_4k_max?token=6b6af85b5118fb9a51fcdf870101fbe7b34f7172045da9cc16ecddce0e54be35&cache=314130e6a060465f

Ildar_Gabdullin · September 6, 2024, 6:14pm

Could be an issue with your networking.
And check with “red” as suggested.

stephanschleichstr13 · September 6, 2024, 6:15pm

can it be that the integration card does nto allow this?
im using “custom:firemote-card”

Ildar_Gabdullin · September 6, 2024, 6:16pm

The 1st rule of testing: check with the simplest setup. Means - with a stock card.

stephanschleichstr13 · September 6, 2024, 6:16pm

i have testing your “red” background idea, this does not work, so it looks like the problem is there the Card

Ildar_Gabdullin · September 6, 2024, 6:22pm

try adding “!important”

stephanschleichstr13 · September 6, 2024, 6:44pm

ah yeah thats it, thank you

Eigeplackter · September 6, 2024, 11:16pm

Ok the issue with text alignment was solved, but I cannot get my regular
box-shadow working. Would be really grateful for help.

type: custom:bubble-card
card_type: button
button_type: name
name: Wetter
icon: mdi:weather-partly-cloudy
button_action:
  tap_action:
    action: navigate
    navigation_path: '#wetter'
card_layout: large
layout-options:
  grid_rows: 1
  grid_columns: 2
layout_options:
  grid_columns: full
styles: |2-
      ha-card {
          margin-top: 0;
          background: none;
          opacity: 1;
      }
      .is-unavailable {
          opacity: 0.5;
      }

      .bubble-button-card-container {
          position: relative;
          width: 100%;
          height: 50px;
          background-color: var(--background-color-2,var(--secondary-background-color));
          border-radius: 32px;
          overflow: scroll;
          touch-action: pan-y;
      }

      .bubble-button-card,
      .bubble-range-slider,
      .bubble-button-background {
          display: flex;
          position: absolute;
          justify-content: space-between;
          align-items: center;
          height: 100%;
          width: 100%;
          transition: background-color 1.5s;
      }
      .bubble-button-background {
          background-color: var(--bubble-button-background-color);
          opacity: .5;
          border-radius: 32px;
      }
      .bubble-range-fill {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          width: 100%;
          left: -100%;
          transition: all .3s;
      }
      .is-dragging .bubble-range-fill {
          transition: none;
      }
      .is-light .bubble-range-fill {
          opacity: 0.5;
      }
      .is-unavailable .bubble-button-card,
      .is-unavailable .bubble-range-slider {
          cursor: not-allowed;
      }
      .bubble-range-slider {
          cursor: ew-resize;
          border-radius: 25px;
          overflow: hidden;
      }
      .bubble-icon-container {
          display: flex;
          flex-wrap: wrap;
          align-content: center;
          justify-content: center;
          min-width: 38px;
          min-height: 38px;
          margin: 150px;
          border-radius: 50%;
          background-color: var(--card-background-color, var(--ha-card-background));
          overflow: hidden;
          position: relative;
          cursor: pointer;
      }
      .bubble-icon-container::after {
          content: '';
          background-color: currentColor;
          position: absolute;
          display: block;
          width: 100%;
          height: 100%;
          transition: all 1s;
          left: 0;
          right: 0;
          opacity: 0;
      }
      .is-light.is-on .bubble-icon-container::after {
          opacity: 0.2;
      }
      .is-unavailable.is-light .bubble-icon-container::after {
          opacity: 0;
      }

      .bubble-icon {
          display: flex;
          opacity: 0.6;
      }

      .is-on .bubble-icon {
        filter: brightness(1.1);
        opacity: 1;
      }

      .bubble-entity-picture {
          background-size: cover;
          background-position: center;
          height: 100%;
          width: 100%;
          position: absolute;
      }

      .bubble-name,
      .bubble-state {
          display: flex;
          position: relative;
          white-space: nowrap;
      }

      .bubble-name-container {
          display: flex;
          line-height: 18px;
          flex-direction: column;
          justify-content: center;
          flex-grow: 1;
          margin: 0 160px 0 4px;
          pointer-events: none;
          position: relative;
          overflow: hidden;
      }

      .bubble-name {
          font-size: 25px;
          font-weight: 600;
      }

      .bubble-state {
          font-size: 12px;
          font-weight: normal;
          opacity: 0.7;
      }

      .bubble-feedback-element {
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
          width: 100%;
          height: 100%;
          background-color: rgb(0,0,0);
          pointer-events: none;
      }

      @keyframes tap-feedback {
          0% {transform: translateX(-100%); opacity: 0;}
          64% {transform: translateX(0); opacity: 0.1;}
          100% {transform: translateX(100%); opacity: 0;}
      }

      .large .bubble-button-card-container {
        height: 56px;
        border-radius: 32px;
      }

      .large .bubble-icon-container {
        --mdc-icon-size: 40px;
        min-width: 42px !important;
        min-height: 42px !important;
        margin-left: 8px;
      }

      .rows-2 .bubble-sub-button-container {
        flex-direction: column;
        gap: 4px !important;
        display: grid !important;
        grid-template-columns: repeat(2, min-content);
        grid-template-rows: repeat(2, 1fr);
        grid-auto-flow: column;
        width: auto;
        padding-right: 14px;
      }

      .rows-2 .bubble-sub-button {
        height: 20px !important;
      }
  .bubble-button-card-container {
    background: rgba(12,120,50,0.5) !important;
  }     
card_mod:
  style: |
    ha-card {
     --primary-text-color: grey;
     --ha-card-background: #;
     font-size: 100px;
     border-radius: 15px;
     box-shadow: rgba(195, 255, 104, 1) 0px 1px 50px;
     }

hander · September 7, 2024, 6:44pm

Hello masters!
There is any way to style the header text of a grid? I know about card mod, but i don’t know how to use it in a grid card.
Thanks!

Stef42300 · September 7, 2024, 8:05pm

Hello,

I want to delete the transparent background behind the words “Prévisions 14 jours”

- type: entities
  entities:
    - type: custom:text-divider-row
      text: Prévisions 14 Jours
      align: left
  card_mod:
    style: |
      ha-card {
        margin-top: -50px;
        background: none;
        --text-divider-line-size: 0px;
      }

For example :

There is a “shadow-root”.
If I understood correctly, I must go to “text-divider-row” just above the “shadow-root” and go to “text-divider-left span”.
I copied the first selector (#states > div > text-divider-row) and copy the second (div > h2 > span). I’ve tried to mix JS and YAML but it doesn’t work.
Can you help me?
Thanks!

style: 
  .: |
    ha-card {
      margin-top: -50px;
      background: none;
      --text-divider-line-size: 0px;
    }
  '#states':
    'div':
      'text-divider-row':
        $: |
          div > h2 > span {
            background: none;
          }

Ildar_Gabdullin · September 7, 2024, 9:43pm

1st post - link at the bottom - grid

Ildar_Gabdullin · September 7, 2024, 9:45pm

1st post - link at the bottom - text-divider-row