🔹 Card-mod - Super-charge your themes!

boneheadfraggle · June 26, 2022, 10:23am

I’ve never done this before, but I checked the code I got from you and Mariusthvdb and changed from…

      more-info-light:
        $: |
          ha-attributes {
            display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}};
          } /* hide attributes dropdown for light cards */

to

      more-info-light:
        $: |
          ha-attributes {
            display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}};
          } /* hide attributes dropdown for light cards */
          ha-select {
            display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}};
          } /* hide effect dropdown for light cards */
          hr {
            display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}};
          } /* hide ruler above effect dropdown for light cards */

…and it seems to work.

Still to discover if I messed up something else but it works for now

Thanks for pointing me in the right direction!

soo · June 30, 2022, 12:56am

Guys, how can i set custom styling for every ha-card elements in order to don’t add custom style to each one? i tried to add these lines to my-theme.yaml

  card-mod-card-yaml: |
      paper-icon-item {
        // my style 
      }

but it doesn’t work

Pirol62 · June 30, 2022, 5:25am

I did it like this:

orange light modified mobile:
  # Card mod theming
  card-mod-theme: orange light modified mobile
  card-mod-root: |
    app-header {
      display: none;
      }
  card-mod-view: |
    #view {
        min-height: 100vh !important;
      }

madelena · July 6, 2022, 5:28am

Can the sidebar be modified and is card-mod-sidebar-yaml valid? I notice that card-mod is injected under ha-sidebar$, but nothing is visible under its <style> element.

Ildar_Gabdullin · July 6, 2022, 4:12pm

Not mentioned in the docs.

But at least card-mod-sidebar works…
And surprisingly it allows to go into shadowRoot:

  card-mod-sidebar: |
    :host {
      background: rgba(255, 0, 0, 0.3) !important;
    }
    .iron-selected paper-icon-item {
      background: yellow;
    }

Ildar_Gabdullin · July 11, 2022, 11:52pm

…So sad that we cannot edit styles for system pages.
Otherwise I would specify a style for the Dev tools → Template to add scrollbars:

Registered a FR here.

arganto · July 14, 2022, 7:56am

I cannot see any card_mod in your example. I would suggest to ask in the button-card-thread.

Will711990 · July 14, 2022, 7:59am

Oh sorry, I delete my post… Thnak you !

Ildar_Gabdullin · July 17, 2022, 4:32am

Moving a right sidebar to the left

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

mase · August 5, 2022, 8:29pm

i´d like to color the background of a vertical or horizontal stack. however i don´t manage to get it working.

got something like this:

  - type: horizontal-stack
    style:
      ha-card {
        background-color: white;
      }
    cards:

anyone knows how to get it colored?

Ildar_Gabdullin · August 5, 2022, 9:16pm

card-mod thread → 1st post → link at the bottom → stack
This is not about themes.

remmob · August 6, 2022, 5:31am

In your theme file.

  card-mod-view-yaml: |
    .: |
    hui-vertical-stack-card$: |
      #root {
        background-color: rgb(0, 0, 0);
      }

Mariusthvdb · August 9, 2022, 7:58am

for a test view, Id need the option to easily switch off card-mod-theme, so I tried to insert:

    {% if is_state('input_boolean.card_mod_theme','on')%} theme-mods {%- endif %}

into my theme declaration:

theme-mods:

  card-mod-theme: theme-mods

and turn that into:

theme-mods:

  card-mod-theme: |
     {% if is_state('input_boolean.card_mod_theme','on')%} theme-mods {%- endif %}

unfortunately this doesnt work.

I now resort to commenting the theme-mod reference in my actual themes, and reload themes.

cant this be done by means of a toggle?

please have look for me, thanks!

btw, experimenting wit this a bit more, Ive just seem to have discovered we dont need the actual line anymore? Opposed to what is stated here:https://github.com/thomasloven/lovelace-card-mod/blob/06140ff020e94a20f7eec9f51c18ad04aef0e8f1/README-themes.md#card-mod-theme

theme-mods:

#  card-mod-theme: theme-mods

works just as well?

anon36468094 · August 9, 2022, 12:21pm

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

Ildar_Gabdullin · August 9, 2022, 5:26pm

app-header

anon36468094 · August 10, 2022, 5:32am

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

Ildar_Gabdullin · August 10, 2022, 7:23am

Do not confirm.

anon36468094 · August 10, 2022, 8:38am

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

Ildar_Gabdullin · August 10, 2022, 10:22am

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.

anon36468094 · August 10, 2022, 12:51pm

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…