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

[Faecon (Jo)]

    - type: custom:mod-card
      card:
        type: horizontal-stack
        cards:
          - type: "custom:button-card" #navigatie terug naar hoofdscherm
            template: chip_navigate
            variables:
              ulm_chip_navigate_path: home
              ulm_chip_navigate_icon: mdi:home-outline
          - type: custom:button-card
            template: chip_navigate
            variables:
              ulm_chip_navigate_path: grafiekenslaapkamermattheo
              ulm_chip_navigate_icon: mdi:chart-bar
              ulm_chip_navigate_icon_color: rgb(241, 136, 5)
      card_mod:
        style: |
          :host {
            top: 200;
            z-index: 99;
          }
          ha-card {
            display: flex;
            background: none;
            --ha-card-border-width: 0px;
            --ha-card-box-shadow: none;
            justify-content: center;
          }

like this ?

[arganto]

@Faecon

like this ?

Yes. Then it is applied to the mod-card. You can double-check in dev-tools of your browser. If it now does, what you want has to be evaluated by you and the css perhaps be adjusted to your needs.

[Faecon (Jo)]

it doesnt change a thing for me. I search again

[arganto]

As long as it is not clear what you want to have, it is hard to help. The code above is doing what it is for. Try yourself with adjusting the 0px to eg. 50px.

[Faecon (Jo)]

I want my 2 buttons at the bottom of my screen, centered. As a menu, but at the bottom. So I have a menu, on every page on the same spot (centered and at the bottom)

[arganto]

Then I don’t know for what you are ingesting all the CSS above? I’m not an expert of positioning CSS, but something like this should be more in the right direction.

card_mod:
  style: |
    ha-card {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }

[Faecon (Jo)]

ok, thanks for your time. I will try

[d_sellers1 (Derek)]

So I did some experimenting to try to understand why my original post did not help you. Here’s what I’ve gathered so far based on what you’ve already tried.

• The card_mod does not need to be put in a card_mod card. I didn’t even know that was a thing until I saw it in your code. In fact, the developer even says not to use it any more.
• Layout cards do not seem to be affected by the positioning. I’ve tried horizontal-stack, vertical-stack, grid, and custom:layout-card. That would have made things so much easier if it did.
• Because the layout cards couldn’t be positioned, putting the card_mod under each card allowed me to position them using bottom and left parameters changing the left value appropriately. I would also suggest defining the unit as px or % instead of leaving it off; things got weird with some cards.
• The code that @arganto and I provided does not seem to work with the custom:button-card (which I use on about 80% of my dashboards). I was, however, able to make several of the HA’s included cards to be positionable: markdown, light, entity, and button all worked during testing. Interestingly, the Mushroom Light Card also worked (so it might be fair to assume the rest of the Mushroom cards will work too). Look into the Mushroom Chip cards as I think that might be an alternative instead of the custom:button-card.
• Be careful with the positioning so you don’t overlap something important such as the Edit or Done buttons. With the z-index set to display on top of everything, you can’t click those buttons if you place another one on top of it. (I had to go into the Raw Editor in order to move some stuff around.)

Here’s my final code after experimenting. (I only posted two buttons in the code, but, as seen in the screenshot, I also used an entity, button, and Mushroom Light Card.)

type: grid
cards:
  - type: markdown
    content: test
    card_mod:
      style: |
        :host {
          position: fixed;
          bottom: 0px;
          left: 0px;
          z-index: 99;
        }
  - type: light
    entity: light.all_lights
    card_mod:
      style: |
        :host {
          position: fixed;
          bottom: 0px;
          left: 65px;
          z-index: 99;
        }

[Faecon (Jo)]

Wow, thanks for testing this !

[arganto]

@d_sellers1

• The card_mod does not need to be put in a card_mod card. I didn’t even know that was a thing until I saw it in your code. In fact, the developer even says not to use it any more.
• Layout cards do not seem to be affected by the positioning. I’ve tried horizontal-stack, vertical-stack, grid, and custom:layout-card. That would have made things so much easier if it did.
• Because the layout cards couldn’t be positioned, putting the card_mod under each card allowed me to position them using bottom and left parameters changing the left value appropriately. I would also suggest defining the unit as px or % instead of leaving it off; things got weird with some cards.

You are wrong with these three comments.

ad 1. You should not use it always or don’t use it, if there is a ha-card element, because you don’t need it then. This is, what the developer says. Not more

ad 2. layout-card don’t have a ha-card-element, so you have to use it. This is exactly for what it is for. So the approach above was right (and is working) and with this you can position it.

ad 3. And because of ad2 and ad3 the above mod with mod-card and my css is working. Just try it.

type: custom:mod-card
card:
  type: horizontal-stack
  cards:
    - type: entity
      entity: sun.sun
    - type: entity
      entity: sun.sun
