#Resizing a mushroom template card?

1 messages · Page 1 of 1 (latest)

vital sandal
#

I cant seem to figure out how to resize these mushroom template cards, help would be appriciated.
Already played with card_mod, also without success. latest home assistant and versions of the card.
See the screenshot below, where you can see the buttons are not properly lined up with the other buttons.

  style:
    mushroom-shape-icon$: |
      .shape {
        --icon-size: 24px;
      }
    mushroom-state-info$: |
      .container {
        --card-primary-font-size: 16px;
        --card-secondary-font-size: 12px;
        padding-top: -11px !important;  # Reduce top padding
        padding-bottom: -4px !important;  # Reduce bottom padding
      }
    .: |
      :host {
        --mush-icon-padding: 0.5em;  # Reduce padding around the icon
        height: auto !important;  # Let the card adjust to content
      }
remote geyser
#

Can you post the rest of the template card's YAML so I can recreate what you've made. You've adjusted the padding but there might be some margins messing with your desired layout. The way I understand it: padding is for inside; margins are for outside. I also don't think the height in :host is doing anything there. If you want to just "brute force" the card height, you can add the height in ha-card.

#

But, as I was typing that, I got to thinking: Did ChatGPT give you that code? Because I realized that most of it is way too complicated and unneeded for what you're trying to do (which can lead to issues.) Also, the comments are indicators. This works for most of what you've put (aside from the padding which I've left out for now.) ```yaml
card_mod:
style: |
ha-card {
height: 125px !important;
--icon-size: 24px;
--card-primary-font-size: 16px;
--card-secondary-font-size: 12px;
}

#

Additionally, mushroom-shape-icon and mushroom-state-info can be accessed without having to use the shadow root. (Don't ask me what that means because I honestly don't know.) This (unrelated to you) code works just fine, too. ```yaml
card_mod:
style: |
ha-card {
border: none;
background: none;
}
:host {
--mush-icon-size: 60px;
--card-primary-font-size: 20px !important;
--primary-text-color: red !important;
--card-secondary-font-size: 10px !important;
--secondary-text-color: gray !important;
}
ha-state-icon {
--icon-color: black !important;
--icon-color-disabled: pink !important;
}
mushroom-shape-icon {
--shape-color: red !important;
--shape-color-disabled: none !important;}
}