Transparency

Configuration Frontend
1

Newbie to Home Assistant…

I got the wallpaper working… finally.
Other question. How do I get transparency to work in the chip mushroom card with card mod?

image
image765×271 5.65 KB

As you can see, this doesn’t work.
but the other cards do…
image
image501×553 73.3 KB

Edit:

image
image433×534 11.9 KB

This is working

Still can,t get this to work…
image

2

Not using mushrooms, but are you sure that the element inside this card has it’s own ha-card element?
Also, do you really want to set a transparent background to this element only, not to the whole card?

2 Likes
3

Hi Ildar,
Not at al sure that it has its own ha-card element…
Yes I’m trying to set up a transparent background for al the elements in this specific card.

:smiley:

4

Suggestion:
If you need to style smth by card-mod - do not create a separate thread. Go to the huge card-mod thread and ask there.
Also, there is a dedicated huge mushroom thread - may be it is better to ask there.
Reasons: keep solutions in 1 place, less time for searching, more people will see your question, get answers faster.

For many other cards I can give an advise “how to make it transparent”, but not for mushrooms, not using them.
Just a guess - try this:

type: mushroom….
…
card_mod:
  style: |
    ha-card {
      --ha-card-background: ….
    }

Also - always post a code as a code, not as a picture.
There is a special formatting here (triple “`”).

5

Ah thanks!
For pointing me in the right direction! I’ll ask there.
I’ll also post code as code in the future, at that specific moment I thought a snippet was easier!

6

A snippet should be “copy/paste-able” for people to reproduce your case)))

7

Did you find any solution for this? Cant find anyting in the dedicated mushroom thread… :frowning:

8

This is how I got mine to work:

type: custom:mushroom-light-card
entity: light.lr_light
name: Living Room
icon: mdi:lamp
use_light_color: true
show_brightness_control: false
show_color_control: true
layout: horizontal
tap_action:
  action: toggle
show_color_temp_control: true
hold_action:
  action: more-info
card_mod:
  style: |
    ha-card {background: transparent;
       --border-style: none;
       --primary-text-color: white;
       --secondary-text-color: teal;
       --border: 0px;
       --box-shadow: none;
       --background: rgba(50,50,50,0.3);
       border: none;}
1 Like