Themes - need to fix some issues

Themes - need to fix some issues

Hi guys,
PHP 7.1.18 + Joomla 3.9.1 + JFBConnect 8.0.4 + Helix Ultimate 1.0.4 template (Bootstrap 4) + SP Page Builder Pro 3.3.6 - my test site https://test.egulp.net
where are shown 3 login ways: SCLogin shown on the left offcanvas menu + Joomla Login page link + SCLogin module page link:

1 - Login View Settings > Show Forgot Password: White Button
As you can see the "Button" is always shown outside the Password fiel and on the bottom ! But we are in a Material Design responsive mobile world and that button should be:
   A - Into the Password field. For me doesn't mind if on the left (like the Joomla Login) or on the right.
   B - not a complicate small invisible button (on the bottom of the field!) , but a simple Font Awesone question .svg icon https://fontawesome.com/v4.7.0/icon/question into the same
Please, How to have it ? (I mean in special about A point)

2 - Login View Settings > Theme: Default (Sourcecoast is an option) - I red and know about https://www.sourcecoast.com/sclogin/doc … ion/themes
My template is using Bootstrap 4, as you can see on demo site, the "Default" is not following quite nothing of standard Boostrap 4 :
   A - when I inputting the Field border should be blue, while seem is following the red "template link color"
   B - The button doesn't follow the standard Boostrap 4 template settings
   C - The form fields and buttons are smaller then the standard Boostrap 4 template settings, the "Small" "Form Control Size" https://www.quackit.com/bootstrap/boots … _forms.cfm would be a good thing as option when use the SCLogin module like in the left offcanvas menu, while a "Default Size" should be the default one.
   D - The "Connect with Socials" shown when logged have its own height, while should follow the templates.
   E - Please, How to don't have so much space between fields and button // and the Social buttons ?!?
Now, What I mean with A/B/C/D is that a """default""" Theme should simply follow what set in the Template, in my case as Bootstrap 4. That'sthe only start point ! Or the "Default" Theme shouldn't never be "default".
Please, I'm not a programmer, Can you help me to have a "default" / "blank" Theme as I descibed ? What I have to erase from your "default" Theme ? What I have to keep ?

Administrator has disabled public posting. Please login or register in order to proceed.

Re: Themes - need to fix some issues

I'll try to answer all the questions as best I can, but most are related to styles in your template itself that are conflicting with our styles.

1a) Password icon
/templates/shaper_helixultimate/css/template.css at line 809 is setting:

Code:

input[type="password"]:not(.form-control) {

display: block;
}

That makes the password field always be on a line on it's own.
1b) Font-awesome - We use the Glyphicons set for those images. You can create your own CSS to override our style for ".sourcecoast .icon-white" which currently loads the image out of media/sourcecoast/css/img/glyphicons-halflings-white.png

2) Joomla comes included with Bootstrap 3. That is the version we use for our styling. We use a namespaced version of Bootstrap 3, which means our styles should only apply to our modules and there shouldn't be conflicts with other Bootstrap styles. We don't support Bootstrap 4 styling right now as that would cause conflicts with the majority of templates that are still built for BS3. There isn't a good way around this for us right now, though at some point in the future, we may consider supporting both Bootstrap 3 and something else. It really depends on which direction Joomla 4 takes.

We call the style "Default" because it's the most close to the standard Joomla module, with only slight tweaks. Unfortunately, there is no standard for how all buttons or other elements of templates for Joomla should be made, so there isn't a way for us to inherit everything. Trust me, we wish it were possible. Bootstrap 3, which ships with Joomla, is the closest we get to a standard library and definitions, but other templates want to use the latest frameworks (which is understandable), but there's just no way to support every possible template's choice of framework and version.

I don't honestly know Bootstrap 4 well enough to let you know what would have to change in our module to support it. It's just not something we've investigated.

I hope the above makes sense, but if you need any help getting the above going, please let me know.

Thanks,
Alex

If you use our extensions, please consider leaving a rating and review at the Joomla! Extension Directory:
JFBConnect | SCLogin

alzander
Alex
useravatar
Offline
24224 Posts
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.

Re: Themes - need to fix some issues

Hi Alex,

