šŸ”¹ Card-mod - Super-charge your themes!

Ok, so that is within a section, not the badges at the top of a view. Iā€™ll update my post to reflect that.

Unfortunately, I donā€™t have badges elsewhere than at the top of a view and I havenā€™t changed any layouts to sections, so it will require a little bit of setup to test it.

not sure, but that icon size setting is for badges at the top of the viewā€¦ at least, that is what I used it successfully for :wink:

I just tried the original mod by Ildar, and that does exactly the same as you follow through

btw, I did test if the opening

is actually required, as it should find the relevant Shadowroot without it too, but no the is not the case. This is the actual mod for setting that icon-size to badges in the top section of a sections view

Yes, so it makes sense to me that with the hui-sections-view directive in there that it would apply to section views, but it wouldnā€™t work for masonry views.

Let me restate this more correctly: I donā€™t use section views, so Iā€™m somewhat unfamiliar with them, and accordingly my terminology here isnā€™t 100%. The whole view is of course set as a section view, but I havenā€™t inspected the HTML to see how the HTML/element paths work.

In the light of my last point, yes, I can then see it working for you.

Did you try it like this?

  card-mod-view-yaml: |
    hui-sections-view:
      $:
        hui-view-badges:
          $:
            hui-entity-badge:
              $: |
                ha-state-icon {
                  --mdc-icon-size : 24px;
                }
            .badges {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch; /* Smooth scrolling */
                scrollbar-width: none; /* For Firefox */
                flex-wrap: nowrap !important;
                justify-content: unset !important;
            }
            .badges > * {
                min-width: fit-content;
            }
        }


I had that same distinction before for setting background and stuff for all of those different type views.

sometime ago I learned that we could simply use hui-view

  card-mod-view: |
     hui-view {
       {% if is_state('input_boolean.weer_view_background','on') %}
       background: repeat url({{state_attr('camera.buienradar','entity_picture')}}) fixed;
       {% endif %}
     }

could it be this would be the case here too. Instead of

  card-mod-view-yaml: |
    hui-sections-view:
      $:
        hui-view-badges:
          $:
            hui-entity-badge:
              $: |
                ha-state-icon {
                  --mdc-icon-size : 24px;
                }

do

  card-mod-view-yaml: |
    hui-view:
      $:
        hui-view-badges:
          $:
            hui-entity-badge:
              $: |
                ha-state-icon {
                  --mdc-icon-size : 24px;
                }

and make it happen all over? let me try

update

no, that doesnt work unfortunately :wink:

yes and it does exactly nothing at all (so not even set the icon size)

1 Like
  card-mod-view-yaml: |
    :first-child $:
      hui-view-badges $: |
        /* mobile-specific styles */
        @media (max-width: 768px) {
            .badges {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch; /* Smooth scrolling */
                scrollbar-width: none; /* For Firefox */
                flex-wrap: nowrap !important;
                justify-content: center !important;
            }

            .badges > * {
                min-width: fit-content;
            }
        }

wait thereā€™s progress!

using the above (including the setting for FF which is also required for Companion app) I can see the badges in 1 line, and swipe them if so needed.
changing the justify-content to center helps. Although admittedly, iit is a compromiseā€¦ the badges are nicely centered now on all views that have but a few badges. But, on the views that matter, ie the ones that require swiping, entering the badges makes the first badge be displayed cut -off

all in all its a nice feature.

1 issue I still see, is there is a certain background discrepancy I need to screenshot to be understood

need to check how to set a single background for the complete view, and not differentiate between the sections section and the badges sectionā€¦
dont think it is the box-shadow I set in all badges, as you can see the clear demarcation between the 2 sections in the view

orā€¦:

1 Like

Great!

This cut-off is why I didnā€™t go for centering myself. I prefer it left justified.

yeah I can see that, maybe itā€™s a matter of getting used to. I use single column views everywhere, so like the vertical impact of the view
left aligning those badges blocks that for my brainsā€¦

wat I donā€™t get yet, is why I donā€™t see the badges change upon minimizing the Desktop browser window to eg 500px. I would have expected it to kick in.

update

so I also found why that didnt happen: it was because I had set a theme background to the view

title: Weer
path: weer
icon: mdi:weather-partly-cloudy
# theme: weather-background
# type: sections
# max_columns: 1
badges:
  - !include /config/dashboard/badges/badge_meteoalarm_brabant.yaml
  - !include /config/dashboard/badges/badge_bliksem_dichtbij.yaml
etcetc

commenting the theme makes it happen. This is the smallest window I can make on desktop, and notice the large gaps left and right side:

Feb-04-2025 14-55-38

update

