🔹 Card-mod - Super-charge your themes!

[Ildar_Gabdullin]

Your question is not related to the thread, ask in the main card-mod thread, this one is about themes.

[Mariusthvdb (Marius)]

@Mariusthvdb

note the template needs to be on a single line, using my regular multiline notation breaks it in this spot.

it was a spacing issue probably, as I can also use

        content: "{%- set m_alerts = states('sensor.marquee_alerts')|int(0) %}
                  {{- m_alerts if m_alerts > 0 }}";

taking out the leading white space.
I can no yet explain why that works, or why to broke without it, but here you go…

[Furious (moi)]

Bonjour,

Je voudrais réaliser le changement des icone dans la barre comme dans votre tuto mais je ne comprend pas bien le tuto. Ou est ce qu’il faut mettre ses éléments ? dans le configuration.yaml ou dans le Yaml de la vue ?
merci pour ses explications.

[Ildar_Gabdullin]

Please use English.
To replace an icon - you need to change an svg path as it is described in the post.

[Furious (moi)]

ok but I don’t understand, when I write “card-mod-root-yaml” I get an error and it tells me that it doesn’t exist. However, I am sure that I have the card-mod.js, that is why I am asking you where should I write this code? I don’t know if the translation is well done.
THANKS

[Ildar_Gabdullin]

I see, let’s start from the beginning:
Go to the main card-mod thread → 1st post of that thread titled “fantastic post” → themes → for beginners

[Mariusthvdb (Marius)]

anyone still using the card-mod themes to customize their sidebar with card-mod-sidebar-yaml:, please check out the amazing plugin @elchininet has developed, and is actively expanding at Release v6.7.0 · elchininet/custom-sidebar · GitHub.

It has dedicated config options for almost everything we need. Except for conditional animations, I’ve moved everything I had in my card-mod themes pertaining the sidebar to this new plugin.

main advantage is also that it provides all templates in javascript too, so the frontend wont bother the backend as much anymore,

if you want an example how to proceed, checkout my Sidebar gist, where Ive posted my current settings, and compare it with the card-mod theme settings I used up to recently on the card-mod-sidebar-yaml:

[rob.james.lee]

i’ve successfully deployed some minor tweaks using card-mod inside of my theme.yaml file, but i’m having trouble figuring out how to make tweaks to the pop up menu that appears when i click to edit a card – i.e:

i’m trying to make it take up the full width of window so the code editor part doesn’t spill over.

if i add the 2 css attributes below directly to my inspect panel in browser, it works as intended (until i refresh).

but i can’t seem to get it working when i try to add it into my theme file. after reading the post about ‘navigating dom elements’, i thought the below would’ve worked…but no dice.

  card-mod-root: |
    ha-dialog$: |
      .mdc-dialog .mdc-dialog__surface {
        width: 90% !important;
      }
      .mdc-dialog .mdc-dialog__content {
        width: 100% !important;
      }

i’ve also tried adding the above code under ‘card-mod-more-info-yaml’ in my theme file as fell. doesn’t do anything either.

any ideas what i’m doing wrong?

and in case the additional context is needed, here’s the entire string i get when i select “copy element” (for the .mdc-dialog .mdc-dialog__content part) from the inspect panel in my browser:

<div class="mdc-dialog__surface"> <!--?lit$722544887$--><slot name="heading"> <!--?lit$722544887$--> <h2 id="title" class="mdc-dialog__title"><!--?lit$722544887$-->Vertical stack Card configuration</h2> </slot> <div id="content" class="mdc-dialog__content"> <slot id="contentSlot"></slot> </div> <footer id="actions" class=" mdc-dialog__actions "> <span> <slot name="secondaryAction"></slot> </span> <span> <slot name="primaryAction"></slot> </span> </footer> </div>

thank you!

[reste_narquois (Chris Warne)]

