🔹 Card-mod - Super-charge your themes!

Is it possible to replace the 3 dots menu icon that’s on the navbar with just the assist icon?

please allow me a post crossing 2 repo’s…

browser-mod just was updated by Thomas to 2.2.2, and it in fact brings back our sidebar naming, and several other fixes that were reported.

However, it seems to somehow have made our card-mod-theme mods on the sidebar even harder to show up.

ever since HA 2023.4, I’ve had to refresh cache and reload the view several times to make these changes show.

This is my yaml, and it should show like this:

as I posted in the Browser-mod issue, I can only get Chrome to show this with some effort, Safari remains like:

I would appreciate some extra eyes on the matter?
Please confirm if you experience the same?

thx!

PS
I admit still using card-mod 3.1.4, albeit a modified version. Newer card-mod versions have trouble changing the icon (--card-mod-icon) in menus, and with the 3.1.4, all of my menu mods in card-mod-theme still work.

because of HA 2023.4, we had to hack this:

t.querySelector("app-drawer-layout partial-panel-resolver, mwc-drawer partial-panel-resolver")```

in the card-mod resource.

given the fact browser-mod 's current change was: Fix sidebar title · thomasloven/hass-browser_mod@f957fe1 · GitHub

so change the

 "home-assistant $ home-assistant-main $ app-drawer-layout app-drawer ha-sidebar $ .title"

to

"home-assistant $ home-assistant-main $ ha-drawer ha-sidebar $ .title"

I suspect that to be the reason?

Update

changing that to ha-drawer seems to be better indeed, I can ‘force’ the side-bar mods to show in Safari now. But still need to do just that, ‘force’ it by refreshing cache and reload the view regularly

when I press a button the icon has to blink until a binairy sensor value is “on”, then it has to be green constantly. how do I do this ?

This works to get rid of the space at the top.
But when moving the navbar to the bottom, I’m still getting the bottom of my dashboard being hidden underneath it.

Figured it out. Had to add padding to the bottom under div#view

      div#view{
        transform: initial;
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
        padding-bottom: var(--header-height) !important;
      }
1 Like

This is awesome. Do you think it’s possible to add a tap action to the paper-tab icon?

For example, I currently have a views tab of just the button card that navigates to /config/dashboard.

1111111

222222

It’s a three-step process at the moment, but I’d like to make it so that if I tap the cog icon at the header, it navigates straight to /config/dashboard.

I used to have lovelace-header-card but it caused too many issues and the support is non-existent so I rolled backed to the analog way.

Thanks in advance.

My post you answered was about displaying a badge for an existing view’s icon.
This is a CSS change and it is not possible to redirect tap_action.

1 Like

Currently using this mushroom chip back arrow on some pages to well… go back to the previous page, I have it in card_mod so that way it stays on top of other cards but I noticed today it also goes above the light popups which doesn’t look good, I assume this is because of the “z-index”.

Anyone know what I could change the number to make it go above all cards except the light popups in HA? Thanks

My code:

             type: custom:mod-card
              card_mod:
                style: |
                  :host {
                    position: fixed !important;
                    position: -webkit-fixed !important;
                    bottom: 70px !important;
                    z-index: 999 !important;
                  }                  
              card:
                type: custom:mushroom-chips-card
                chips:
                  - type: back
                    icon: mdi:arrow-left
                    icon_color: red
                    card_mod:
                      style: |
                        ha-card {
                          --chip-background: rgba(var(--rgb-orange), 0.5);
                          margin: 10px
                        }
                card_mod:
                  style: |
                    .chip-container * {
                      bottom: 0px;
                      position: sticky;
                    }

Looking for some help styling the default more-info popup.

I’m using the following in themes.yaml which changes the background of the popup:

  card-mod-more-info-yaml: |
      $: |
        .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
          background-color: rgba(0, 0, 0, 0.2) !important;
        }

I would like to also add a border to the popup, but cannot seem to find the correct tags. I do have the following in themes.yaml which correctly sets the border of any browser-mod popups, but doesn’t change the default more-info one:

  popup-border-color: '#eee' 
  popup-border-width: '1px'

Any assistance would be hugely appreciated!

Should be the same div, shouldn’t it? Have a look in dev tools of your browser and just add CSS there and afterwards (if working and when you find he right node) via card-mod.

For now, just try the above.

1 Like

If have the following in my themes.yaml

  card-mod-view-yaml: |
    .: |
      hui-view {
        background: none !important;
        
       }
      @media screen and (max-width: 500px){
        hui-view {
          margin-bottom: -15px;
        }
      }

    grid-layout$hui-vertical-stack-card$: |
      #root {
        top: 0px;
        left: 0px;
        margin-top: -5px;
        padding-left: 30px;
        background-color: rgb(0, 0, 0) !important;
        border-radius: 0;
        border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
        min-height: 100vh;
      } 
      @media screen and (max-width: 1080px){
        #root {
          padding-top:20px;
        }
      }
      @media screen and (max-width: 810px){
        #root {
          padding-top: 20px;
        }
      }
      @media screen and (max-width: 740px) {
        #root {
         margin-right: 2px; 
         padding-top: 20px;
        }
      }
      @media screen and (max-width: 500px) {
        #root {
          display: none !important;
        }
      }

Since the 2023.3.x update the side bar background styles are not applied anymore at first visit of the page.
Only after page refresh or switching between views the style is applied correct.


Before refresh

And correct after page refresh or switching between views.

anybody any idea why this is happening?

Did you try out this

    grid-layout:
      $:
        hui-vertical-stack-card:
          $: |

as it is more resilient in case of differnet timings during loading of the elements.

Changed it to:

  grid-layout:
    $: 
      hui-vertical-stack-card: 
        $: |
          #root {
            top: 0px;
            left: 0px;
            margin-top: -5px;
            padding-left: 30px;
            background-color: rgb(0, 0, 0) !important;
            border-radius: 0;
            border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
            min-height: 100vh;
          } 
          @media screen and (max-width: 1080px){
            #root {
              padding-top:20px;
            }
          }
          @media screen and (max-width: 810px){
            #root {
              padding-top: 20px;
            }
          }
          @media screen and (max-width: 740px) {
            #root {
            margin-right: 2px; 
            padding-top: 20px;
            }
          }
          @media screen and (max-width: 500px) {
            #root {
              display: none !important;
            }
          }

This renders a invalid config

Error log:

Invalid config for [frontend]: value should be a string for dictionary value @ data['frontend']['themes']['witbol']['grid-layout']. Got {'$': {'hui-vertical-stack-card': {'$': '#root {\n top: 0px;\n left: 0px;\n margin-top: -5px;\n padding-left: 30px;\n background-color: rgb(0, 0, 0) !important;\n border-radius: 0;\n border-right: 0.1vw solid rgba(58, 69, 73, 0.2);\n min-height: 100vh;\n} \n@media screen and (max-width: 1080px){\n #root {\n padding-top:20px;\n }\n}\n@media screen and (max-width: 810px){\n #root {\n padding-top: 20px;\n }\n}\n@media screen and (max-width: 740px) {\n #root {\n margin-right: .... (See /config/configuration.yaml, line 15).

Did you really change only the above and/or can you post the new complete themes-section of card-mod-view-yaml? It should work and here it doesn’t show such an error.

Here is the changed card mod section:

####################################################
  #                                                  #
  #                CARD-MOD Styles                   #
  #                                                  #
  ####################################################
 
  #set card mod theme
  card-mod-theme: witbol

  card-mod-card: |
    ha-card {
      /* CSS for all cards */
      /*background-color: rgb(28, 28, 28)*/
       
    }

  card-mod-root: |
    #view {
      background: url('/local/Images/backgrounds/witbolstraat_blur.png');
      background-size: cover;
      margin-left: -10px;
    }

  card-mod-view-yaml: |
    .: |
      hui-view {
        background: none !important;
        
       }
      @media screen and (max-width: 500px){
        hui-view {
          margin-bottom: -15px;
        }
      }

  grid-layout:
    $: 
      hui-vertical-stack-card: 
        $: |
          #root {
            top: 0px;
            left: 0px;
            margin-top: -5px;
            padding-left: 30px;
            background-color: rgb(0, 0, 0) !important;
            border-radius: 0;
            border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
            min-height: 100vh;
          } 
          @media screen and (max-width: 1080px){
            #root {
              padding-top:20px;
            }
          }
          @media screen and (max-width: 810px){
            #root {
              padding-top: 20px;
            }
          }
          @media screen and (max-width: 740px) {
            #root {
            margin-right: 2px; 
            padding-top: 20px;
            }
          }
          @media screen and (max-width: 500px) {
            #root {
              display: none !important;
            }
          }

    grid-layout$hui-horizontal-stack-card:nth-child(2):
      $: |
        #root {
          background-color: rgb(0, 0, 0);
          border-radius: 0;
          margin: -5px -63px 0px -60px;
          
        }
        @media screen and (max-width: 1080px)  {
          #root {
            margin: -7px -22px 0px -20px;
          }
        }
        @media screen and (max-width: 810px)  {
          #root {
            margin: -7px -22px 0px -20px;
          }
        }
        @media screen and (max-width: 740px) {
          #root {
            margin: -5px -6px 0px -7px;
          }
        }
        @media screen and (max-width: 500px) {
          #root {
            margin: -5px -7px 0px -7px;
          }
        }
    
    grid-layout$hui-horizontal-stack-card:nth-child(2)$custom-button-card: |
      #root{      
        background-color: red;
      }

    grid-layout$hui-horizontal-stack-card:nth-child(18):
      $: |
        #root {
          
          background-color: rgb(0, 0, 0);
          border-radius: 0;
          margin: 0px -63px -5px -60px;
          
        }
        @media screen and (max-width: 1080px)  {
          #root {
            margin: 0px -22px -7px -20px;
          }     
        }
        @media screen and (max-width: 810px)  {
          #root {
            margin: 0px -22px 0px -20px;
          }
        }
        @media screen and (max-width: 740px)  {
          #root {
            margin: 0px -6px 0px -7px;
          }
        }
        @media screen and (max-width: 500px) {
          #root {
            margin: 15px -7px -15px -7px;
          }
        }

    grid-layout$hui-horizontal-stack-card:nth-child(4):
      $: |
        #root {
          
          background-color: rgb(0, 0, 0);
          border-radius: 0;
          margin: 0px -63px -5px -60px;
          
        }
        @media screen and (max-width: 1080px)  {
          #root {
            margin: 0px -22px -7px -20px;
          }     
        }
        @media screen and (max-width: 810px)  {
          #root {
            margin: 0px -22px 0px -20px;
          }
        }
        @media screen and (max-width: 740px)  {
          #root {
            margin: 0px -6px 0px -7px;
          }
        }
        @media screen and (max-width: 500px) {
          #root {
            margin: 15px -7px -15px -7px;
          }
        }

    grid-layout$hui-horizontal-stack-card:nth-child(19):
      $: |
        #root {
          
          background-color: rgb(0, 0, 0);
          border-radius: 0;
          margin: 0px -63px -5px -60px;
          
        }
        @media screen and (max-width: 1080px)  {
          #root {
            margin: 0px -22px -7px -20px;
          }     
        }
        @media screen and (max-width: 810px)  {
          #root {
            margin: 0px -22px 0px -20px;
          }
        }
        @media screen and (max-width: 740px)  {
          #root {
            margin: 0px -6px 0px -7px;
          }
        }
        @media screen and (max-width: 500px) {
          #root {
            margin: 15px -7px -15px -7px;
          }
        }

Exactly. You changed not only the thing I showed, but now have a wrong indentation.

Compare before:

  card-mod-view-yaml: |
    grid-layout$hui-vertical-stack-card$: | 

with now (wrong changed)

  card-mod-view-yaml: |
  grid-layout:
1 Like

Thank you, exactly what I was looking for!

Thanks, it’s working.

The change of the indentation or an improvement of the loading behavior (root problem) as well?

I need a bit of help here. Since upgrading to Home Assistant 2023.6.x, my tweak to hide the more-info header doesn’t work.

I read something about changing “ha-header-bar” to “ha-dialog-header”, but changing that in the code below does not work.

My old code (I guess the first part is not relevant, I just didn’t want to leave anything out):

  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog {
        backdrop-filter: blur(17px);
        -webkit-backdrop-filter: blur(17px);
      }

    .: |

      {% if user == 'test' %}
      .heading ha-header-bar {
        display: {{'none' if is_state('input_boolean.hide_more_info_header','on')}};
      }
      {% else %}
      .heading ha-header-bar {
        display: {{'none'}};
      }
      {% endif %}

Any suggestions?

Also, I am still missing the times when we could open a camera in “full screen” more-info.
Any one found a solution for that?

Thanks

Edit:
It works again after changing to

      {% if user == 'test' %}
      ha-dialog > ha-dialog-header {
        display: {{'none' if is_state('input_boolean.hide_more_info_header','on')}};
      } 

Both, after the loading behavior fix I had the wrong indentation.
fixed that and know it’s working.

On to the next issue (after the 2023.6.x the popup titles are not correct styled any more) but that another forum (browser_mod)