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

          - type: conditional
            conditions:
              - entity: group.lichten_en_smartplugs
                state: "on"
            card:
              type: horizontal-stack
              cards:
                  - type: custom:button-card
                    template: my-blank-button-10px
                  - type: custom:auto-entities
                    show-empty: false
                    card:
                      type: glance
                      show_state: false
                      columns: 5
                      style: |
                        ha-card {
                          border-radius: 12px;
                          font-family: Helvetica;
                          font-size: 11px;
                        }
                        .entities.no-header {
                          padding: 8px 0px 0px 0px !important;
                        }
                        .entity {
                          margin: 0px !important;
                        }

                        .entity:
                          $: |
                            state-badge {
                              margin: 0px !important;
                            }

                    filter:
                      include:
                        - domain: light
                          state: "on"
                          options:
                            tap_action:
                              action: toggle
                        - domain: switch
                          state: "on"
                          options:
                            tap_action:
                              action: toggle
                  - type: custom:button-card
                    template: my-blank-button-10px

Try this:

          - type: conditional
            conditions:
              - entity: group.lichten_en_smartplugs
                state: "on"
            card:
              type: horizontal-stack
              cards:
                  - type: custom:button-card
                    template: my-blank-button-10px
                  - type: custom:auto-entities
                    show-empty: false
                    card:
                      type: glance
                      show_state: false
                      columns: 5
                      style:
                        .: |
                          ha-card {
                            border-radius: 12px;
                            font-family: Helvetica;
                            font-size: 11px;
                          }
                          .entities.no-header {
                            padding: 8px 0px 0px 0px !important;
                          }
                          .entity {
                            margin: 0px !important;
                          }

                        .entity:
                          $: |
                            state-badge {
                              margin: 0px !important;
                            }

                    filter:
                      include:
                        - domain: light
                          state: "on"
                          options:
                            tap_action:
                              action: toggle
                        - domain: switch
                          state: "on"
                          options:
                            tap_action:
                              action: toggle
                  - type: custom:button-card
                    template: my-blank-button-10px

Brilliant ! You are the king !

Many thanks for the help and education, Kendell !

Have you tried to use “search” here?
Keywords “glance” & “margin”.
Your case was discussed above.

The code was correct, however .: | needed to be added, style: | needed to be changed to style:, and a block needed to be indented.

hi all, i have a problem with styling (Theme) the service: browser_mod.popup

the normale Popup´s works all fine with the new styling: card-mod-more-info-yaml
But the Pop with service: browser_mod.popup dont work.

this works fine:
popup-3
popup-2

dont work:
popup-1

the Button with the browser popup:

action: call-service
service: browser_mod.popup
service_data:
  deviceID: this
  title: Wohnzimmer Status
  card:
    type: custom:mod-card
    style: |
      $: |
        .mdc-dialog .mdc-dialog__scrim {
          backgrund: none !important;
        }
      .: |
        :host {
          backgrund: none !important;
        }
    card:
      type: horizontal-stack
      cards:
        - type: entities
          state_color: true
          show_header_toggle: false
          entities:
            - entity: media_player.samsung_tv_q9075
              tap_action:
                action: none
            - entity: media_player.denon_avr_x4200w
              tap_action:
                action: none
            - entity: media_player.vu_uno4k_se
              tap_action:
                action: none

how can i style the browser_mod.popup ? :pray: Thanks All!

Change the first style: | to style:.

1 Like

Tldr: I want it such that I only ever see the 2nd picture, and never the first.

Can someone tell me what “this” is in the attached screenshot (1st picture) of my wall-mounted tablet? I thought it was the header but instead of it being hidden, it’s still there but now it’s just all white instead of the normal header look. With this dumb white space, it also crops/cuts off the bottom of the full image. I’ve tried hiding the header with both card-mod and the kiosk-mode card in HACS. No matter what I do, I cannot get rid of the white space. I can hide it by merely scrolling down so that I both no longer see the top white header and can now see the remaining full, uncropped image (2nd picture).


What does it show in inspect element?

@KTibow wuhuu it works now!!

action: call-service
service: browser_mod.popup
service_data:
  deviceID: this
  title: Wohnzimmer Status
  card:
    type: custom:mod-card
    card:
      type: horizontal-stack
      cards:
        - type: entities
          state_color: true
          show_header_toggle: false
          entities:
            - entity: media_player.samsung_tv_q9075
              tap_action:
                action: none
            - entity: media_player.denon_avr_x4200w
              tap_action:
                action: none
            - entity: media_player.vu_uno4k_se
              tap_action:
                action: none
    style:
      .: |
        ha-card {
          background: none !important;
          --ha-card-background: none;
        }
        :host {
          --ha-card-background: none;
          --card-background-color: transparent;
        }

