🔹 Card-mod - Add css styles to any lovelace card

Share your Projects! Dashboards & Frontend
3089

That’s a great idea. I will try that!

Sorry, I just remembered that it was not the lowercase I could not find, it was the alignment that went weird when I chose custom:button-card instead of button.
All button/button-cards and the slider a placed in a horizontal stack.

custom:button-card:
image

button:
image

EDIT: Thanks to the developer tools idea I now see that this is because the button-card is vertically aligned at the top and not the center
image

This has to be some kind of ‘vertical-align: center’. But it does not work for style: card

I think it is coming from here

  /* Vertical No Icon No Label */
  #container.vertical.no-icon.no-label {
    grid-template-areas: 'n' 's';
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

But I have no idea how to fix this yet. Probably somehow change the grid to only 1 area.

EDIT 2:
I would have thought it is one of these, but no changes to anything move anything :smiley:

            grid:
              - grid-column-start: 1
              - grid-column-end: 1
              - grid-row-start: 1
              - grid-row-end: 1
              - grid-template-areas: 's'
              - grid-template-columns: 1fr
              - grid-template-rows: 1fr
              - align-self: center
              - place-self: center
3090

I wonder how most of the last button-card, etc. discussions are related to the topic of this thread: card-mod?

3091

Sorry, yes, in a way it is not.

But , the good thing is, that both have the same solution and the same styling options. The only difference is in the way you are writing it.
And the solution for the custom:button-card will be directly applicable to the button card with card-mod

So I kind of stayed here because of the way it all began.

But I think I may have found an approach:

              - margin: 0
              - position: relative
              - top: 50%
              - left: 50%
              - transform: translate(-50%, -50%)

or for mod-card:

          card_mod:
            style: |
              ha-card {
                background-color: transparent;
                box-shadow: none;
                margin: 0;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
3093

Just started implementing popup cards using card mod and there are two areas I’d like to adjust the following but I’m not sure which elements in the example code in this thread will do what I want?

The border of the popup card, at the moment its only the size of the cards on it.

Reduce the height of the popup card header, its probably double the size of what it needs to be.

Thanks!

3094

Could you please post a snip of the screen and maybe the code you have already? I am an absolute noob, so if I see the code and can help, I will try.
Maybe the experts can help you in the meantime already :slight_smile:

3095

I am moving a post I mistakenly made in hui-elements to this thread.:

Hello @Ildar_Gabdullin ,
may I ask, if your example is transferrable also to grid cards?
I tried and would have thought that I could simply replace vertical-stack with grid, but it did not work.

I am thinking that I need to replace ‘hi-vertical-stack-card’ with the corresponding custom:layout-card because it comes before the grid card. But not sure if or how. Setting hui-grid-card did not work.

The problem is, that the picture is not being shown because the card is not enlarged automatically. So the picture is probably behind the grid.

I was able to get it to work by adding a button before the grid (button makes the card resize properly) but this is a dirty workaround.

type: custom:mod-card
card_mod:
  style:
    hui-vertical-stack-card $: |
      div#root {
        display: grid;
      }
      div#root > * {
        grid-column-start: 1;
        grid-row-start: 1;
        margin: 0px;
        --ha-card-background: rgba(0,0,0,0);
        background-size: 100%;
        background-image: url('/local/images/living_room_16_9.jpg');
        align-self: end;
      }
card:
  type: vertical-stack
  cards:
    - type: custom:button-card      # this I would like to remove
      entity: sun.sun
      styles:
        icon:
          - opacity: 0
        name:
          - opacity: 0
      tap_action:
        action: navigate
        navigation_path: /lovelace-home/0
    - type: custom:layout-card
      layout_type: grid
      layout:
        grid-template-columns: 2fr 1fr 1fr 1fr
        grid-template-rows: auto
        grid-template-areas: |
          "main1 main2 main3 main4"
      cards:
.
.

Is there any way of making this work without the button-card to keep the image from shrinking?

P.S.: Not trying to get the image above the grid with the entities and buttons. I am trying to get it as background.

3096

Hi all, can anyone help me hook into the chip-container? This is my attemp but I don’t seem to have the correct syntax.

image
image726×840 34.7 KB 

                style: |
                  ha-card {
                      box-shadow: 0px 0px;
                  }
                  .chip-container {
                      align-items: flex-end;
                      justify-content: flex-end;
                  }
3097

what are you trying to accomplice ?

3098

Changing the css on .chip-container

3099

yes, i noticed

3100

Is there a way to move the lovelace toolbar at the bottom instead of the top with this card ?

3101

I also wasn’t successful in controlling chip-container.
I tried this and also .chip-container.align-center

       .chip-container {
        --chip-spacing: var(--mush-chip-spacing, 0px);
      }

But it didn’t work and I just can’t control or change anything in the chip-container with the card-mod (with chrome debug it works fine).

I’m trying to remove the margin-right of all the non-last childs of the chips,
image
image

And it seems to be caused by this CSS:
image

Here is the full chrome debug screenshot:

image
image1479×715 105 KB

3102

I think a major reason is found in the source-code( .js of the mushroom-cards, in “community” folder) , change it there, or try with card-mod host: , or apply to either the containing card(whit-in the Chip),or “laborate” with chip-template(depending upon what you wanna change), or place the chip with-in fixed grid or vertical-stack/layout card etc… a chip is a chip, it seems a “wide” as it is( however you can change background-color etc on the chip, with card-mod on the chip
I.e ( justify_content: etc) with card-mod could be done on the Card containing the chip" i.e layout-card, header-card etc.

3103

Does anyone know the new correct code to change height of list inside input_select entities? I used this code before, but doesn’t work since the change in 2022.3 where HA changed the format they use for lists from paper elements to mwc

                        card_mod:
                          style:
                            ha-paper-dropdown-menu: |
                              paper-listbox {
                                max-height: 200px !important;
                              }

I couldn’t find an updated code and inspect element didn’t give me a good clue. The sticky comment with all the examples hasn’t been updated with the new code, so I hope someone else already figured it out.

3104

This one is no longer supported ( it’s removed )
So if it’s a custom:card you are using, the code owner should have fixed/replaced this, if you are the “card-owner” … try with input-dropdown-

3105

It’s just an entities card where one of the entities is an input_select. So it’s a core card. I know that it’s removed, that why I ask if someone knows what the new code is to change the height.

3106

ahh, you mean the mwc-element code, i.e. mwc-menu, mwc-select ?, or you want some other “workaround”, to apply listbox-height to paper-dropdown-menu … i just thought input-dropdown could be of help

3107

Hi, sorry if my question wasn’t clear. I added a screenshow below. Basically I want this list te be capped at 200 pixels. With my previous card_mod style it worked. But since HA moved from paper-elements to mwc, that code is deprecated. However, I have no clue what the correct code would be to alter the height now of the list. Its’s just an input_select entity inside an entities card.

image
image505×660 24.4 KB

3108

Ok, ofcause there are few ways, , thou i haven’t used px , as i used another solution, partly because i also found the “row height” quit awfull

card_mod:
   style: |
    hui-generic-entity-row {
      height: 15px;
    }
3109

@ASNNetworks
Here is a quick solution:

image
image804×270 17 KB

I was going to create a post about styling new MWC elements.
Have no mood & time for it. Will try to do it when this vile (hard to find a proper word) war ends (I hope).

3 Likes