🔹 Card-mod - Super-charge your themes!

[klogg]

@Ildar_Gabdullin

and I am out of other ideas

Me too. I tried a really minimal config…
(Perhaps someone wouldn’t mind trying it?)

ui-lovelace.yaml

views:
  - path: test_view
    theme: hall_panel_theme
    cards:
      - type: entities
        entities:
          - sun.sun

---

hall_panel_theme.yaml

hall_panel_theme:
  card-mod-theme: hall_panel_theme

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

---

Also tried these

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

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

  card-mod-root: |
    app-toolbar {
      display: none;
    }

[Ildar_Gabdullin]

This theme works fine:

cm_minimal:

  card-mod-theme: cm_minimal

  card-mod-row: |
    :host {
      display: block;
      border: 1px solid green;
    }

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

I see an indentation problem here:

@klogg

  card-mod-theme: hall_panel_theme

   card-mod-root-yaml: |
    .: |

And I selected the theme in the UI, not here:

@klogg

views:
  - path: test_view
    theme: hall_panel_theme

[klogg]

@Ildar_Gabdullin

And I selected the theme in the UI, not here

That worked. Thanks!

[boneheadfraggle]

@Ildar_Gabdullin

Code Inspecto

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]

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 (Jörg Nauen)]

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]

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]

@madelena

card-mod-sidebar-yaml

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]

…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]

@Will711990

I’m playing with card-mod

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

[Will711990]

Oh sorry, I delete my post… Thnak you !

[Ildar_Gabdullin]

Moving a right sidebar to the left

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

[mase]

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]

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

[remmob]

In your theme file.

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

[Mariusthvdb (Marius)]

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]

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]

@anon36468094

app-toolbar

app-header

[anon36468094]

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

[Ildar_Gabdullin]

Do not confirm.