Set transparent background on monster card?

Configuration Frontend
1

Hi,

Would it be possible to set a transparent background on a Monster card, natively in the monster card it self?

Or have it use some level of opacity maybe? Would love to have the harsh white background replaced and show the background image, like the buttons next to it do…

39
39731×383 48.5 KB

Using Card Modder is a valid option of course:

  - type: custom:card-modder
    style:
      --paper-card-background-color: rgba(255, 255, 240, 0.2)
  #    --paper-item-icon-color: white
      border-radius: 6px
      color: '#555B65'
      box-shadow: 0px 0px 2px 1px
    card:
      type: custom:monster-card
      show_empty: false
      card:
        type: glance
        title: Lights On
      filter:
        include:
          - domain: light
            state: 'on'

57
57747×424 57.3 KB

But I’d hate to miss the option if it were possible from within the card, or even Lovelace itself.

thanks for having a look.

1 Like
2

You can also apply it to your theme and have it globally in your UI.
I personally added these lines to another user’s theme i like:

  ha-card-border-radius: '15px'                                                  
  ha-card-background: "rgba(46, 51, 58, 0.6)"       
  ha-card-box-shadow: "0px 5px 5px rgba(0,0,0,0.5)"     
  paper-card-background-color: 'var(--ha-card-background)'
2 Likes
3

Yes!, of course… thanks.
this is directly in the theme is it? Not using card modder on the theme?

I wanted to use color name for setting the color in the rgba(255, 255, 240, 0.2) notation but could find out how to Would you know how to replace the rgb with color name and add the transparency there?

4

I do have card modder on some cards to apply extra modifications but yes, the block of code i pasted is directly from my theme file.

I can’t quite get you :slight_smile:
Do you mean something like ha-card-background: gray, 0.2 to set the color by name along with opacity?
I dont think that’s possible, i have never seen it referenced before in CSS

5

yes that is what I was trying to formulate :wink: if not, no 1st world problem. Would have been nice though and make the config files that much easier to read and check for errors… especially since we need the rgba notation to Not apply the opacity to the child elements.

6

Maybe there’s a way, but I’ve never seen it. Perhaps someone more experienced could let us know.

For ease of use, there are several IDEs (none specific comes to mind right now) that will show you the color when you hover over rgb, rgba or hex codes.
You could look into that if it sounds useful.

7

just make a variable for your color in the theme

my-grey-color: 'rgba(20,20,20, 0.6)'
ha-card-background: var(--my-grey-color)
1 Like
8

thanks, will do.