Log in | Register
  1. Forum
  3. Discontinued Products
  5. JFBConnect v8.x Support (Joomla 3 Only) (CLOSED)
  7. Excellent component - need help with alignment

Topic-icon Excellent component - need help with alignment

Active Subscriptions:

None
11 years 4 weeks ago - 11 years 4 weeks ago #53129 by techspecx
Hello,

Thank you for a really excellent component. I need help with alignment - I have read your other posts and have tried text-align and margin-left but that is making everything align at the same time.

Could you help?

Website address:

www.techlick.com/index.php/community/login

Thank you.

Regards,
Robert

sorry for the duplicate attachments
Last edit: 11 years 4 weeks ago by techspecx.
The topic has been locked.
Support Specialist
11 years 4 weeks ago #53137 by mel
I added this CSS in my Developer Tools inspector and it seemed to do the trick on that page:
body div#fd .social-login.pull-left{
float:none !important;
display:inline-block;
}

Try that out. I don't think you'll need the code any more for setting text-align to center for the jfbconnect-wrapper class, but you can experiment with that.

-Melissa
The topic has been locked.
Active Subscriptions:

None
11 years 4 weeks ago #53140 by techspecx
Hey Mel,

Thanks for a quick response. That did not work. It seems that when I inspect the CSS code the block is:

div.row-fluid

But when I try anything that I know of trying it does not respond. I appreciate your fast reply.

Regards,
Robert
The topic has been locked.
Support Specialist
11 years 4 weeks ago #53145 by alzander
I see the following CSS in the base.min.css file:
body div#fd .pull-left {
  float: left !important;
}
I don't see the code Melissa mentioned above. When I add that using Chrome, the icons are properly centered.

Can you add the code again, make sure you rebuild your caches or minified CSS files, and test again? Even if it doesn't work, please leave the change intact and let us know what file the change is in so we can see it on the page to verify it's there.

Hopefully that gets you going,
Alex
The topic has been locked.
Active Subscriptions:

None
11 years 4 weeks ago #53149 by techspecx
Hello Alzander,

Thank you for the reply. I put the code in this file:

rt_chapelco-custom.css

The only thing that I see why it isn't working is because the code isn't being picked up.

Thank you for your time.

Regards,
Robert
The topic has been locked.
Support Specialist
11 years 4 weeks ago #53157 by alzander
Robert,
Thanks for letting me know the file you're editing. I do see that file being included on the page and the code you added there seems correct. However, the problem looks to be from the block above it:
/* Change background color on the login tab on EasyBlog toolbar */
#ezblog-menu .blog-navi li.float-r > a, #ezblog-menu .blog-navi li.float-r > a span {
    color: #FFFF33 !important;
    background-color: #555 !important;
)
That block ends with a ) and not a }, which means that everything after it isn't being parsed properly.

Please fix that minor error and hopefully things will start going your way.

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

None
11 years 4 weeks ago #53162 by techspecx
Hello Alzander,

My apologies - one of those sleepless nights coding. Thanks for the support!

I actually like the way you have the login setup on your login layout. Is there a way to have my social login buttons arranged like that? Is there a setting that I should refer to or sample code I could implement. Thank you.

Kind Regards,
Robert
The topic has been locked.
Support Specialist
11 years 4 weeks ago #53167 by mel
First, go into the backend of the JFBConnect component and set the login button images for each of the social network providers you have enabled. As you can see, we set the bigger login buttons for the providers with more users and the icons for other providers.

Additionally, we just added a couple of styles to get the icon buttons on a second line:
.sclogin-social-login div.scInstagramLogin {
clear: left;
margin-left: 140px;
}

That should get you started, but you can inspect the elements on our page with browser tools if you have any more styling tweaks needed.

-Melissa
The topic has been locked.
Support Specialist
11 years 4 weeks ago #53172 by alzander
And if you're looking to add the buttons to the drop-down user menu, see our Common Support Questions area on how to add the "Connect" buttons to the menu.

Alex
The topic has been locked.
  1. Forum
  3. Discontinued Products
  5. JFBConnect v8.x Support (Joomla 3 Only) (CLOSED)
  7. Excellent component - need help with alignment
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS