CB Connect - Changing the Social Network Login Button Image

5 years 3 months ago #309394 by bilal.abdeen
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...

Please Log in to join the conversation.

5 years 3 months ago #309437 by krileon
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


Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in to join the conversation.

5 years 3 months ago #309440 by krileon
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


Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in to join the conversation.

Moderators: beatnantkrileon
Time to create page: 0.200 seconds

Facebook Twitter LinkedIn