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...
krileon
