Overlay obstructs Profile and User Card backgrounds

Support

AI-generated summary

The discussion is about the overlay obstructing Profile and User Card backgrounds. ron_jeremy points out that the overlay is blocking the background images, making them almost invisible. cpradio suggests adding a custom CSS code to make the overlay more transparent. However, ron_jeremy reports that the code does not work for him. Mittineague shares their success with the code and provides before-and-after screenshots, suggesting that the issue might be due to the code not being enabled. ron_jeremy confirms this and thanks for the help, planning to test various settings.

1

What is the point of Profile and User Card backgrounds if they are obstructed by the overlay? In the User Card instance, the background is almost completely blocked.

discourse-profile-background-01.jpg1059×537 99.6 KB

discourse-user-card-background-01.jpg558×362 54.3 KB

2

So add a special CSS customization to provide more transparency to the overlay?

In Customize > CSS/HTML > CSS

#user-card .card-content {
  background: rgba(34,34,34,.5);
}

.user-main .has-background .details {
  background: rgba(34,34,34,.5);
}
3

Thanks for the help. Unfortunately, the CSS you posted does not work. I tried various changes like different rgb values and also the opacity from .5 to .1 to .9 but nothing made a difference.

4

It works perfect for me. Did you forget to check enabled?

before

profile-reg.png666×414 241 KB

after

profile-fade.png663×382 274 KB

before

user-card-reg.png589×240 137 KB

after

user-card-fade.png589×244 175 KB

The only thing I might want to change is whitening up the user card badge text.
But that would depend on what the background image was.
So maybe leave it alone? Bold it?

5

My bad – I did not set it to enabled. I will test various settings over the next few days.

Thx very much!