CB Connect - Changing the Social Network Login Button Image

I received an email message from Google complaining about the look of the CB Connect Google Plus Login Button. I thought of sharing how I managed to replace the CB Connect button with the official one from Google. While I am at it, I thought of doing it for Facebook too. Following are the steps. I have CB Connect Version 7.0.0. If you use a different version than mine, the CSS selectors might be different, or the whole approach might not work!

First, I downloaded the official images from the respective websites and saved these images in (MyWebsite/tempaltes/MyTemplate/images/)

Second, I changed the CB Connect settings to use an "Icon Only" for the Button Style. This is a very important step.

1. Community Builder -> Plugin MGR -> CB Connect (Ver 7.0.0) -> Parameters -> Facebook -> Registration -> Button Style: Icon Only
2. Community Builder -> Plugin MGR -> CB Connect (Ver 7.0.0) -> Parameters -> Google -> Registration -> Button Style: Icon Only

Third, I updated the CSS file (MyWebsite/tempaltes/MyTemplate/css/user.css). If you have such a file, add the following lines at the bottom of it. If you don't have it, you can create one. The name of the file might be custom.css (rather than user.css) or whatever name is relevant to your template.

/* CB Connect - Sicial Network Login Buttons */
/* 1. Remove the butoon background */
.cb_template .cbConnectButton.btn.cbConnectButtonGoogle
, .cb_template .cbConnectButton.btn.cbConnectButtonFacebook
{
color: transparent;
background-color: transparent;
border-color: transparent;
margin: 0;
padding: 0;
}

/* CB Connect - Sicial Network Login Buttons */
/* 2. Remove the CB icon */
.cb_template .fa.fa-google-plus.fa-lg:before
, .cb_template .fa.fa-facebook.fa-lg:before
{
content: none;
}

/* CB Connect - Sicial Network Login Buttons */
/* 3. Use the official image */
span.fa-google-plus {
background: url("../images/login_butoon_images/btn_google_signin_dark_normal_web.png") no-repeat;
display:inline-block;
width: 191px;
height: 46px;
}
span.fa-facebook {
background: url("../images/login_butoon_images/facebook_sigin_button_215.png") no-repeat;
display:inline-block;
width: 215px;
height: 35px;
}

Good Luck...

The button is perfectly compliant with their G+ sign in API as per their guidelines. The button will be changed when we upgrade to their new Identity/People API since G+ API is going away. Facebook is also perfectly complaint. There's no need to change either but you are of course welcome to do so. You can also use CBs built in CSS override functionality to add your custom CSS as shown below.

www.joomlapolis.com/blog/kyle/18711-template-css-overrides-made-easy

I've updated all the branding in latest build release. You can review the latest branding styles below. All are directly sourced from the providers branding guidelines.

demoreference.cbdemosites.com/addons/cb-connect/sign-in-login-link