very nice.
what is the difference from style: | to style: ?
i search for a nice manual/agenda from the frontend Styling. But i dont fine it :frowning:

style: | styles the current card. When you use it, you don’t need to put .: | inside of it. However it can’t go inside of some certain types of elements.
style: styles shadow roots, and the current card (if you want).
Your code is more complicated than it could be. Change style: to style: |, remove .: |, and remove two spaces from everything in the styling.

1 Like

A okay! Thanks!
can you show me the best way for the code?
Thank you so much!

I’m trying to create a 10’ view on a smaller monitor, and it is going well for most cards thanks to card-mod, but glance is defeating me on size. I’ve tried the obvious, see below, but there’s some sort of boundary on the entities within the glance. I’ve still got fine tuning to do on the font size for mini graph, but I’m not sure on the glance height.

type: vertical-stack
cards:
  - entities:
      - entity: sensor.current_ozone_level
      - entity: sensor.asthma_index_forecasted_average
      - entity: sensor.allergy_index_today
      - entity: sensor.cold_flu_forecasted_average
    title: Air Quality
    type: glance
    style: |
      ha-card {
        height: 1000px;
        font-size: 3.6rem;
      }
  - cards:
      - entities:
          - entity: sensor.awair_co2
            index: 0
            name: CO2
       <snip>
        type: 'custom:mini-graph-card'
      - entities:
          - entity: sensor.awair_pm2_5
    <snip>
        type: 'custom:mini-graph-card'
    type: horizontal-stack
  - cards:
      - entities:
<snip>
        type: 'custom:mini-graph-card'
    type: horizontal-stack

I don’t understand. What do you want me to help you with?

You can change the height of .entities instead. You should probably set the columns number to 2.

1 Like

Hi,

I’m struggling with getting a display: flex inserted in my code. Figured out where it needs to go in the inspect tools:

But I haven’t been able to figure out where to put it in my code. Here’s a MWE of my ui-lovelace.yaml:

type: picture-elements
image: /local/ui/floorplan/Rez_nuit.png
elements:

  - type: 'custom:decluttering-card'
    template: climate
    variables:
      - temp: sensor.temperature_salon
      - humidity: sensor.humidity_salon
      - title: Salon
      - left: 62%
      - top: 50.5%

And the decluttering template (MWE as well):

climate:
  element:
    type: 'custom:group-element'
    elements:
      - type: icon
        icon: 'mdi:thermometer'
        style:
          left: 2%
          top: 10%
          color: lightgrey
          transform: scale(1.2)
          '--mdc-icon-size': 1.4vw
          pointer-events: none
      - type: state-label
        entity: '[[temp]]'
        tap_action:
          action: call-service
          service: browser_mod.popup
          service_data:
            #popup data
        style:
          left: 33.5%
          top: 50%
          color: lightgrey
          font-size: 0.9vw
      - type: icon
        icon: 'mdi:water-percent'
        style:
          left: 51%
          top: 10%
          color: lightgrey
          transform: scale(1.2)
          '--mdc-icon-size': 1.4vw
          pointer-events: none
      - type: state-label
        entity: '[[humidity]]'
        tap_action:
          action: call-service
          service: browser_mod.popup
          service_data:
            #popup data
        style:
          left: 81.5%
          top: 50%
          font-size: 0.9vw
          color: lightgrey
    style:
      top: '[[top]]'
      left: '[[left]]'
      width: 11%
      height: 3.25%
      justify-content: center
      display: flex
      align-items: center
      background-color: 'rgba(255, 255, 255, 0.4)'
      border-radius: 20vw

I removed my popup configs for readability since they’re not relevant to this conundrum.

Read the docs about shadow-roots.

Read them, unless I’m mistaken, the following should work, but it does not:

  - type: 'custom:decluttering-card'
    template: climate
    variables:
      - temp: sensor.temperature_salon
      - humidity: sensor.humidity_salon
      - title: Salon
      - left: 62%
      - top: 50.5%
    style:
      decluttering-card.element$: |
        group-element#declutter-child {
          display: flex !important;
        }

Shadow-roots are entered using just $ as selector, and (AFAIK) only as a mapping key, not as part of any actual CSS.

It may work like this:

style:
  $: |
    group-element#declutter-child { … }

But it depends on what the root element of custom:decluttering-card is. The example above assumes it’s decluttering-card.element, which may not necessarily be correct.

I believe it only works that way if you’re targeting a row.