Make login section transparent

[martinii]

Hello,

I’ve just updated my Nextcloud to 25.0.1 and I wonder how to make login section transparent instead of white:

Could You help me please?

[bb77]

You can change the color and transparency using the Custom CSS app. I have set mine to white (#ffffff) with 50% transparency (80). I have also set the text to full black (#000000) for better readability and removed the shadow around the box.

.guest-box, .body-login-container {
    --color-main-text: #000000;
    --color-main-background: #ffffff80;
    --color-box-shadow: ffffff00;
}

.login-form__headline {
    color: #000000;
}

.two-factor-header {
    color: #000000;
}

Disclaimer: I’m not a CSS expert and patched this all together myself using the inspector (F12) in the browser. So use it at your own risk. It seems to work though and so far I haven’t noticed any unwanted side effects.

[martinii]

Works great! Thank You very much!

[Malta-Support]

Hi,
unfortunately, this solution didn’t work for me.
I did:
.guest-box, .body-login-container {
–color-main-text: #000000;
color-main-background: #ffffff80;
color-box-shadow: ffffff80;
}

.login-form__headline {
color: #ffffff;
}

.two-factor-header {
color: #ffffff;
}

But - result as shown (NC 28.0.2) - any ideas?
Thanks a lot in advance.

[bb77]

@Malta-Support

unfortunately, this solution didn’t work for me.

Yes, with current NC versions I feel it has become more complicated because not only do you have to manage two themes since they introduced dark mode, but there have been a lot of other changes in the meantime as well. Besides, it’s not like I spend a lot of time looking at the login screen in the first place, so I gave up on it.

In case you don’t get any usful answers here, just press F12 in your browser and play around with it until you figure it out. That’s what I did to find the solution above, which worked at the time.