Streamline Social Login Button

Gogito · November 2014

So, I've installed vanilla and configured it to use Facebook, Twitter and Google Plus to login ( the google plus plugin is this one https://github.com/vanilla/addons/tree/master/plugins/GooglePlus ).
They're all working but the button seems really out of place. Here's the link: http://mmo4teen.com/forums/
Can anyone show me how to make all the button looks like the one from Google Plus ? If not then how to make them go together would be great also. Thanks in advance.

Bleistivt · November 2014

Well, the Google Plus plugin already uses the new social login buttons which will come in 2.3.

If you can't wait, you have to modify the social plugins EntryController_SignIn_Handler Handlers to use SocialSigninButton( )

e.g. for the Facebook plugin you would replace this:
https://github.com/vanilla/vanilla/blob/2.1/plugins/Facebook/class.facebook.plugin.php#L120-L147
with this
https://github.com/vanilla/vanilla/blob/master/plugins/Facebook/class.facebook.plugin.php#L120-L135

You may also have to copy over the CSS rules for these buttons.

Not really recommended though, I'd rather just modify the Google+ button to look like the old one:
https://github.com/vanilla/vanilla/blob/2.1/plugins/GoogleSignIn/design/google-signin.png

Gogito · November 2014

Thanks a lot. But guess I'll wait for it then.

Gogito · May 2015

@Bleistivt On second thought, can you show me how to change the button back ? I can't seems to find a way since it looks like this plugin is different from the other two. It doesn't use an image but a white font awesome icon then a colored background, int his case red for G+ so I can't replace it with an image. Any thought ?

Bleistivt · May 2015

The button has its own CSS class. So you can do pretty much whatever you want

.SocialIcon-Google, .SocialIcon-Google:hover {
  background: black;
  font-size: 0;
}
.SocialIcon-Google .Icon {
  display: none;
}

Just replace background: black; with background: url('link-to-you-image');, for example

Streamline Social Login Button

Comments