Log in | Register
  1. Forum
  3. Discontinued Products
  5. JFBConnect v8.x Support (Joomla 3 Only) (CLOSED)
  7. Css login social Button - no showing in jomsocial

Topic-icon Css login social Button - no showing in jomsocial

Active Subscriptions:

None
8 years 5 months ago #55706 by robertobaggio
Dear Team,

In order to create "Css Buttons" and replace the "image default buttons" I followed what Alex wrote me by email:
editing the /modules/mod_sclogin/tmpl/socialLogin.php file is the correct thing to do. Replace:
echo $loginButtons;
with:
?>
YOUR HTML HERE
<?php
This is working actually for the sclogin module, but Jomsocial still shows the "image default buttons".
I need to see my css buttons in jomsocial, how can we fix it?

I've also another question. Do we have any chance to control css buttons from backend? I mean, if I need to disable facebook button or twitter button, I need each times to remove code manually in socialLogin.php file?

Best,

Baggio
The topic has been locked.
Support Specialist
8 years 5 months ago #55714 by alzander

This is working actually for the sclogin module, but Jomsocial still shows the "image default buttons".
I need to see my css buttons in jomsocial, how can we fix it?

JomSocial is it's own extension, which means you'd need to modify their template files to alter the button behavior there. I don't know the file off-hand, but could find it for you. Before we go down that route though, I may suggest something different to you that I normally don't recommend.. modify one of the files within JFBConnect.

If you always want the CSS files to show, in all places, and are up for a little PHP change, try editing the /components/com_jfbconnect/libraries/provider.php file. Around line 194, you'll see the getLoginButtonWIthImage function. In there, you'll see the following line:
return '<div class="social-login ' . $this->systemName . ' ' . $loginClass . ' pull-' . $alignment . '">
        <a class="' . $loginID . '" href="javascript:void(0)" onclick="jfbc.login.provider(\'' . $this->systemName . '\');">
            <img src="' . JURI::root(true) . '/media/sourcecoast/images/provider/' . $this->systemName . '/' . $image . '" alt="' . $buttonAltTitle . '" title="' . $buttonAltTitle . '"/></a>
            </div>';