1a - Do you mean that is the Helix Ultimate template that is causing the issue ?!? ..."That makes the password field always be on a line on it's own"...
But my question was: How to have the icon inside the password field (right or left aligned doesn't mind).
Please, Do you have a workaround ?

2 - You added your SCLogin Themes adding the setting: "Login View Settings > Theme: Default (Sourcecoast is an option)"
But on each Joomla Modules we have: "Advanced > Module Style: ..." = Inherit is the first choose, that mean inherit from template, or we could use other specific module styles.
Your styles (default and Sourcecoast) should be here, giving us a chance to use our Template style or choose / build another one, or choose your Sourcecoast one... .
Joomla comes included with Bootstrap 3, but, as you can see in my test site, the Login module is inheriting perfectly the Template Bootstrap 4 settings...

Please, Can you help to solve at least these two issues:

2D - The "Connect with Socials" shown when logged have its own height (too big), while should follow the template one. Please, How to change it ?

2E - Please, How to don't have so much space between fields and button // and the Social buttons ?!?

Administrator has disabled public posting. Please login or register in order to proceed.

Re: Themes - need to fix some issues

Hi Alex,
Please, Do you have any answer to my previous post ?

Administrator has disabled public posting. Please login or register in order to proceed.

Re: Themes - need to fix some issues

I'm sorry for the delayed response. Most of the above are styling changes that I've provided below. You should be able to add these to your SCLogin theme.

1a. Yes the template is forcing the input to be on it's own line. You can update that with the following:

Code:

.sclogin input[type="password"]:not(.form-control) {

display: inline;
}

2. Can you look in your /templates/shaper_helixultimate/html/mod_login directory? If that directory exists, and if there are files in that directory, it means that your template has provided an override for how the standard Joomla login module should look. Let us know if there are files in that directory because if so, it indicates that the Joomla module isn't inheriting styles automatically from your template but that your template is providing the style and functionality for the Joomla module to work with it.

2d. There's styling on the "intro" class. You can update this

Code:

.sclogin.sourcecoast .intro {

font-size:inherit;
padding: 0px;
}

2e. Remove space by removing margin below the form

Code:

.sclogin.sourcecoast form {

margin: 0px;
}

and by removing margin around those login button images

Code:

.sclogin .login img {

margin-top: 0px;
}

-Melissa

Want to stay up-to-date on new releases and development efforts?
Follow us on Twitter @sourcecoast and @mandreae

mel
Melissa
useravatar
Offline
3645 Posts
Website 
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.

Re: Themes - need to fix some issues

Hi Melissa,
thanks for your Support:

1A - As you can see the login module into the offcanvas module position on my test site: Your CSS code let show the "?" icon on the same line, but:
- A - my question was How to show it into the password field ? ...Keeping the Userneme/email and password field with the same width, no extra width for the "?" icon
- B - the "?" icon seem to don't be vertically aligned
- C - How to change the "?" icon button ? ...Is there a way to add a .svg Font Awesome icon ?
- D - There is a tooltip issue: when the offcanvas is opened and I go over the "?" icon, 2 "Forgotten password?" tooltips are opened, the right one into offcanvas and one below, into the site layer. Be careful, the 2 tooltips are not opened in the same moment. Please, How to fix it?

2 - You are right, there is a "default.php" file.
Please, Is there a trick to have it working also with SCLogin ?
Is there a way to "transform it as a SCLogin Theme ?

2D and 2E Thanks for the codes !

Administrator has disabled public posting. Please login or register in order to proceed.

Re: Themes - need to fix some issues

1)a) The username and password blocks are set to 87% to allow for the 'forgot' symbols. You can enable the "Forgot username?" question mark to make them both show it, and be the same size. Alternatively, you can add this style to make the username width larger:

Code:

.sclogin-joomla-login.vertical input#sclogin-username.input-block-level {

    width: 100% !important;
}

b) Edit the /media/sourcecoast/themes/sclogin/default.css file. Around line 45, you'll see:

Code:

a.forgot.btn {

    height: 28px !important;
}

Change that width to 30px which will make it the same height as the input box.
c) We use the glyphicons that are a part of bootstrap:
/media/sourcecoast/css/img/glyphicons-halflings-white.png

The password is in our default.php file as the following HTML:

Code:

<i class="icon-question-sign icon-white" title="¿Olvidó su contraseña?"></i>

The CSS to control this is:

Code:

.sourcecoast .icon-white {

background-image: url(img/glyphicons-halflings-white.png);
}
.sourcecoast .icon-question-sign {
    background-position: -96px -96px;
}

You can override those styles or HTML to point to fontawesome or another background image solution.