gaps left/right are in Safari Mac Desktop only. Companion app and Chrome Desktop are fine. Meaning I can not adjust the margins in a theme, or kill Companion and Chrome viewsā€¦

you could try

justify-content: space-evenly !important;

which does a few nice things:

  • does not cut off the left-side (of course it does on the right side , in the swipe direction)

  • shows symmetrical badges on views with less than view width badge numbers
  • spreads the badges over the full width, if but a few :wink:

and most importantly, show a single badge dead center:

kind of neat really

1 Like

EDIT: I moved it to the top of my theme and now it works, only on mobile though, can the code be modified to work on desktop too?

Also how can I make it so the first chip isnā€™t always cut off? It only cuts them off when its more then 1 row

read the 2 posts above thisā€¦

sure, just dont use the media query

1 Like

need some help here continuing from šŸ”¹ Card-mod - Super-charge your themes! - #1957 by Mariusthvdb

check the wide view badges

and the narrow view badges

you can clearly see the oddity of the box-shadow: the bottom side is cutoff and somehow seems th be having squared corners. See close-up

I have the same box-shadow where ever I use it:

    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2)

and use that in the badges too.

somehow the settings to make them swipeable causes this ugly effect. Ive tried to set the box-shadow to none in case of swiping , but dont think that is the right solution. I also tested whether it has to d with the background, but that is not it. If I leave out the box-shadow, a very regular background is displayed, so wont pursue there.

I think I need to make the box-shadow visible in the top badges section no matter the screen size and this mod card-mod theme kicking in:

  card-mod-view-yaml: |
    hui-sections-view:
      $:
        hui-view-badges:
          $:
            hui-entity-badge:
              $: |
                ha-state-icon {
                  --mdc-icon-size : 24px;
                }

    :first-child $:
      hui-view-badges $: |
        /* mobile-specific styles */
        @media (max-width: 768px) {
          .badges {
              overflow-x: auto;
              -webkit-overflow-scrolling: touch;
              scrollbar-width: none;
              flex-wrap: nowrap !important;
              justify-content: space-evenly !important;
          }

          .badges > * {
              min-width: fit-content;
          }
        }

would appreciate if anyone has suggestions here I could try.

btw scroll-behavior: smooth; seems to be the modern replacement of the ā€˜deprecatedā€™ -webkit-overflow-scrolling: touch; which was used for older iOS devices.

So I removed the media-query and now it just doesnā€™t work at all

  card-mod-theme: "Nestico-Home-Theme"
  card-mod-view-yaml: |
    :first-child $:
      hui-view-badges $: |
        .badges {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch; /* Smooth scrolling */
            scroll-behavior: smooth; /* Smooth scrolling */
            scrollbar-width: none; /* For Firefox */
            flex-wrap: nowrap !important;
            justify-content: space-evenly !important;
        }

        .badges > * {
            min-width: fit-content;
        }
      }

At least the cut off is gone though at least.

delete this and you should be good

to be clear: it;s the bottom one

2 Likes

Thanks! Working fine now.

Could some one assist me on how to remove the border around the light chip?
Im able to make the background blue, or spin the icon but removing the border is impossibleā€¦

image


                  - type: custom:mushroom-chips-card
                    chips:
                      - type: template
                        icon: mdi:cookie
                        icon_color: brown
                        content: 2 Cookies
                      - type: light
                        entity: light.livingroom_lights
                        use_light_color: false
                    card_mod:
                      style:
                        mushroom-template-chip:nth-child(1)$: |
                          ha-state-icon {
                            animation: rotation 1s linear infinite;
                          }
                          @keyframes rotation {
                            100% {
                              transform: rotate(360deg);
                            }
                          }
                        mushroom-light-chip:nth-child(2)$: |
                          ha-state-icon {
                            animation: rotation 1s linear infinite;
                          }
                          @keyframes rotation {
                            100% {
                              transform: rotate(360deg);
                            }
                          }

Iā€™m using this code in a theme to add style to a mushroom-template-card (card-mod 3.5.0 !) which is perfectly working on another homeassistant-system.

But I need this to work with card-mod 3.4.4. How do I have to change the syntax?

navigation-theme:
  card-mod-theme: navigation-theme
  card-mod-card: |
    :host(.button) {
      color: white;
      --ha-card-border-width: 0;
      --ha-card-background: rgba(55, 55, 55, 0.3);
      --card-primary-font-size: 16px;
      --mush-icon-size: 75px;
      --mush-badge-size: 25px;
        ha-card:hover {
        background: rgba(155, 155, 155, 0.4);
        }
        mushroom-state-info {
          --card-primary-font-size: 16px;
          margin-top: -16px;
        }
    }