As you are traversing shadow-roots in your code, I think in theory you need to put this under a card-mod-root-yaml: key.

Not saying this will work with your specific code, but worth a try.

[Mariusthvdb (Marius)]

@Duke_box

  card-mod-view-yaml: |
    hui-masonry-view:
      $:
        hui-view-badges $:
          hui-badge:
            hui-entity-badge $: |
              .badge {
                border-width: 0.25px !important;
                border-color: #039BE5 !important;
              }

is this supposed to work with the release 3.4.3 card-mod (and not the hacked version)?
doesnt seem to do anything in my theming…

ofc, I dd change it to hui-sections-view, but all of my other mods that use that are fine.
hmm Dom path seems different

[Duke_box]

HI,

Yes it is working with the stock card-mod v3.4.3.

The only thing I can think of is I also have kiosk mode installed and that is only so I can modify the view’s header to replace the edit icon with the time, reduce the height and remove some of the clutter.

[Ildar_Gabdullin]

@Mariusthvdb

is this supposed to work with the release 3.4.3 card-mod (and not the hacked version)?

It works in my setup

[Mariusthvdb (Marius)]

testing my sections views are without succes just yet. even a spare masonry doesnt seem to be targeted,
how odd

[arganto]

Floow up from card-mod thread for Ildar.

O.k. Only already did it coming from the view-level (see my lines of code) and not from badge as you did above. And because

  card-mod-badge-yaml: |
    .: |
      ha-state-icon {
        --mdc-icon-size : 124px;
      }              
    ha-badge:
      $: |
        .content {
          font-size: 14px !important;
          font-weight: 400;
        }

ddn’t work here, but

  card-mod-view-yaml: |
    hui-sections-view:
      $:
        hui-view-badges:
          $:
            hui-entity-badge:
              $:
                .: |
                  ha-state-icon {
                    --mdc-icon-size : 24px;
                  }              
                ha-badge:
                  $: |
                    .content {
                      font-size: 14px !important;
                      font-weight: 400;
                    }

[Ildar_Gabdullin]

@arganto

and not from badge as you did above

Correct, because “card-mod-badge” only works with a hacked card-mod. Actually, see no issues with my hack so far ))). But - honestly - I manage to spend only a few days at home a month, i.e. not a huge testing period…

[arganto]

@Ildar_Gabdullin

hacked card-mod

?

On my question in other thread, from where it is, you anwered

@Ildar_Gabdullin

This is a standard card-mod-themes thing.

O.k. Then it’s clear why it is not wokring here and above other users will find a themes styling without the hack as well.

[Ildar_Gabdullin]

card-mod-badge is a STANDARD thing for card-mod themes.
But it does not work since 2024.8 - for old & new badges.
To restore this functionality for NEW badges - the hack is needed.

[arganto]

O.k. I see. But as it is working directly with card-mod-view-yaml as above, I currently see no need for it. At least for my requirements. Beside it would be shorter to declare.

[rob.james.lee]

thanks for the idea! that didn’t work, unfortunately. oh well. i can live with it! appreciate the thought.

[Mariusthvdb (Marius)]

@arganto

  card-mod-view-yaml: |
    hui-sections-view:
      $:
        hui-view-badges:
          $:
            hui-entity-badge:
              $:
                .: |
                  ha-state-icon {
                    --mdc-icon-size : 24px;
                  }              
                ha-badge:
                  $: |
                    .content {
                      font-size: 14px !important;
                      font-weight: 400;
                    }

can confirm that to work. very nice

except for badges that have their own (extra) detail, like a border. apparently, if the custom:mod-card has been set on an individual badge the theming no longer applies.

or have any other theme set in the main config options that contains card-mod theming

had hoped I could set

                    .badge {
                      border: 2px red solid;
                    }

under the .content, but that too does not set. or with !important

mysterious.

wait, too soon, they kicked in after all:

only now, my background isnt showing anymore…

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

it’s one or the other