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 “`”).

1 Like
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;}
3 Likes
9

I try the configuration but it isn’t work. the backgruoud color is black can you help me?

image
image641×427 44.9 KB

  • type: custom:layout-card
    cards:
    • type: custom:purifier-card
      entity: fan.zhimi_mb3_491f_air_purifier
      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;}
      aqi:
      • entity_id: sensor.zhimi_mb3_491f_pm25
        stats:
      • entity_id: sensor.zhimi_mb3_491f_filter_life_level
        unit: “%”
        subtitle: Filter
      • entity_id: sensor.zhimi_mb3_491f_motor_speed
        subtitle: Motor Speed
        show_name: true
        show_state: true
        show_toolbar: false
        compact_view: true
10
  1. Always paste a code formatted. Compare how you posted a code with other people’s examples.
  2. You seem to use card-mod - but you missed a “card_mod” keyword. Scroll up a bit for another person’s example.
  3. You are trying to use card-mod with some custom card - but it may NOT have ha-card element (check docs for card-mod about ha-card and mod-card). Test if this card may be used with card-mod the way you are trying to use.