Skip to main content

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 @SIC! Thanks for your question. It should be a relatively easy adjustment by leveraging Docebo’s custom stylesheet in Branding, Look and Feel.

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. 
 

 


@SIC - VERY nice work! I’m glad the solution worked for you! 😁

Kudos as well, @jford, for the logo add! Looks sharp!


Reply