Log in | Register
  1. Forum
  3. Discontinued Products
  5. JFBConnect v8.x Support (Joomla 3 Only) (CLOSED)
  7. Facebook button alignment css with sourcecoast jfbconnect enabled

Topic-icon Facebook button alignment css with sourcecoast jfbconnect enabled

2 years 5 months ago #67604 by wocomm
Hello

in JomSocial login with SourceCoast enabled in Jomsocial the Facebook/Google buttons are out of alignment with the jomsocial buttons.

www.vallartatoday.com/access-join-login-my-vallarta-community

Could you please provide the css code necessary and the correct file to add it to (maybe overide?)  to align the buttons

Thank you

 
The topic has been locked.
Active Subscriptions:

None
2 years 5 months ago - 2 years 5 months ago #67605 by CyrusXxX
I am not support :) but try these:

.social-login.facebook.jfbcLogin.pull-left {
    margin-left: 15px;
    padding-bottom: 15px;
    margin-right: 10px;
}
Last edit: 2 years 5 months ago by CyrusXxX.
The topic has been locked.
Support Specialist
2 years 5 months ago #67609 by alzander
CyrusXxX,
Thanks for taking the time to help out! I used your answer as a starting point, but would recommend slightly different code:
.joms-landing__signup .social-login.pull-left {
    margin-left: 15px;
    padding-bottom: 15px;
}

The differences are:
* Use .joms-landing__signup to make sure the CSS only applies on the JomSocial registration page. That may, or may not, be correct.. but always best to be more specific to prevent changes on other pages on accident.
* Target just .social-login.pull-left and remove the margin to the right. That allows for each button to add margin to the left of themselves which will be needed if more social login buttons are enabled in the future on the site.

wocomm,
I hope that helps!

Thanks to both of you,
Alex
The topic has been locked.
2 years 5 months ago #67610 by wocomm
Hola Alex and Cyrus!

Thank you very much for the elegant solution! I added to custom.css looks great

Tom
The topic has been locked.
Support Specialist
2 years 5 months ago #67617 by alzander
Glad to help!

Alex
The topic has been locked.
2 years 5 months ago #67618 by wocomm
Hola Alex

Going to only use 3 buttons, I have added the third button (Instagram) pretty sure if I remove the spacing from between the buttons the three buttons will fit perfectly above the "Register Bar" with the 15px padding below the buttons.

How can I remove the 2 spaces between the 3 buttons, without removing the 15px to the left of the Facebook button?

www.vallartatoday.com/stageit/access-joi...y-vallarta-community

Thank you for your help

Tom
The topic has been locked.
Support Specialist
2 years 5 months ago #67621 by alzander
You can easily add just the spacing to the first button by updating the CSS above to:
.joms-landing__signup .social-login.facebook {
    margin-left: 15px;
    padding-bottom: 15px;
}
However, the container for your login buttons is a little too narrow and will still make the Instagram button drop to a second line. That's caused by a line in stageit/components/com_community/templates/js-column/assets/css/style.css:
.joms-landing .joms-landing__cover, .joms-landing .joms-landing__cover + .joms-landing__action {
    float: left;
    width: 50%;
}
If you increase the width to 60% or so, all 3 buttons will fit. It'd be best to override that style in your own custom.css file though.

Once you get the width right, you can still add some custom spacing to each button with the following:
.joms-landing__signup .social-login.google {
    margin-left: 15px;
}
.joms-landing__signup .social-login.instagram {
    margin-left: 15px;
}

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. Facebook button alignment css with sourcecoast jfbconnect enabled
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS