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

This works fine but leaves a space at the top of the page, is there anything i can do to crop this if the boolean is on?

   ### Card Mod Theme ###
  card-mod-theme: minimalist-mobile
  card-mod-root: |
    app-toolbar {
      display: {{'none' if is_state('input_boolean.hide_app_toolbar','on')}};
    } /* hide app toolbar */

app-header

Thanks. This also works but still shows a space above where the toolbar was until I refresh my dashboard.

Do not confirm.
ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ

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.