1. Forums
  3. Support and Presales
  5. Professional Members Support
  7. [SOLVED] cb connect buttons css issue

[SOLVED] cb connect buttons css issue

12 years 5 months ago - 12 years 5 months ago #181283 by amir00251
[SOLVED] cb connect buttons css issue was created by amir00251
cb connect forum was giving 500 error when submitting the new message, which is the reason I am adding this topic here.

I have a problem with the cb buttons styling when css is optimised and compressed in joomlart template.

the problem is that image does disappears. Therefore I decided to put the css code in template.css direct, for facebook button for example, something like

.fbc_button {
background-color: transparent;
background-image: url("/chelmsford/components/com_comprofiler/plugin/user/plug_cbconnect/facebook/images/icon.png") !important ;
background-position: 0 0;
background-repeat: no-repeat;
border-width: 0;
color: #5f9729 !important;
cursor: pointer;
font-size: 10px;
font-weight: bold;
height: 21px;
text-indent: 20px;
width: 100%;
}

Now the only issue is that buttons are not shown complete, background color is not extended behind "sign in" text, attached image.

I need a guidance on what to add to above code so that styling could be 100% right.

thank you.
Attachments:

Please Log in to join the conversation.

12 years 5 months ago - 12 years 5 months ago #181288 by boatstar
Replied by boatstar on topic Re: cb connect buttons css issue
same issue my CB Connect plugin for some reason its not rendering the buttons only text links saying "Sign in" for both the facebook and twitter buttons any suggestions? you can check it out in the community portal at BoatStars.Com. Thank you any suggestions would help.

Please Log in to join the conversation.

12 years 5 months ago #181324 by krileon
Replied by krileon on topic Re: cb connect buttons css issue
Please disable your CSS compression, remove the CSS you placed in your Joomla template, and confirm if working fine. I do not support CSS compression as all it does is break the CSS.

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.

12 years 5 months ago #181330 by amir00251
Replied by amir00251 on topic Re: cb connect buttons css issue
Hello,

I did mention that it works fine without compression but my site is really big and without css or js process or compression it takes several seconds to load a page.

Could you please guide me on the css, probably a small add-on code would be needed, please.

Please Log in to join the conversation.

12 years 5 months ago #181336 by krileon
Replied by krileon on topic Re: cb connect buttons css issue

I did mention that it works fine without compression but my site is really big and without css or js process or compression it takes several seconds to load a page.

Of course, because compression does nothing but break CSS and JS. It merges all the files together then it obfuscates them. That is horrible practice as CSS often uses relative URLs (relative to the location their file is at) and if the compression can't generate those relative paths to absolute paths properly then alter the CSS to use those new URLs properly it will not work. It's fine to use JS compression, but I do not recommend using CSS compression as you will absolutely have problems (not just with CB Connect, but with anything that has relative paths).

Could you please guide me on the css, probably a small add-on code would be needed, please.

Below is an example from with CSS placed in Joomlas default template.

J1.7
.fbc_button_bg {
	background-image: url( '../../../components/com_comprofiler/plugin/user/plug_cbconnect/facebook/images/bg.png' );
	background-repeat: repeat-x;
	background-position: 0px 0px;
	margin-top: 2px;
	margin-bottom: 2px;
	height: 21px;
	min-width: 90px;
	display: inline-block;
}

.fbc_button {
	background-image: url( '../../../components/com_comprofiler/plugin/user/plug_cbconnect/facebook/images/icon.png' );
	background-repeat: no-repeat;
	background-position: 0px 0px;
	cursor: pointer;
	height: 21px;
	width: 100%;
	border-width: 0px;
	color: white;
	font-size: 10px;
	font-weight: bold;
	text-indent: 20px;
	background-color: transparent;
}

.fbc_button_small {
	background-image: url( '../../../components/com_comprofiler/plugin/user/plug_cbconnect/facebook/images/icon.png' );
	background-repeat: no-repeat;
	background-position: 0px 0px;
	cursor: pointer;
	height: 19px;
	width: 19px;
	margin-left: 2px;
	margin-right: 2px;
	border-width: 0px;
}

The URLs need enough "../" to go back to Joomlas root so it can navigate through the component paths to the image files. Adjust as necessary.

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.

12 years 5 months ago #181371 by boatstar
Replied by boatstar on topic Re: cb connect buttons css issue
Thank you the buttons are now working but when you log in using facebook button the page just refreshes not logged in but the twitter but works.

Please Log in to join the conversation.

Moderators: beat, nant, krileon
  1. Forums
  3. Support and Presales
  5. Professional Members Support
  7. [SOLVED] cb connect buttons css issue
Time to create page: 0.229 seconds

Facebook Twitter LinkedIn

    You are here:  
  1. Home
  2. Forums
  3. Support and Presales
  4. Professional Members Support
  5. [SOLVED] cb connect buttons css issue

Search

Login / Logout

User Menu