Topic-icon [9.0.244 Issues] Login / Register Buttons

Support Specialist
6 months 2 days ago - 6 months 2 days ago #68749 by mel
So instead of worrying about ordering of which css files are applied to the page, I have a different solution. The styles that you've added to the custom CSS section of the page should be more targeted.

Instead of having a selector of .btn-sistema, you should use .btn.btn-sistema (and likewise .btn-login should be .btn.btn-login). The style for your custom css is loaded. Then when bootstrap css are applied for .btn class, the background color (or whatever you've defined in the custom section) is ignored because you have a more specific selector.

I installed your template on my test site to reproduce this and changed the selectors like above and took off the !important. The proper colors were applied.

-Melissa
Last edit: 6 months 2 days ago by mel.
The topic has been locked.
Active Subscriptions:

None
6 months 2 days ago #68751 by joomleb
Hi Mel,
for me it is NOT running.
I re tested on PHP 7.4.33 + Joomla 4.4.0 + Helix Ultimate 2.0.12 (a 2.0.16 version is out but as far as I see in its changelog there is no news for this issue) + JFBConnect 9.0.244 (Did you used the 9.1.31 beta for tenting?)

Custom CSS is:
.btn-sistema {
  color: #fff;
  background-color: #ce1126;
  border-color: #ce1126;
}
.btn-sistema:hover {
  background-color: #e8132a;
  border-color: #db1228;
}
.btn-sistema:active {
  background-color: #eb182f;
  border-color: #db1228;
}
.btn-login {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}
.btn-login:hover {
  background-color: #138496;
  border-color: #117a8b;
}
.btn-login:active {
  background-color: #117a8b;
  border-color: #10707f;
}

I set:
SCLogin module > Style > Login Button CSS Class: btn-login
SCLogin module > Style > Register Button CSS Class: btn btn-sistema

One per type, so you can see that nothing change from the two versions. You can test it here: 
test1.egulp.net/login
test1.egulp.net/registracion
where the SCLogin is in the left Offcanvas position...

As you can see none of the buttons colours are applied into the SCLogin, while they are working as expected in the pages...

Please, What am I missing ?!?
The topic has been locked.
Support Specialist
6 months 1 day ago #68754 by mel
You need to change your styles
.btn.btn-sistema {
  color: #fff;
  background-color: #ce1126;
  border-color: #ce1126;
}
.btn.btn-sistema:hover {
  background-color: #e8132a;
  border-color: #db1228;
}
.btn.btn-sistema:active {
  background-color: #eb182f;
  border-color: #db1228;
}
.btn.btn-login {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}
.btn.btn-login:hover {
  background-color: #138496;
  border-color: #117a8b;
}
.btn.btn-login:active {
  background-color: #117a8b;
  border-color: #10707f;
}
The topic has been locked.
Active Subscriptions:

None
6 months 1 day ago #68755 by joomleb
Hi Mel,
I modified the Custom CSS as you suggested and I left both options in the SCLogin settings:SCLogin module > Style > Login Button CSS Class: btn-loginSCLogin module > Style > Register Button CSS Class: btn btn-sistema

But as you can see, by clicking on Buttons into SCLogin there are a lot of things not applied as defined in the code.
Now, also the Register / Login pages Button's are affected, the text color, when clicking on the buttos, switchs from white to black.

I don't think it is an ordering issue.
I set:
 - Load jQuery/Bootstrap: No
 - Load Bootstrap CSS: None
"Old" settings you have added because of the confusion made by Joomla 2/3 etc.
Anyway now, Joomla 4.4 & 5, the Job to load Bootstrap is a job that has to be made by standard Joomla (not by JFBC) and, in case, from the Template (again, not by JFBC)

So, "my question is":
Are you sure that SCLogin is following the JFBC settings and it is not loading any Bootstrap internal definitions that are "crashing" the Joomla > Template Bootstrap ones ?!?
The topic has been locked.
Support Specialist
5 months 3 weeks ago #68765 by mel
So instead of changing your styles to from .btn-login to .btn.btn-login, can you just add them like the following so we don't remove the styles like you're seeing? Then we'll go from there.
.btn-sistema,
.btn.btn-sistema {
  color: #fff;
  background-color: #ce1126;
  border-color: #ce1126;
}
.btn-sistema:hover,
.btn.btn-sistema:hover {
  background-color: #e8132a;
  border-color: #db1228;
}
.btn-sistema:active
.btn.btn-sistema:active {
  background-color: #eb182f;
  border-color: #db1228;
}
.btn-login,
.btn.btn-login {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}
.btn-login:hover,
.btn.btn-login:hover {
  background-color: #138496;
  border-color: #117a8b;
}
.btn-login:active,
.btn.btn-login:active {
  background-color: #117a8b;
  border-color: #10707f;
}
The topic has been locked.
Active Subscriptions:

None
5 months 3 weeks ago #68771 by joomleb
Hi Mel,Okay, so, JFBConnetc 9.1.31 beta, I modified the Custom CSS as you suggested and I left both options in the SCLogin settings:
- SCLogin module > Style > Login Button CSS Class: btn-login
- SCLogin module > Style > Register Button CSS Class: btn btn-sistema But as you can see through the links above, by clicking on Buttons into SCLogin there are a lot of things not applied as defined in the code.And again, also the Register / Login pages Button's are affected...

I remain available...
The topic has been locked.
Support Specialist
5 months 3 weeks ago #68777 by mel

by clicking on Buttons into SCLogin there are a lot of things not applied as defined in the code.And again, also the Register / Login pages Button's are affected...

Both of these statements are very vague.

For missing styles for the sclogin buttons, the two obvious things I see are the link color on the Registration button because it's getting the color from the offcanvas of your template and you missed adding a style to the hover of the Login button. If that's correct with below css, the buttons match what's in your login page (test1.egulp.net/login) and your register page (test1.egulp.net/registracion).
.btn-login:hover, .btn.btn-login:hover {
color: #FFF;
}
.offcanvas-menu .offcanvas-inner a.btn {
    color: #FFF;
}

Regardless, this is getting very off course on the support that we provide for JFBConnect. We can provide basic CSS suggestions if there are large conflicts with templates, but we are not (and can’t be) responsible for customizing the module to work with every template. We have worked to make sure the SCLogin module works with the default templates included by Joomla, but if you need customizations for your own template, we’d have to recommend you contact your template provider or in-house designer.
The topic has been locked.
Active Subscriptions:

None
5 months 3 weeks ago - 5 months 3 weeks ago #68779 by joomleb
Hi Mel,

"...Both of these statements are very vague..." = Because "...You can test it here...", I thought that to set up a test site for you where to click and see was much better than a lot of words (considering my English). I'm sorry if this offended you.

"...this is getting very off course on the support that we provide..." ... "...if you need customizations for your own template..." = I'm sorry you're seeing this report from that perspective, sure it wasn't, isn't, my intention. Please, forgive me for the misunderstanding.

My goal here is to understand why the SCLogin buttons definitions need the !important to run well. From my point of view something is not running as expected.
Thinking it was a simple issue I began to investigate from JFBC.
Now, before to go on following your suggestion (thank you) I would love it if you could answer my question above:

"...I don't think it is an ordering issue. I set: - Load jQuery/Bootstrap: No - Load Bootstrap CSS: None"Old" settings you have added because of the confusion made by Joomla 2/3 etc.Anyway now, Joomla 4.4 & 5, the Job to load Bootstrap is a job that has to be made by standard Joomla (not by JFBC) and, in case, from the Template (again, not by JFBC) So, "my question is":Are you sure that SCLogin is following the JFBC settings and it is not loading any Bootstrap internal definitions that are "crashing" the Joomla > Template Bootstrap ones ?!?..."
Please, Can you ?
Last edit: 5 months 3 weeks ago by joomleb.
The topic has been locked.