card_mod:
  style: |
    ha-card {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }

[Faecon (Jo)]

- type: custom:mushroom-chips-card
      chips:
        - type: action
          tap_action:
            action: navigate
            navigation_path: home
          icon: mdi:home-outline
          card_mod:
            style: |
              :host {
                bottom: 15px;
                z-index: 99;
                left: 65px;
              }          
        - type: action
          tap_action:
            action: navigate
            navigation_path: grafiekenslaapkamermattheo
          icon: mdi:chart-bar
          card_mod:
            style: |
              :host {
                bottom: 15px;
                z-index: 99;
                left: 75px;
              }

does not work for me. I got the 2 buttons left, and not on the bottom

[d_sellers1 (Derek)]

@arganto Learning something new every day. With all the card_mod that I’ve used, I didn’t know what the card_mod card can be useful for. So with that in mind, you took your thoughts and combined them with what @Faecon is trying to accomplish. (Don’t mind my placement values; they’re for experimenting.)

type: custom:mod-card
card:
    type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: action
            tap_action:
              action: navigate
              navigation_path: home
            icon: mdi:home-outline
          - type: action
            tap_action:
              action: navigate
              navigation_path: grafiekenslaapkamermattheo
            icon: mdi:chart-bar
card_mod:
  style: |
    :host {
      position: fixed;
      bottom: 175px;
      left: 100px;
      z-index: 99;
    }
    ha-card {
      border: none;
      background: transparent;
    }

EDIT: Using the card-mod card seems to have broken my earlier example (placing the individual cards). But, now the chips cards can, potentially, be individually positioned… Weird stuff.

[Faecon (Jo)]

- type: custom:mod-card
      card:
        type: horizontal-stack
        cards:
          - type: "custom:button-card" #navigatie terug naar hoofdscherm
            template: chip_navigate
            variables:
              ulm_chip_navigate_path: home
              ulm_chip_navigate_icon: mdi:home-outline
          - type: custom:button-card
            template: chip_navigate
            variables:
              ulm_chip_navigate_path: grafiekenslaapkamermattheo
              ulm_chip_navigate_icon: mdi:chart-bar
              ulm_chip_navigate_icon_color: rgb(241, 136, 5)
      card_mod:
        style: |
          ha-card {
              position: fixed;
              bottom: 45;
              left: 0;
              width: 100%;
              display: flex;
              justify-content: center;
          }

Gives me centered buttons, but not aligned at the bottom…

[arganto]

@Faecon

Gives me centered buttons, but not aligned at the bottom…

Post a screenshot of the as is.

[MrGrey]

@Ildar_Gabdullin

Create a new view with a “panel mode”:

@Ildar_Gabdullin

Create a new view with a “panel mode”:

Could someone “spell-this-out” for me, using Home Assistant OS (2023.6.1)?

I just can’t create the example(s) described. I’m hoping it’s because things have changed, but it’s probably because I’m missing something really obvious.

MrGrey.

[Faecon (Jo)]

1. Is my original.
   And then the 2 other options posted before

I want them on the bottom of the page. Not at the end of my cards…

[arganto]

@Faecon

I want them on the bottom of the page. Not at the end of my cards…

You should start posting, what you are really using. The code above is wrong and so most probably not even in use or creating the screenshot. type is not indent correctly.

Secondly why the - type? Is is within another card or are you in yaml-mode (why?) and this is from the whole screen?

Thirdly. Start 1:1 (!) with the working and given examples and iterate from there. Then you will see, that my code is working and the problem is your change from 0 to 45. If you want to have more space, put some padding or use px.

type: custom:mod-card
card:
  type: horizontal-stack
  cards:
    - type: custom:button-card
      entity: sun.sun
    - type: custom:button-card
      entity: sun.sun
card_mod:
  style: |
    ha-card {
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        display: flex;
        justify-content: center;
        padding-bottom: 45px;
    }

[Faecon (Jo)]

You don’t have to be that grumpy.

1. It is only the first line that was not ok. I copied it and it changed…

I thought i could change the height with changing the bottom, it wat clearly with padding. I didnt know that

There was asked to show full setup and what i wanted… From the first post I made, i said that i wanted two buttons centered and on a distance of the bottom.

Thanks for helping me and I dont want to offend you but I really dont see what i did wrong in this conversation. I am just a beginner who wants help and indont know all the possibilities to make things right

[Faecon (Jo)]

@arganto

If you want to have more space, put some padding.

That will be the solution. Thanks

[arganto]

You’re welcome. Dont take it too seriously.

Perhaps I’m most of the time too picky, if someone is not trying out the given examples and that from there and instead of this using directly changed iterations and say: the example is not working.

@Faecon

That will be the solution. Thanks

… or use px. I have updated the example above.