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

[CDRX2]

Thanks for the tip. I’ve tried many combinations, I can’t seem to modify that CSS property. Don’t know if I’m using shadow-root styling wrong or if it’s something else. Here’s an excerpt of the various properties I applied to my mod-card:

      style: |
        "div#staging.grid":
          $: |
            .cards > * {
              margin-top: 0px !important;
            }
            .grid > * {
              margin-top: 0px !important;
            }
            .cards > *, .grid > * {
              margin-top: 0px !important;
            }
        "hui-picture-elements-card":
          $: |
            .cards > * {
              margin: 0px !important;
            }  
            .grid > * {
              margin: 0px !important;
            }  
        "config-template-card":
          $: |
            .cards > *, .grid > * {
              margin-top: 0px !important;
            }

[KTibow (Kendell R)]

You need to go into the shadow-root of hui-layout-card first, then everything else. BTW new syntax:

style: |
  hui-layout-card$div#staging.grid$: |
    yourstuff

[CDRX2]

Thanks for the updated syntax. Since I don’t have a hui-layout-card but a simple layout-car, I’m assuming the latter would be the one to use, correct?

However, I can’t seem to get it to work. My browser dev tools show me a hui-picture-elements-card and a config-template-card which both have the attributes .cards > *, .grid >* set to some margin (the one I want to override).

I’ve tried .cards, .cards >, .cards > *, same with grid, the combination of both, hui-picture-elements.cards > * and all combinations thereof and none seem to get rid of this margin

[KTibow (Kendell R)]

Nope it is hui-layout-card. Can you provide a full reproducible config?

[CDRX2]

Sure.

ui-lovelace.yaml:

title: Dev
views:
- title: Dev
  icon: 'mdi:github'
  panel: true
  badges: []
  path: dev
  cards:
  
    - type: 'custom:mod-card'
      style: |
        hui-layout-card$div#staging.grid$: |
          .cards > *, .grid > * {
            margin-top: 0px !important;
          } 
                
      card:
        type: 'custom:layout-card'
        layout: grid
        gridrows: auto
        gridcols: 23% 77%
        gridgap: 0px
        gridplace: stretch
        cards:
          - !include frontend/sidebar_dev.yaml
  
          - type: 'custom:config-template-card'
            gridrow: 1 / 1
            gridcol: 2 / 2

            entities:
              - ...

            card:   
              type: 'custom:swipe-card'
              parameters:
                effect: 'cube'
                cubeEffect: 
                  shadow: false
                  slideShadows: false
              cards:
                - !include frontend/dev_rez.yaml
                - !include frontend/dev_1er.yaml

sidebar_dev.yaml:

type: picture-elements
image: /local/ui/sidebar/sidebarBG2.png
gridrow: 1 / 1
gridcol: 1 / 2
style: | 
  ha-card {
    padding: 0 !important;
    overflow: hidden;
    background: none !important;
    width: 100%;
  }
  button-card.element {
    top: 0px !important;
    left: 0px !important;
  }

elements:
  - ...

dev_rez.yaml / dev_1er.yaml (both are the same, only pictures and entities change):

type: picture-elements
image: /local/ui/floorplan/Rez_nuit.png
style: |
  ha-card:first-child {
    background: rgba(42, 46, 48, 1)
  }
elements:
  - ...

I truncated the elements of the picture-elements cards, this post would have been way too long. Hope this is what you were looking for. If you require everything, I’ll gladly send it to you via PM.

[KTibow (Kendell R)]

This works for me:

        style:
          layout-card$: |
            .grid > * {
              margin: 0px !important;
            } 

[CDRX2]

Amazing, thank you!!!

[hazio]

Why doesn’t background transparency for cards work on mobile? It shows perfectly fine on the web UI.

This is my card layout:

content: |
  # Lights
style: |
  ha-card {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    margin: 20px 0px 5px 0px;
  }
type: markdown

[DavidFW1960 (David)]

cleared cache on mobile?

[terminus]

Hi Guys, i have two Questions in formatting Icons on a Lovelace Card.

First one: How can I simply change the colors of the icons. I loked for the name of the element in Webpageinspector, it’s “ha-svg-icon”?:

The YAMl of the card ist this:

type: glance
entities:
  - entity: sensor.ics_10
  - entity: sensor.ics_11
  - entity: sensor.ics_12

and at the moment it looks like this:

The Plan is, that the icons has a specifig color (i.e. green) and if the number in Brackets is 1, the backround should blink orange. The color in Brackets is a status attribute (remaining):

Do you have hints for me?

[KTibow (Kendell R)]

Blinking is more complicated. First try this:

entities:
  - entity: sensor.ics_10
    style: |
      state-badge::before {
        color:
        {% if is_state_attr(config.entity, "remaining", "1") %}
        orange
        {% else %}
        green
        {% endif %};
      }
  - entity: sensor.ics_11
    style: |
      state-badge::before {
        color:
        {% if is_state_attr(config.entity, "remaining", "1") %}
        orange
        {% else %}
        green
        {% endif %};
      }
  - entity: sensor.ics_12
    style: |
      state-badge::before {
        color:
        {% if is_state_attr(config.entity, "remaining", "1") %}
        orange
        {% else %}
        green
        {% endif %};
      }

[terminus]

Thank you very much, now my YAML of the Card looks like this:

type: glance
entities:
  - entity: sensor.ics_10
    style: |
      state-badge::before {
        color:
        {% if is_state_attr(config.entity, "remaining", "1") %}
        orange
        {% else %}
        grey
        {% endif %};
      }
  - entity: sensor.ics_11
    style: |
      state-badge::before {
        color:
        {% if is_state_attr(config.entity, "remaining", "1") %}
        orange
        {% else %}
        green
        {% endif %};
      }
  - entity: sensor.ics_12
    style: |
      state-badge::before {
        color:
        {% if is_state_attr(config.entity, "remaining", "1") %}
        orange
        {% else %}
        brown
        {% endif %};
      }

Buuuut the icons are still standard blue. Do I Need the !important attribute? Read it somewhere?

Regards

[KTibow (Kendell R)]

Remove the ::before part, that was an accident

[terminus]

Thank you! So kind from you, teaching me such things!

[ZenTachi]

Hi everyone,
I have read as many posts as I can and tried a few things myself but cannot make this to work.
If someone could help me on how to access the “.value-text” in the image below would be much appreciated

          - type: gauge
            entity: sensor.kitchen_sensor_temperature_offset
            style:
              .: |
                ha-card {
                  padding: 4px;
                }
                ha-gauge {
                  width: 118% !important;
                  max-width: 500% !important;
                }
                ha-gauge:  
                  $:
                    text.value-text { 
                      font-size: 70px;
                    }

[KTibow (Kendell R)]

De-indent the ha-gauge shadow root part.

[terminus]

Thank you again. If the blinking would be complicated, can i additionaly mark the icon on count “one” by coloring the background yellow for example?

[KTibow (Kendell R)]

Can you elaborate?

[terminus]

i tried

background: {% if is_state_attr(config.entity, "remaining", "1") %} yellow {% endif %};

but that didn’t worked out. Is it the right way nevertheless?

  - entity: sensor.ics_12
    style: |
      state-badge {
        color:
        {% if is_state_attr(config.entity, "remaining", "1") %}
        "#FF4500"
        {% else %}
        brown
        {% endif %};
        background: {% if is_state_attr(config.entity, "remaining", "1") %} yellow {% endif %};
      }

[KTibow (Kendell R)]

Try !important