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

Share your Projects! Themes
1144

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 */

header
header1920Ɨ201 8.09 KB

1145

app-header

1 Like
1146

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

1147

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

1148

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

1149

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.

1150

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ā€¦

1151

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.

1 Like
1152

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!

1153

Try this:

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

Now yes! Thank you so much

1156

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

1157

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?

1158

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

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
1160

Awesome. Thank you very much!
Edit: Example of a ā€œless-infoā€ that works: hatebin

1 Like
1161

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).

1162

Get it back centered.

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

Thanks, works great!

1164

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.