Log in | Register
  1. Forum
  3. Discontinued Products
  5. JFBConnect v8.x Support (Joomla 3 Only) (CLOSED)
  7. Integrate into Joomla Login help

Topic-icon Integrate into Joomla Login help

Active Subscriptions:

None
4 years 3 months ago #65917 by joomleb
Hi guys,
JFBConnect > Configuration > General > Login / Logout > Integrate into Joomla Login: Bottom
Please, Can you help me? :

1 - How to place the title pull-left-intro above and the four social icons inline below of it and all centered in the page?
Right now they are all 5 inline on the left - image

File Attachment:



2 - Are you sure about the Instagram class coding ? - image (just to give you the way to check)

File Attachment:
The topic has been locked.
Support Specialist
4 years 3 months ago #65925 by mel
1.a. To get the buttons under the text:
.social-login.facebook.jfbcLogin.pull-left {
clear: both;
}

1.b. To center on page
span.sourcecoast.login {
justify-content: center !important;
display: flex;
}

2. The CSS on your site includes a padding of 10px in the common.css file. This is not present in our version that's checked in and distributed. Is it possible that you've added it yourself at some point? Either way, I'd add the element for instagram in there if it's still an issue.

-Melissa
The topic has been locked.
Active Subscriptions:

None
4 years 3 months ago #65927 by joomleb
Hi Mel, thanks!

1b - I applied your CSS code and, Please, the "Login With" is still left aligned, see in action here
Can you help on have it centered ?

2 - I'm going to investigate and I'll report here
The topic has been locked.
Support Specialist
4 years 3 months ago #65928 by mel
1b - The has a pull-left on it, so you can add this maybe?
.sourcecoast .intro {
float: none !important;
text-align: center;
}

Then I'd suggest tweaking the left padding on that item from 0 to something like 15px
padding: 6px 8px 0 0;
to
padding: 6px 8px 0 NEWVALUE;
The topic has been locked.
Active Subscriptions:

None
4 years 3 months ago #65930 by joomleb
Hi Mel,
really Many Thanks, as you understood my knowledge is too limited, I appreciated too much your suggestion.

I have just a last question: I want spacing the icons (left/right), but if I apply:
.login img {
display: inline-block;
margin: 20px 10px 0px;
}

The same code is applied also to the icons into the SCLogin module I use into the Left Offcanvas.
Please, How Can I differentiate, distinguish, the custom code for this Integrated Joomla Login Icons to the SCLogin module ones ?
The topic has been locked.
Support Specialist
4 years 3 months ago #65934 by mel
The buttons in SCLogin are in a module with class "sp-module". The buttons in the login page are in the Joomla login component with the ID "sp-component". To target just the ones in just the login page, use:
#sp-component .login img {
...
}
The topic has been locked.
Active Subscriptions:

None
4 years 3 months ago #65948 by joomleb
Hi Mel,
thank you very much, really too useful !
I have two questions more:

1 - Is there a way to set different icons images dimensions based on the screen dimension ?
I mean, for the component I set 48px icons and 15px margins that are really too bigs when displayed on a smartphone screen, so I'd like to set different icons, like 36px, and 8px margins

2 - Has the .svg icon support been added ?
The topic has been locked.
Support Specialist
4 years 3 months ago #65963 by mel
1. Yes, you can use CSS media queries to target different screens. Just figure out the widths for the views you need the smaller margin in. For example:
@media (max-device-width: 480px) { your css here }

2. This would require a code change in JFBConnect that's not in place yet. I've added an issue to our tracker to add it. The change should be relatively simple to go into the next release.

-Melissa
The topic has been locked.
Active Subscriptions:

None
4 years 3 months ago #65964 by joomleb
Hi Mel,

2 - .svg > I'll stay tuned, thanks!

1 - As far as I know, with a .svg icon would be really simple because with the class you suggested I could set for example: @media (max-device-width: 480px) {font-size: 36px;}
But, right now I had to upload to the .../media/sourcecoast/images/provider folder the 36px png icons images and the 48px png icons images. Then I set:
--- SCLogin > Social Button Settings > Image Style: the 36px (module)
--- JFBConnect > Configuration > Facebook/Instagram etc. > Login Button > Default Login Button: the 48px (component)
Now, I want to use the 36px one for the component when @media (max-device-width: 480px).
So, Please, How can I call with CSS the 36px png icons instead of the 48px setted ones ?
The topic has been locked.
Support Specialist
4 years 3 months ago #65983 by alzander
You can still use media queries to set the width or height of png images. I'd use the 48px image and simply update your media query to have:
@media (max-device-width: 480px)
{
  .social-login img {
    width:38px;
  }
}
That will shrink the image, but if it's a vector PNG, it should have no issue scaling similar to an SVG.

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. Integrate into Joomla Login help
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS