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

this should explain the gradients CSS Gradients

however, there is no true explanation for the non gradient effect I am after (and apparently accidentally found by setting the 2 percentages)

Definitely an interesting topic/insightful subject. I know that link well and don’t understand what causes the non-gradient effect. You’d think the spread would be based on a value of 100%, but that does not appear to be the case.

here is a bit more variation:

            card_mod:
              style: |
                hui-generic-entity-row {
                  padding-right: 16px;
                  margin: 0px -16px;
                  background:
                    {% set kans = states(config.entity)|float(0) %}
                    {% set rest = 100 - kans %}
                    {% if kans >= 75 %} {% set bar = 'gold' %}
                    {% elif kans >= 50 %} {% set bar = 'orange' %}
                    {% elif kans >= 25 %} {% set bar = 'skyblue' %}
                    {% else %} {% set bar = 'gray' %}
                    {% endif %}
                  linear-gradient(to left,ivory {{rest}}%, {{bar}} {{kans}}%);
                  color: var(--primary-color);
                }

with some sky colors in mind… utterly gray day here today, so I changed the template limits to show skyblue… :wink:

    - type: entities
      title: Zonkans
      card_mod:
        class: class-header-margin
        style: |
          ha-card {
            background: transparent;
          }
      entities:
        - entity: sensor.buienradar_sunchance_1d
          name: Morgen
          <<: &style
            card_mod:
              style: |
                hui-generic-entity-row {
                  padding-right: 16px;
                  margin: 0px -16px;
                  background:
                    {% set kans = states(config.entity)|float(0) %}
                    {% set rest = 100 - kans %}
                    {% if kans >= 75 %} {% set bar = 'gold' %}
                    {% elif kans >= 50 %} {% set bar = 'orange' %}
                    {% elif kans >= 25 %} {% set bar = 'skyblue' %}
                    {% else %} {% set bar = 'gray' %}
                    {% endif %}
                    linear-gradient(to left,ivory {{rest}}%, {{bar}} {{kans}}%);
                }
        - entity: sensor.buienradar_sunchance_2d
          name: Overmogen
          <<: *style
        - entity: sensor.buienradar_sunchance_3d
          name: 3 dagen
          <<: *style
        - entity: sensor.buienradar_sunchance_4d
          name: 4 dagen
          <<: *style
        - entity: sensor.buienradar_sunchance_5d
          name: 5 dagen
          <<: *style
        - entity: sensor.diskstation_cpu_utilization_total
          name: Cpu totaal
          <<: *style
        - entity: sensor.processor_use
          <<: *style

suppose it would be even nicer if I could find the way to have the bar background of the rest percentage (the ivory sections now) glow in a gradient of the actual color, a bit like the Tile icon and icon background, or the hover glow of the tile. Must be doable

maybe like this (with colors changed to rgb values, so we can use rgba() for the rest of the bar:

            card_mod:
              style: |
                hui-generic-entity-row {
                  padding-right: 16px;
                  margin: 0px -16px;
                  background:
                    {% set kans = states(config.entity)|float(0) %}
                    {% set rest = 100 - kans %}
                    {% if kans >= 75 %} {% set bar = '255,215,0' %}
                    {% elif kans >= 50 %} {% set bar = '255,165,0' %}
                    {% elif kans >= 25 %} {% set bar = '135,206,235' %}
                    {% else %} {% set bar = '128,128,128' %}
                    {% endif %}
                    /*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{kans}}%);*/
                    linear-gradient(to right, rgb({{bar}}) 0%, rgb({{bar}}) {{kans}}%, rgba({{bar}},0.4) {{kans}}%, rgba({{bar}},0.1) 100%);
                  color: black;
                }

but tbh, I dont really like the gradient as it is not contrasty enough for me:

2 Likes

If anyone is struggling to get the Calendar card to show a full-page agenda when using a vertically oriented tablet and the Fully Kiosk browser (single grid card, single calendar card), here’s the trick.

Instead of setting min-height or just height, you have to redefine the --calendar-height variable as it appears Fully Kiosk is ignoring the !important flag that would otherwise override the height setting.

Granted, this is on an older tablet that I can’t upgrade past Android 8.1, so YMMV. Works on Chrome & FKB. Tested with the latest version of FKB: 1.55.3

            card_mod:
              style:
                ha-full-calendar$:
                  .: |
                    #calendar {
                      --calendar-height: 100vh; 
                    }

Hello everyone,
I wanted to ask for help :slight_smile:

After updating to version 2024.6.0/1/2, my card_mod stopped working properly. Specifically, one configuration of it stopped working.

I am using “position: sticky” for my footer card to have it floating, but it stopped floating. It is now just at the bottom of the dashboard. I welcome any suggestions.
My code is:

type: custom:vertical-stack-in-card
cards:
  - type: custom:decluttering-card
    template: footer_sticky_menu
card_mod:
  style: |
    :host {
      position: sticky !important;
      bottom: 26px;
      margin-bottom: 10px !important;
      animation: 1.2s position ease-in-out;
    }
    @keyframes position {
      0% { bottom: -80px; }
      20% { bottom: -80px; }
      70% { bottom: 26px; }
      90% { bottom: 24px; }
      100% { bottom: 26px; }
    }
    ha-card { 
      background: none;
      border-radius: 26px !important;
    }
    :host:before {
      content: '';
      display: block;
      position: absolute;
      bottom: -26px;
      left: -8px;
      padding-right: 16px;
      height: 130px;
      width: 100%; 
      background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
      pointer-events: none;
      animation: 1.2s opacity ease-in-out;
    }
    @keyframes opacity {
      0% { opacity: 0; }
      20% { opacity: 0; }
      100% { opacity: 1; }
    }

How it was:
a

I would suggest to simplify the case:

  1. Place a standard Entity card instead of that decluttering-card.
  2. Get rid of unimportant styles like animation, “background: none” etc.

Is this your code? If yes - you surely do know how to simplify it.

Hi,
“background: none:” is not unimportant. It makes card look smoother. I did not find other way to do that.

With none:
image

I cannot post two images as new user. I will provide screen of one without none in few minutes

Code without decluttering-card:

type: custom:vertical-stack-in-card
cards:
  - type: entities
    entities:
      - type: custom:paper-buttons-row
        buttons:
          - entity: lock.drzwi
            layout: icon
            name: Drzwi
            style:
              button:
                width: 42px
                height: 42px
              icon:
                background: var(--background-color)
                padding: 10px 26px
                border-radius: 26px
                margin-top: 0
              name:
                margin-top: 20px
          - layout: icon
            icon: mdi:window-shutter
            name: Volets
            tap_action:
              action: navigate
              navigation_path: /lovelace/shutters
            style:
              button:
                width: 42px
                height: 42px
              icon:
                margin-top: 0
              name:
                margin-top: 20px
          - layout: icon
            icon: mdi:cart-outline
            name: Liste
            tap_action:
              action: navigate
              navigation_path: /lovelace/liste
            style:
              button:
                width: 42px
                height: 42px
              icon:
                margin-top: 0
              name:
                margin-top: 20px
          - icon: mdi:video
            layout: icon
            name: Sécurité
            tap_action:
              action: navigate
              navigation_path: /lovelace/security
            style:
              button:
                width: 42px
                height: 42px
              icon:
                margin-top: 0
              name:
                margin-top: 20px
          - layout: icon
            icon: mdi:power-off
            name: 'Off'
            tap_action:
              action: call-service
              service: script.off
            style:
              button:
                width: 42px
                height: 42px
              icon:
                margin-top: 0
              name:
                margin-top: 20px
        card_mod:
          style: |
            div.flex-box {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: -14px !important;   
            }
    card_mod:
      style: |
        ha-card { 
          margin-bottom: 10px !important;
          padding: 0 16px;
          border-radius: 34px !important;
          margin-left: 20px;
          margin-right: 20px;
        }
card_mod:
  style: |
    :host {
      position: sticky !important;
      bottom: 26px;
      margin-bottom: 10px !important;
      animation: 1.2s position ease-in-out;
    }
    @keyframes position {
      0% { bottom: -80px; }
      20% { bottom: -80px; }
      70% { bottom: 26px; }
      90% { bottom: 24px; }
      100% { bottom: 26px; }
    }
    ha-card { 
      background: none;
      border-radius: 26px !important;
    }
    :host:before {
      content: '';
      display: block;
      position: absolute;
      bottom: -26px;
      left: -8px;
      padding-right: 16px;
      height: 130px;
      width: 100%; 
      background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
      pointer-events: none;
      animation: 1.2s opacity ease-in-out;
    }
    @keyframes opacity {
      0% { opacity: 0; }
      20% { opacity: 0; }
      100% { opacity: 1; }
    }

he’s not suggesting you get rid of your styles indefinitely, simplify it for testing. then add your styles back once you’ve worked out what’s causing your issue.

Surely, just for testing.

1 Like

without none:
image

Sure, I will try that approach and get back to you with any comments.

The code is not entirely mine; I made some changes to make it suitable for me.

Meanwhile you may test another “sticky cards” code:
1st post → link at the bottom → sticky
Works at least in 2024.6.1 in Chrome+Win 10, Companion app (iOS 15.x)

1 Like

I tried your example and it worked, but I noticed it only worked within a single card. To address this, I modified a small part of my code to combine all cards into one big vertical stack. This was successful, and my footer worked as intended. It seems something changed that affected the sticky card, causing it to stop working between different cards.

My question is: what can be done to fix this without having to redo the entire dashboard by combining all cards into one big vertical stack?

My experience is that a “sticky card” is useful on a client with a small viewport - like a mobile phone.
All my dashboards are usually do not need to be scrolled up/down on “big clients” like a desktop PC or iPad (handheld or wall-mounted); so these “sticky cards” are only needed on iPhones. For mobile phones I use (where it is needed) a combination “panel view + vertical-stack + sticky cards”.
As for other layouts like “masonry” - guess making “sticky cards” is possible as well, but I do not have a ready code for sharing.

I have been suggesting changing position: sticky to position: fixed in a few other threads, but you may need additional adjustments. That has worked with the dashboard types I have tested.

thats interesting. Ive been using some other css to get the menubar ‘floating’ at the bottom section, but would love to understand the difference:

  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.sticky_menu
        state: 'on'
    card:
      type: custom:mod-card
      card_mod:
        style: |
          ha-card {
            position: fixed;
            background: var(--primary-color);
            width: 494px;
            /*top: 68px;*/
            bottom: 10px;
            z-index: 1;
          }
      card: !include /config/dashboard/buttons/buttons_dashboards.yaml

only negative thing I could find, is with this, it might cover cards that are directly under it. Have been considering adding an additional empty card because of that, but didnt get around it yet.

1 Like

challenge: color the suffix on a type: attribute in an entities card:

entities:
  - type: custom:hui-element
    card_type: entities
    card_mod:
      style:
        hui-attribute-row:
          $: |
            hui-generic-entity-row {
              padding: 0px 16px;
              margin: 0px -16px;
              border-radius: 24px;
              border: 2px solid rgb(49,150,207);
              border-shadow: 2pt;
              height: 25px;
            }
            ha-attribute-value {
              color: var(--primary-color);
            }
        .: |
          ha-card {
            color: black;
            --card-mod-icon-color: gold;
            --mdc-icon-size: 20px;
            /*font-weight: bold;*/
            box-shadow: none;
          }
    entities:
      - type: attribute
        entity: binary_sensor.knmi_zon
        name: Vandaag
        attribute: sun_chance0
        suffix: '%'

only colors the value of the attribute (which seems correct, as that is the elements name :wink: )

however, the suffix now stands out (besidess the fact the % should be connected and not separated)

if we do the same but for an entity directly:

  - type: custom:hui-element
    card_type: entities
    card_mod:
      style:
        hui-sensor-entity-row:
          $: |
            hui-generic-entity-row {
              padding: 0px 16px;
              margin: 0px -16px;
              border-radius: 24px;
              border: 2px solid rgb(49,150,207);
              border-shadow: 2pt;
              height: 25px;
            }
            .text-content:not(.info) {
              color: var(--primary-color);
            }
        .: |
          ha-card {
            color: black;
            --card-mod-icon-color: gold;
            --mdc-icon-size: 20px;
            box-shadow: none;
          }
    entities:
      - entity: sensor.buienradar_sunchance_1d
        name: Morgen