1d) Where can I see this? The tooltip looks correct to me when I go to the SCLogin link on your site.

2) There isn't an automatic way to do this. You'd need to update our template files for SCLogin to use Bootstrap 4 styles as necessary. That's why your template has their own template files for the Joomla login module since the template styles for BS4 can't just automatically be applied to standard Joomla styles that use earlier versions of Bootstrap.

I don't know BS4 well enough to let you know how you'd have to update our template files, so I can't provide good instructions there.

I hope that helps,
Alex

Want to stay up-to-date on new releases and development efforts?
Follow us on Twitter @sourcecoast and @mandreae

mel
Melissa
useravatar
Offline
3645 Posts
Website 
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.

Re: Themes - need to fix some issues

Hi Melissa, thanks,

1D - https://test.egulp.net > Tooltip issue:
when the offcanvas is opened > go over the "?" icon: 2 "Forgotten password?" tooltips are opened, the right one into offcanvas and one below, into the site layer.
Be careful moving the mouse slowly, because the 2 tooltips are not opened in the same moment.

Please, How to fix it?

Administrator has disabled public posting. Please login or register in order to proceed.

Re: Themes - need to fix some issues

You can adjust the z-index for the tooltips on your page. Currently your template has it set to 1070 which is less than the offcanvas-menu z-index 10000. To show on top of the offcanvas menu, you'll need to increase the z-index value.

For example, you can use

Code:

.tooltip {

z-index: 10001 !important;
}

This belongs in your template and is not related to any of the styles set by CSS.

-Melissa

Want to stay up-to-date on new releases and development efforts?
Follow us on Twitter @sourcecoast and @mandreae

mel
Melissa
useravatar
Offline
3645 Posts
Website 
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.

Re: Themes - need to fix some issues

Hi Melissa,
thanks for your explanation, too appreciated. The CSS code you provided move on top the back tooltip ( the 2nd one ), but still  2 "Forgotten password?" tooltips are opened !!!
Now all on top.
That is happening also in the SCLogin page (clikc on the "SCLogin" menu on the top of the page)

You can test it on the same test site http://test.egulp.net

Administrator has disabled public posting. Please login or register in order to proceed.

Re: Themes - need to fix some issues

I see the double tooltip on your site.

The problem is that there is a tooltip coming from Bootstrap and there's a second tooltip coming from the title option on the anchor tag. I'll have to investigate how to best fix this in SCLogin, as not all sites use bootstrap, so I simply can't remove the second from the code. I'll add an issue to our tracker to address this in the next release. However, if you'd like a workaround in the meantime, you can edit /modules/mod_sclogin/helper.php. This change will take out the title for the input and just use the bootstrap tooltip

Around Line 526, replace this block of code

Code:

if ($registerType == "communitybuilder" && file_exists(JPATH_ADMINISTRATOR . '/components/com_comprofiler/plugin.foundation.php'))

{
   $forgotButton = '<a href="' . $forgotSharedLink . '" class="forgot btn width-auto hasTooltip" tabindex="-1" data-placement="right" data-original-title="' . $forgotSharedText . '"><i class="icon-question-sign' . $buttonImageColor . '" title="' . $forgotSharedText . '"></i></a>';
}
else
{
   $forgotButton = '<a href="' . $forgotButtonLink . '" class="forgot btn width-auto hasTooltip" tabindex="-1" data-placement="right" data-original-title="' . $forgotButtonText . '"><i class="icon-question-sign' . $buttonImageColor . '" title="' . $forgotButtonText . '"></i></a>';
}

with

Code:

if ($registerType == "communitybuilder" && file_exists(JPATH_ADMINISTRATOR . '/components/com_comprofiler/plugin.foundation.php'))

{
   $forgotButton = '<a href="' . $forgotSharedLink . '" class="forgot btn width-auto hasTooltip" tabindex="-1" data-placement="right" data-original-title="' . $forgotSharedText . '"><i class="icon-question-sign' . $buttonImageColor . '"></i></a>';
}
else
{
   $forgotButton = '<a href="' . $forgotButtonLink . '" class="forgot btn width-auto hasTooltip" tabindex="-1" data-placement="right" data-original-title="' . $forgotButtonText . '"><i class="icon-question-sign' . $buttonImageColor . '"></i></a>';
}

-Melissa

Want to stay up-to-date on new releases and development efforts?
Follow us on Twitter @sourcecoast and @mandreae

