Google Identity provider, cannot customize button type

ronn316

Maybe I'm missing something obvious, but I can't seem to adjust any of the button properties for the Google login button.

Having followed the documentation to setup my Google client Id and secret, everything is working great, but in the Option section it gives you a link to Google's documentation where you can see the possible values to use for the Button properties.

By default, the Theme in FusionAuth is set to 'outline'. This can be seen on Identity Providers > Google > Options.

alt text

In the Google documentation the outline theme has a white background.

alt text

Yet my app is using the 'filled_blue' theme.

alt text

By the way, when trying to change any other setting in the Button properties, the button is unaffected. Not sure what is going on.

mark.robustelli

@ronn316 I was able to replicate what you are seeing. I changed the login method for the Identity provide and the theme worked. I see when you hover over the info for Button text it says that the GIS API will not be utilized in this configuration. It looks like that means the Button properties too. We may need to update the documentation here.

On a related note, I looked at the html and was able to add the following css to the theme and turn the button red. You may be able to get the look you going after by doing something similar.

#google-login-button{
  background-color:red;
}

ronn316

@mark-robustelli That seems to do the trick. Since I want the background white, I need the text black but I can't seem to get it to work. I'm no expert with CSS but it seems setting the color property on the google-login-button style doesn't do it. Digging deeper into the browser html it looks like the class "text" on the div inside the button is controlling the color.

alt text

ronn316

@mark-robustelli Ignore my last post. I managed to do it. Full code incase someone else wants to use this:

#google-login-button{
  background-color: white;
  border: 1px solid #c5c8ca;
}

.login-button-container .login-button.google .text {
    color: black;
}

mark.robustelli

@ronn316 Awesome, glad you got it the way you want it and thanks for sharing the update with the community!