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

[UberDudePL (Kris)]

without none:

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.

[Ildar_Gabdullin]

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)

[UberDudePL (Kris)]

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?

[Ildar_Gabdullin]

@UberDudePL

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.

[LiQuid_cOOled]

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.

[Mariusthvdb (Marius)]

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.

[Mariusthvdb (Marius)]

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 )

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

[UberDudePL (Kris)]

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.

[LiQuid_cOOled]

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; }
    }

[Mariusthvdb (Marius)]

@LiQuid_cOOled

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

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?

W3Schools.com

[LiQuid_cOOled]

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.

[Mariusthvdb (Marius)]

@LiQuid_cOOled

I don’t appreciate the link.

why not? it’s the description of the z-index property?

[LiQuid_cOOled]

I may have misunderstood the request, but I already understand how z-index works. Offer up a solution vs replying to me…

[Mariusthvdb (Marius)]

@LiQuid_cOOled

z-index places the last card on top of the menu.

thats a nice ‘hack’ indeed, but suppose not a true solution.

As Ive expressed before, the only way I found so far is by simply adding an empty card of the same height as the sticky menu with some margin.

this has the downside of leaving an open spot when not using the sticky menu.

Still looking for some css element to the bottom, just like the top has in the HA view from Ildars example:

top: var(--header-height);

@LiQuid_cOOled

Offer up a solution vs replying to me…

sorry to have tickled you there, was not particularly replying to you but quoting you.

[LiQuid_cOOled]

@Mariusthvdb

thats a nice ‘hack’ indeed, but suppose not a true solution.

We will leave all the solutions to you so they are hack free.

“Nothing is more dangerous than an idea when it is the only one you have.”

[Mariusthvdb (Marius)]

here’s a ‘solution’ which can be easily included on all views

  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.sticky_menu
        state: 'on'
    card:
      type: entities
      card_mod:
        style: |
          ha-card {
            margin: 20px;
            background: transparent;
            box-shadow: none;
      }
          }
      entities: []

when saved as an include, so I can do:

 - !include ../../includes/include_sticky_menu_spacer.yaml

ofc, this works in my config where I have set a vertical, or 1 column view design everywhere.

I believe it can also be added to the sticky menubar itself, that would even be better, but it requires a bit more control over margins and other card_mods

I did have to overcome an issue with my menubar not being displayed completely when using my iPhone (13pro). So I added some @media specifics to the cards styling. First tried it verbosely with 2 type: conditional cards, but then figured out how to set the styling in 1:

  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.sticky_menu
        state: 'on'
#       - condition: screen
#         media_query: '(min-width: 570px)'

    card:
      type: custom:mod-card
      card_mod:
        style: |
          @media (min-width: 570px)  {
            ha-card {
              position: fixed;
              background: var(--primary-color);
              width: 494px;
              bottom: 10px;
              z-index: 1;
            }
          }
          @media (orientation: portrait) { /* and (max-width: 569px) */
            ha-card {
              position: fixed;
              background: var(--primary-color);
              width: calc(100%); /*384px;*/
              bottom: 10px;
              z-index: 1;
            }
          }
      card: !include /config/dashboard/buttons/buttons_dashboards.yaml

(I’ve left the some commented settings, so you can see what also worked, but that was too device specific. As my Desktop does not have a portrait mode, that selector suffices, and width is then using 100%, making it work on all handhelds here.)

I had originally hoped to only have the media_query see to the width, and lift the identical properties out of it

            ha-card {
              position: fixed;
              background: var(--primary-color);
              bottom: 10px;
              z-index: 1;

but that seems more trouble than it solves… unless someone has a great suggestion here I suppose to leave it like this

although, this seems to work:

      card_mod:
        style: |
          ha-card {
            position: fixed;
            background: var(--primary-color);
            bottom: 10px;
            z-index: 1;
          }
          @media (min-width: 570px)  {
            ha-card {
              width: 494px;
            }
          }
          @media (orientation: portrait) and (max-width: 569px) {
            ha-card {
              width: calc(100%); /*384px;*/
            }
          }

reason we need to mess with that (it’s regular horizontal-stack with buttons, so should never go beyond a single columns width), is the position: fixed which is the main property to set the sticky menu…

all in all, it’s not too obvious. yet doable.

[Novan007]

Hello I am a beginner can anyone help me how to get the card mod working? I have already done the following in the dashboard under sources: local/www/community/lovelace-card-mod/card-mod.js
but nothing works can you help me what to do or do I need to add something in configuration?

[LiQuid_cOOled]

@Novan007 Check out this guide and test a few card examples on your dashboard.

Card-mod - Add css styles to any lovelace card

Here all my posts which may be useful: NOTE: Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3). And also read this important note to create optimized code. In most examples here a code is NOT optimized - just to describe a DOM navigation. Entity card post rotating icon (by @dolodobendan) disabled tap_action Entities card (including some special row elements - button, section, divider) post font-size for Entities card post Entities card with attributes …

Start simple, but realize that different cards require different mod code. Ildar’s guide is extensive and covers a large portion of the available cards. The guide is designed to teach vs copy and paste.

type: entity
entity: light.your_light
card_mod:
 style: |
   ha-card {
     background: blue;
       }

If the sample I provided didn’t work after applying your own entity, you may have an installation issue.

[whd]

I am trying to modify the icon color and the font for the secondary text in the following simple-entity:

- type: simple-entity
  entity: switch.test_entity
  name: Test Entity
  secondary_info: last-changed
  state_color: true

If I add the following after “state_color: true”, I can modify the font for the secondary text:

card_mod: 
  style:
    hui-generic-entity-row:
      $:
        .info.pointer .secondary: |
          ha-relative-time {
            font-size: 13px;
            color: grey !important;
          }

If I add the following after “state_color: true”, I can modify the icon color:

card_mod:
  style: | 
    :host {
      {% if states(config.entity)=='on' %}
        --card-mod-icon-color: red        
      {% else %}  
        --card-mod-icon-color: SteelBlue        
      {% endif %}
    }

But how can I get both? The following does not work…

card_mod:
  style: | 
    :host {
      {% if states(config.entity)=='on' %}
        --card-mod-icon-color: red        
      {% else %}  
        --card-mod-icon-color: SteelBlue        
      {% endif %}
    }
    hui-generic-entity-row:
      $:
        .info.pointer .secondary: |
          ha-relative-time {
            font-size: 13px;
            color: grey !important;
          }

I am probably not understanding how to combine “:host:” with an “|” after “style:” and “hui-generic-entity-row:” without an “|” after “style:” and two “style:” sections also don’t work?

Any help would be highly appreciated. Thanks so much!

[arganto]

First post. Link to ildars examples. Example for combining shadow and non shadow root elements.