mel
Melissa
useravatar
Offline
3645 Posts
Website 
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.

Re: Themes - need to fix some issues

Hi Melissa,
thanks for that, I'll stay tuned to know how the issue will be fixed...

Administrator has disabled public posting. Please login or register in order to proceed.

Re: Themes - need to fix some issues

We're implementing a fix for the double tooltip in the next release (coming out soon). If you'd like to try to implement it now, please edit the /modules/mod_sclogin/helper.php file. Around Line 526 (the same code Melissa had you update before), replace this block of code

Code:

if ($registerType == "communitybuilder" && file_exists(JPATH_ADMINISTRATOR . '/components/com_comprofiler/plugin.foundation.php')) 

{
   $forgotButton = '<a href="' . $forgotSharedLink . '" class="forgot btn width-auto hasTooltip" tabindex="-1" data-placement="right" data-original-title="' . $forgotSharedText . '"><i class="icon-question-sign' . $buttonImageColor . '" title="' . $forgotSharedText . '"></i></a>';
}
else
{
   $forgotButton = '<a href="' . $forgotButtonLink . '" class="forgot btn width-auto hasTooltip" tabindex="-1" data-placement="right" data-original-title="' . $forgotButtonText . '"><i class="icon-question-sign' . $buttonImageColor . '" title="' . $forgotButtonText . '"></i></a>';
}

With:

Code:

Around Line 526, replace this block of code 


Code:
if ($registerType == "communitybuilder" && file_exists(JPATH_ADMINISTRATOR . '/components/com_comprofiler/plugin.foundation.php'))
{
   $forgotButton = '<a href="' . $forgotSharedLink . '" class="forgot btn width-auto hasTooltip" tabindex="-1" data-placement="right" title="' . $forgotSharedText . '"><i class="icon-question-sign' . $buttonImageColor . '></i></a>';
}
else
{
   $forgotButton = '<a href="' . $forgotButtonLink . '" class="forgot btn width-auto hasTooltip" tabindex="-1" data-placement="right" title="' . $forgotButtonText . '"><i class="icon-question-sign' . $buttonImageColor . '></i></a>';
}

That is removing the title tag from the <i> element and update the title name in the <a> tag from data-title-original to just title.

We'd love to hear your feedback if that works for you, but for us, it's doing what we expect.

Thanks,
Alex

If you use our extensions, please consider leaving a rating and review at the Joomla! Extension Directory:
JFBConnect | SCLogin

alzander
Alex
useravatar
Offline
24224 Posts
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.

Re: Themes - need to fix some issues

Hi Alex,
tested and I had back some issue. May be I made some mistakes.
So, Please, Can you send me the new helper.php file to replace it directly ?

Administrator has disabled public posting. Please login or register in order to proceed.

Re: Themes - need to fix some issues

I put up a new release of JFBConnect/SCLogin yesterday. The double tooltip change is in the release, so please test it out and let us know if you continue to have any issues.

-Melissa

Want to stay up-to-date on new releases and development efforts?
Follow us on Twitter @sourcecoast and @mandreae

mel
Melissa
useravatar
Offline
3645 Posts
Website 
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.

Re: Themes - need to fix some issues

Hi Melissa,
I have installed the new SCLogin 8.0.5 release and seem to run as expected.

You can test it on the same test site http://test.egulp.net

Administrator has disabled public posting. Please login or register in order to proceed.

Re: Themes - need to fix some issues

Thanks for letting us know. Looks good to me. Let us know if you run into any further issues.

-Melissa

Want to stay up-to-date on new releases and development efforts?
Follow us on Twitter @sourcecoast and @mandreae

mel
Melissa
useravatar
Offline
3645 Posts
Website 
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.
There are 0 guests also viewing this topic
There are 0 users also viewing this topic

Board Info

Board Stats
 
Total Topics:
11734
Total Polls:
0
Total Posts:
49260
Posts today:
4
User Info
 
Total Users:
48031
Newest User:
glewot
Members Online:
1
Guests Online:
1222

Online: 
Vaconi IT
Social Stream
Refer and Earn

Like our extensions? You're not alone! That's why they're used on tens of thousands of websites. Now you can earn 20% of any sale you refer to SourceCoast.com.

We provide excellent documentation, well laid out sales pages and great support. All you need to do is spread the word and we'll take care of the rest.

Learn About Our Affiliate Program