the text-content also colorizes the unit %, which is what I am after:

any thoughts on how to get to the % ? it seems not directly connected to an element in the Inspector pane, as far as I can check

Thank you for your support, that partially fixed the issue. The footer is now moving again, but when I scroll down to the bottom, it hovers over the card, making it inaccessible.

Any ideas on how to resolve this, apart from making a blank card at the bottom?

I mostly use mobile, as does the rest of my family. The sticky card was meant to ease the opening of doors and a few other things.

Putting the whole dashboard into one more vertical stack would be a pain, so I’m hoping for a fix. Any further suggestions? When I quickly tested it yesterday, an additional vertical stack messed up the alignments and other settings.

Set the z-index: to 0 on the menu card and a z-index: of 1 on the last card

This will ensure the menu is placed under the last card when they align.

card_mod:
  style: |
    ha-card {
     z-index: 1;
       }
type: custom:vertical-stack-in-card
cards:
  - type: entities
    entities:
      - type: custom:paper-buttons-row
        buttons:
          - entity: lock.drzwi
            layout: icon
            name: Drzwi
            icon: mdi:lock-plus
            style:
              button:
                width: 42px
                height: 42px
              icon:
                background: var(--background-color)
                padding: 10px 26px
                border-radius: 26px
                margin-top: 0
              name:
                margin-top: 20px
          - layout: icon
            icon: mdi:window-shutter
            name: Volets
            tap_action:
              action: navigate
              navigation_path: /lovelace/shutters
            style:
              button:
                width: 42px
                height: 42px
              icon:
                margin-top: 0
              name:
                margin-top: 20px
          - layout: icon
            icon: mdi:cart-outline
            name: Liste
            tap_action:
              action: navigate
              navigation_path: /lovelace/liste
            style:
              button:
                width: 42px
                height: 42px
              icon:
                margin-top: 0
              name:
                margin-top: 20px
          - icon: mdi:video
            layout: icon
            name: Sécurité
            tap_action:
              action: navigate
              navigation_path: /lovelace/security
            style:
              button:
                width: 42px
                height: 42px
              icon:
                margin-top: 0
              name:
                margin-top: 20px
          - layout: icon
            icon: mdi:power-off
            name: 'Off'
            tap_action:
              action: call-service
              service: script.off
            style:
              button:
                width: 42px
                height: 42px
              icon:
                margin-top: 0
              name:
                margin-top: 20px
        card_mod:
          style: |
            div.flex-box {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: -14px !important;   
            }
    card_mod:
      style: |
        ha-card { 
          border-radius: 34px !important;
          }
card_mod:
  style: |
    :host {
      position: fixed !important;
      bottom: 10px;
      z-index: 0;
      animation: 1.2s position ease-in-out;
    }
    @keyframes position {
      0% { bottom: -80px; }
      20% { bottom: -80px; }
      70% { bottom: 26px; }
      90% { bottom: 24px; }
      100% { bottom: 26px; }
    }
    ha-card { 
      background: none;
      border-radius: 26px !important;
    }
    :host:before {
      content: '';
      display: block;
      position: absolute;
      bottom: -26px;
      left: -8px;
      padding-right: 16px;
      height: 130px;
      width: 100%; 
      background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
      pointer-events: none;
      animation: 1.2s opacity ease-in-out;
    }
    @keyframes opacity {
      0% { opacity: 0; }
      20% { opacity: 0; }
      100% { opacity: 1; }
    }

how would that move the bottom card in the view up, or put differently, make more space in the view for the sticky menu card to show below that vertically?

the z-index property is only for layering (stacking) the elements on top of each other, not moving them in vertical directions?

Jun-14-2024 09-20-27

His complaint was that he can’t see the bottom card because the menu was covering it. z-index places the last card on top of the menu.

I don’t appreciate the link.

chrome-capture-2024-6-14