function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
EmilyCobbEmilyCobb 

Community CSS for Login Page

I'm trying to replicate the Community login page that is in the SF community documentation. I have been able to edit the branding colors to create the black box and added CSS for transparency. The only issue is that it also makes the elements on the box transparent as well (logo/email/pw/login button). I've tried the following CSS but it still renders in the screen shot below. Any other suggestions? Thanks!

.inputContainer
{
    opacity: 1;
    position:relative;
    z-index: 10;
    
}

.communityLogo
{
    opacity: 1;
    position:relative;
    z-index: 10;
}

User-added imageUser-added image
NagendraNagendra (Salesforce Developers) 
Hi Emily,

Sorry for this issue you are facing.

May I suggest you please check with below links which might help you further to accelerate with the above issue. Please let us know if this helps.

Mark this as solved if the reply was helpful.

Thanks,
Nagendra
Hamish FlynnHamish Flynn
Looks like your white box was left with a transparent background.... is that the case? you could put the white background back. I believe the element has class "loginBody", but I would recommend you to test it out. Announcements I don't have in my login page so I could not tell the class/ID, but you can inspect and find which is the DIV that contains them and add the CSS in the login page.

As per where to add the CSS, you can add it to the login.jsp to your brand (so you would use a custom login page), also that way you can do further changes without support's intervention...

Hope this helps!

https://prepaidgiftbalance.net/