We want to change the button color for our Open ID Connect button. We’ve changed the text in the button using the localization tool, however if anyone has information on how to best change the button to a color other than white, we would be much appreciative.
Hey
The challenge you’ll find is that the HTML for this particular button uses an “nth child” naming convention. I’ll highlight that below. Depending on how many SSO buttons you have introduced and active on the sign-in page, the child number for the selector will vary. In my example code, you’ll see that what I’ve had to target is the 6th “nth-child” reference. Otherwise, I expect the selector and HTML reference to be relatively identical less the child reference itself.
Login page view of OpenID icon/button, with color updated:
In the screenshot above, you can see that I just matched the color to what the background already was for this test site’s sign-in page.
Example CSS code:
#doc-layout-login > div.login-wrap > form > div.sso-buttons > ui-button-raised-neutral:nth-child(6) > ui-button-raised > button {background-color:#002f8e}
Hope this helps!
Thank you! That did the trick!!
We were able to also add our company logo.
Kudos as well,
Reply
Log in to Docebo Community
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Docebo Employee Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.