That looks a bit hairy, but it's the line that will fetch the login button for each social network based on the name. If you want to take a stab at editing that, go for it. If you're a little scared, let us know what the format of your CSS buttons is, and I should be able to help you with the code that would work for all of them... assuming the only difference in the Facebook vs Twitter, etc in a few spots.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
8 years 5 months ago #55724 by robertobaggio
Dear Alex,
I always want css to show ( I don't like images :-) ) so let's take your route.
As you asked, here few of my buttons:

FACEBOOK
<div class="login-with-facebook">
<span class="rrssb-icon">
<svg version="1.1" xmlns="www.w3.org/2000/svg" xmlns:xlink="www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">

<path d="M27.825,4.783c0-2.427-2.182-4.608-4.608-4.608H4.783c-2.422,0-4.608,2.182-4.608,4.608v18.434

c0,2.427,2.181,4.608,4.608,4.608H14V17.379h-3.379v-4.608H14v-1.795c0-3.089,2.335-5.885,5.192-5.885h3.718v4.608h-3.726

c-0.408,0-0.884,0.492-0.884,1.236v1.836h4.609v4.608h-4.609v10.446h4.916c2.422,0,4.608-2.188,4.608-4.608V4.783z"/>

</svg>
</span>
<a href="javascript:void(0)" onclick="jfbc.login.provider('facebook');" class="login-with-facebook-a"><?php echo JText::_('COM_COMMUNITY_SIGN_IN_WITH_FACEBOOK');?></a></div>

TWITTER

<div class="login-with-twitter">
<span class="rrssb-icon">
<svg version="1.1" xmlns="www.w3.org/2000/svg" xmlns:xlink="www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">

<path d="M27.825,4.783c0-2.427-2.182-4.608-4.608-4.608H4.783c-2.422,0-4.608,2.182-4.608,4.608v18.434

c0,2.427,2.181,4.608,4.608,4.608H14V17.379h-3.379v-4.608H14v-1.795c0-3.089,2.335-5.885,5.192-5.885h3.718v4.608h-3.726

c-0.408,0-0.884,0.492-0.884,1.236v1.836h4.609v4.608h-4.609v10.446h4.916c2.422,0,4.608-2.188,4.608-4.608V4.783z"/>

</svg>
</span>
<a href="javascript:void(0)" onclick="jfbc.login.provider('twitter');" class="login-with-twitter-a"><?php echo JText::_('COM_COMMUNITY_SIGN_IN_WITH_TWITTER');?></a></div>


I have the same structure for all the other Social you have: amazon, facebook, github, google, instagram, linkedin, meetup, twitter, vk, windowslive, and yahoo
- Would be great if you can tell me the code to replace in provider.php file in order to get always them according with the selection done in the backend.
- Another question: Is there any chance that when in backend I choose the small version of the Default Login Button, the selected css buttons can shrink to 100px? If it migh assign a different class, i can handle this by css

Thanks,

Baggio
The topic has been locked.
Support Specialist
8 years 5 months ago #55728 by alzander
It looks like the SVG portion doesn't change. If so, it will be a lot more difficult. If not, replace:
return '<div class="social-login ' . $this->systemName . ' ' . $loginClass . ' pull-' . $alignment . '"> 
        <a class="' . $loginID . '" href="javascript:void(0)" onclick="jfbc.login.provider(\'' . $this->systemName . '\');"> 
            <img src="' . JURI::root(true) . '/media/sourcecoast/images/provider/' . $this->systemName . '/' . $image . '" alt="' . $buttonAltTitle . '" title="' . $buttonAltTitle . '"/></a> 
            </div>';
With:
$buttonText = JText::_('COM_COMMUNITY_SIGN_IN_WITH_' . strtoupper($this->systemName) );

return '<div class="login-with-' . $this->systemName . '"> 
<span class="rrssb-icon"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve"> 
                                    <path d="M27.825,4.783c0-2.427-2.182-4.608-4.608-4.608H4.783c-2.422,0-4.608,2.182-4.608,4.608v18.434 
                                        c0,2.427,2.181,4.608,4.608,4.608H14V17.379h-3.379v-4.608H14v-1.795c0-3.089,2.335-5.885,5.192-5.885h3.718v4.608h-3.726 
                                        c-0.408,0-0.884,0.492-0.884,1.236v1.836h4.609v4.608h-4.609v10.446h4.916c2.422,0,4.608-2.188,4.608-4.608V4.783z"/> 
                                </svg> 
</span> 
<a href="javascript:void(0)" onclick="jfbc.login.provider(\'' . $this->systemName . '\');" class="login-with-' . $this->systemName . '-a">' . $buttonText . '</a></div>';
There's a lot of single and double-quotes there which could cause some PHP errors. Hopefully, they're easy to narrow down though.

Let me know how that goes,
Alex
The topic has been locked.
Active Subscriptions:

None
8 years 5 months ago #55733 by robertobaggio
Dear Alex,

your solution looks great except, as you said, for the change of SVG. How could we make it to change?
Sometimes I use fontawesome and <i> instead of svg, could be easier in this situation?
Regarding error, I don't see error related to that even though I'm in Maximum error reporting,
Thanks for your help,
Best,

Marco
The topic has been locked.
Support Specialist
8 years 5 months ago #55744 by alzander
Marco,
I'm still not seeing a difference in the two SVG snippets you posted above. The main difference comes from the div tag at the top and href tag at the bottom. How different is the SVG code?

In general, it will be difficult to switch up the SVG code on each block. You'd need to do a bunch of if/else statements to check which provider is being used, which is why I only recommended this way if you were just changing class names on a div tag (which it still looks like is the only difference). If possible, I'd recommend moving any styles and extra features like your'e doing into a CSS file and then just use the div and href tags from the code above.

Otherwise, if you need to really customize each button with different SVG code, the best option would be to go back to hard-coding it in the SCLogin and JomSocial files and anywhere else you need the buttons.

I hope that helps, but if you can narrow things down a bit so there's less changes in the output that JFBConnect has to generate, it will make your life easier.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
8 years 5 months ago #55753 by robertobaggio
Dear Alex,
I understand what you mean and I'm agree with you, I can get a googd result also without svg.
Just one more question:
Do we have some option to order the appeareance of the buttons in backend?
I've seen that they are ordered alphabetically, but I need twitter show up before Google.
If it's not possible from the backend where are the blocks of code that I might move manually?
Best,
Baggio
The topic has been locked.
Support Specialist
8 years 5 months ago #55756 by alzander
If you use the {JFBCLogin} tag, you can update it like:
{JFBCLogin providers=twitter,facebook,instagram,linkedin,amazon}
Then, they should show how you want them to. That tag will call the code that you're modifying, so that you'll be able to add the social buttons easily wherever you want and they'll display with your customizations.

The SCLogin module already has a "Providers" box you can enter the list of social networks you want to display. Just put them in the order you want. For JomSocial though, you'd again need to modify their template files to update how they call our login feature to use the tag with the parameters you want.

I hope that helps,
Alex
The topic has been locked.
Active Subscriptions:

None
8 years 5 months ago #55767 by robertobaggio
Dear Alex,

thanks for your answer I was able to order buttons, but as you said except for jomsocial.
Which is the code that I've to edit in jomsocial?
Best,

Baggio
The topic has been locked.
Support Specialist
8 years 4 months ago #55776 by alzander
JomSocial would be the best to ask, but I'll help how I can. For the main 'home' page of JomSocial, the file you'd want to edit is /components/com_community/templates/<YOUR_THEME>/frontpage.guests.php. Toward the bottom, you'll see:
<?php echo $fbHtml;?>
Replace that with whatever tag/HTML you're using for JFBConnect.

There's a lot of other places that JomSocial uses the social login buttons, I believe. I'm not an expert on JomSocial though, so again, asking them how to modify it in certain places is likely you're best option.

I hope that helps,
Alex
The topic has been locked.
  1. Forum
  3. Discontinued Products
  5. JFBConnect v8.x Support (Joomla 3 Only) (CLOSED)
  7. Css login social Button - no showing in jomsocial
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS