🔹 Card-mod - Super-charge your themes!

Any change you can share your code, for me it not seems to work. Thx

Probably because the code is wrong from the beginning.

  card-mod-root-yaml: |
    .: |   ----------- this !!!!
      app-header {
        display: none;
      }

At least these types of errors you may do:

  • wrong value is selected for a property (like “color: 12px”);
  • correct value for a property is not set - “!important” is needed;
  • wrong attribute is selected (like “colr: red”);
  • wrong element is selected;
  • wrong path is specified - so none element is selected;
  • smth else.

And use Code Inspector to check a possible reason.

Like i said it works fine in all the 3 ways i tested. If i switch the boolean on the header/toolbar dissapear but the margin don’t changes so it leaves a empry space at the top of the page…

Remove everything from you theme file and leave this only:

  card-mod-root-yaml: |
    .: |
      app-header {
        display: none;
      }

Does it work?
Next step - check with input_boolean.

Sorry for the question, I’m a bit newbie…Where should I put this code?

I have created a new theme “left_sidebar.yaml” in themes folder:

Left_sidebar:
  card-mod-view-yaml: |
    hui-sidebar-view $: |
      .container {
        flex-direction: row-reverse;
      }

I can see the new theme “left_sidebar” when I edit my dashboard view, I select it but nothing happens (of course I have Card-mod installed)

Thank you in advance!

Try this:

Left_sidebar:
  card-mod-theme: Left_sidebar
  card-mod-view-yaml: |
...

Now yes! Thank you so much

Is there any way with adjusting of themes to style the scrollbars from chrome as well. Tried already several positions in view and root, but until now without success.

e.g.

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

here and in other places in HA.

image

Since the remodelling of more-info in 2022.9, some of the card-mod-tricks to hide elements doesn’t work.
I can see that the structure has changed since ballob’s new more-info merge, but I think the structure is quite confusing so I would appreciate some help.

What I want to hide (2022.9): Hide-History — ImgBB
Example that worked pre-2022.8 (thanks to MariustHvdB): Hide-History-pre-2022-9 — ImgBB / hatebin
Result: Hide-History-with-switch — ImgBB
Suggestions?

This way with 2022.9

card-mod-more-info-yaml: |
    ha-more-info-info:
      $:
        ha-more-info-history:
          $: |
            .header > a, a:visited {
                color: var(--secondary-text-color) !important;
                font-size: 12px; 
            }
        ha-more-info-logbook:
          $: |
            .header > a, a:visited {
                color: var(--secondary-text-color) !important;
                font-size: 12px; 
            }

Saw your question after I posted my update for my usecase above. You should find youre problem there as well. It is only another new parent element above. Check my change-example.

1 Like

Awesome. Thank you very much!
Edit: Example of a “less-info” that works: hatebin

1 Like

With the changes to more-info dialogs in 2022.9 release, the more-info popups now are located at the top of the page. Is there a code to add to the theme.yaml using card-mod to center these popups, like they were before? Kinda like the card-mod codes for themes that remove the header for example (which still work thankfully).

Get it back centered.

  card-mod-more-info-yaml: |
    .: |
      ha-dialog {
        --vertial-align-dialog: center !important;
      }
4 Likes

Thanks, works great!

Is there a way to modify things in the Developer Tools, Settings, HACS page, etc? I’ve tried many variations on card-mod-developer-tools, card-mod-settings, card-mod-config-dashboard, etc., but haven’t had any luck targeting these pages. Any modifications I’ve put into card-mod-root don’t seem to carry over into these pages, which isn’t surprising. Any clarification would be appreciated.

Never saw it managed. Would lie to have it as well, but it isn’t in the form, Thomas in ingesting his code. Currently.

1 Like

Here’s a preview of the theme I’m working on that card-mod has enabled me to create. My take on a Star Trek LCARS theme!

Being able to target other pages like Developer Tools, HACS, and Settings will help me make this theme a total-conversion!

9 Likes

This feels like a long shot, but I’m wondering if card-mod has a method of targeting nested cards. Or if anyone has creative solutions. Specifically I’m applying a backdrop filter and semi-transparent background color to all ha-cards, but where I have stack-in-cards, each layer of nesting adds to the opacity and filter.
With lightDOM that would be fixed with just a
ha-card ha-card { // overrides here }
Obviously with shadowDOM inheritance goes out the window…
My solutions so far are to either:

  • Set default card background to transparent, then apply a class to top level cards and assign the backdrop filter and background color to that class, or
  • Create an override class that receives my overrides and add that to all nested cards.

Am I correct in assuming it’s outside the scope of card-mod to target a card nested an arbitrary number of levels inside another card? This feels like it’d probably be best solved by customizing stack-in-card to add a class to nested cards or something, but I figured I’d ask.

I don’t believe that would be possible, however, I think you could manually set up classes and assign them and it wouldn’t be that arduous. Example:

ha-card.level1 {
  opacity: 0.1;
}
ha-card.level2 {
  opacity: 0.2;
}
ha-card.level3 {
  opacity: 0.3;
}
etc.

You would just need to keep track of where the cards are in the hierarchy when assigning

card_mod:
  class: level1
card_mod:
  class: level2
etc.

…but I would assume that is not something you would need to adjust often, making the effect worth the setup time.