Log in | Register
  1. Forum
  3. Non-Commercial Extensions
  5. SCLogin Enhanced Login
  7. Themes - need to fix some issues

Topic-icon Themes - need to fix some issues

Active Subscriptions:

None
5 years 5 months ago #64847 by joomleb
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 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 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 www.sourcecoast.com/sclogin/documentation/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" www.quackit.com/bootstrap/bootstrap_4/tu.../bootstrap_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 ?
The topic has been locked.
Support Specialist
5 years 5 months ago #64853 by alzander
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:
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
The topic has been locked.
Active Subscriptions:

None
5 years 5 months ago #64856 by joomleb
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 ?!?
The topic has been locked.
Active Subscriptions:

None
5 years 4 months ago #64867 by joomleb
Hi Alex,
Please, Do you have any answer to my previous post ?
The topic has been locked.
Support Specialist
5 years 4 months ago #64887 by mel
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:
.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
.sclogin.sourcecoast .intro {
font-size:inherit;
padding: 0px;
}

2e. Remove space by removing margin below the form
.sclogin.sourcecoast form {
margin: 0px;
}
and by removing margin around those login button images
.sclogin .login img {
margin-top: 0px;
}

-Melissa
The topic has been locked.
Active Subscriptions:

None
5 years 4 months ago #64890 by joomleb
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 !
The topic has been locked.
Support Specialist
5 years 4 months ago #64902 by mel
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:
.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:
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:
<i class="icon-question-sign icon-white" title="¿Olvidó su contraseña?"></i>
The CSS to control this is:
.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
The topic has been locked.
Active Subscriptions:

None
5 years 4 months ago #64937 by joomleb
Hi Melissa, thanks,

1D - 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?
The topic has been locked.
Support Specialist
5 years 4 months ago #64947 by mel
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
.tooltip {
z-index: 10001 !important;
}

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

-Melissa
The topic has been locked.
Active Subscriptions:

None
5 years 4 months ago #64952 by joomleb
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 test.egulp.net
The topic has been locked.
  1. Forum
  3. Non-Commercial Extensions
  5. SCLogin Enhanced Login
  7. Themes - need to fix some issues
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS