Change transparency of popups

Share your Projects! Dashboards & Frontend
1

I know this will be something in my theme file but I am not sure what but any card I click on and Hacs screens etc are really hard to read because the card that pops up is transparent.

What do I need to change to stop these being transparent, but I would really still want to keep the transparency of my standard cards.

image
image590×505 68.7 KB

image

2

Where in your theme have you defined your transparency?

Maybe you can try with the card-mod themes to disable the transparency only on your more-info cards.

Test:
  card-mod-theme: Test
  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog {
        background: none;
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        background: rgba(222, 222, 222,1);
      }

  card-background-color: 'rgba(222, 222, 222, 0.4)'

theme
theme623×524 32.8 KB

The above configuration makes the cards transparent, and the popup card non transparent.

3

Thanks, that doesn’t really mean much to me but I’ll google it.

I am sure my pop up info cards like when you click on a sensor etc never used to be transparent but they are now.

I only have transparency defined like this:

image
image750×1334 236 KB

1 Like
4

Thanks again for the above. I have added card-mod js to my resources but I am struggling to understand where I would put the code you have shown?

does all of that need to be added to each card? or does it go somewhere specific?

sorry, still learning

5

Just add the mentioned lines at the top of your transparent.yaml theme.
Remember to rename it accordingly.

Transparent:
  card-mod-theme: Transparent
  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog {
        background: none;
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        background: rgba(222, 222, 222,1);
      }

After adding it and saving, call the frontend.reload_themes service from the developers tools, refresh your browser and hopefully it will be fixed.

6

amazing thank you!

that works perfectly for cards!

image

I don’t suppose there is a way to get it working on things like Hacs menus. This is really hard to read and must be something to do with transparencies, although not on cards.

image
image1029×739 55.8 KB

7

I dont know how hacs loads themes so I cannot help.
Have a look at the card-mod theme examples and you might find something useful.
It may seem difficult at first but with some practice you will see you can achieve amazing results in your themes.

1 Like
8

Hello,
Card mod works great except I never figured out the transparent admin popup. Has anyone got it. Im using yourname theme btw