Topic-icon [9.0.244 Issues] Login / Register Buttons

Active Subscriptions:

None
1 year 3 months ago - 1 year 3 months ago #68412 by joomleb
Hi guys, 
PHP 7.4.33 + Joomla 3.10.11 > 4.2.6 + Helix Ultimate 2.0.11 (Bootstrap 5) + JFBConnect 9.0.215 - SCLogin Module:

- Styles > Login Button CSS Class: btn.login
- Styles > Register Button CSS Class: btn-sistema

While on Joomla 3 they are shown as expected, here in a test site (open the Left Offcanvas position): test2.egulp.net/
On Joomla 4 something is conflicting and they are shown only on hovering, here in a test site (again, open the Left Offcanvas position): develop.egulp.net/
 have to add the "!important" to the colors to have them running.

I don't understand. Please, Can you help me ? What is it that conflicts and prevents the button color from being shown?
Does it depend on SCLogin ?
Maybe it can be solved differently (instead of using "!important") ?
Last edit: 1 year 3 months ago by joomleb.
The topic has been locked.
Active Subscriptions:

None
1 year 2 months ago #68476 by joomleb
Hi guys, 
(Joomla 4.2.7) Please, Do you have any suggestion here ?
The topic has been locked.
Support Specialist
1 year 2 months ago #68477 by mel
I'm sorry I missed your original post. The background-color of the .btn class has a transparent value in the default bootstrap css that comes with SCLogin.

There's a style that looks to be in your index.php for
.btn-login {
  color: #fff !important;
  background-color: #17a2b8;
  border-color: #17a2b8;
}
Try putting the !important flag on background-color there and also for the .btn-sistema block as well.

-Melissa
The topic has been locked.
Active Subscriptions:

None
1 year 2 months ago #68478 by joomleb
Hi Mel, 
Thank You for your reply. Yes, I confirm you that, as I wrote in my previous post, to add the !important (be careful) to the background-color / border-color:

.btn-login {
color: #fff;
background-color: #17a2b8!important;
border-color: #17a2b8!important;
}

could temporally solve the issue. But the question here is another: the issue should not be created. I mean, Do you think that "...The background-color of the .btn class has a transparent value in the default bootstrap css that comes with SCLogin..." is the right way ?
SCLogin by deafult should not define any "background-color" and "border-color" because now SCLogin is working with settings:
- Styles > Login Button CSS Class: btn.login
- Styles > Register Button CSS Class: btn-sistema

Do you agree ?
The topic has been locked.
Support Specialist
1 year 2 months ago - 1 year 2 months ago #68492 by mel
The sc_bootstrap5.css is taken from the official Bootstrap v5.0.2 css file. You can find a link in documentation to this css . We namespace the css with the .ns-bs5 class to not conflict with other extensions. The solution we could take is to update our SCLogin default theme to not have a transparent background/border, but we won't be changing the sc_bootstrap5.css file. Any themes you've created should be updated for this and I can make the change in the packaged default css for the next release.
.sclogin.ns-bs5 .btn {
opacity: 1;
}

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

None
1 year 1 month ago #68501 by joomleb
Hi Mel, 
A - Maybe for your upcoming JFBC would be useful an update to Bootstrap 5.2 github.com/joomla/joomla-cms/pull/39379
B - Into the file link you added I cannot find the btn "background-color" and "border-color"
C - So, I'm not sure I understood your suggestion (I tested your suggestion code without success)

Please, be patient with me, Can you repeat the instructions for me in details ?
The topic has been locked.
Support Specialist
1 year 1 month ago #68506 by alzander
A) The 5.2 update is planned for Joomla 4.3, not out yet. While we will update at some point, we won't get in front of Joomla. Additionally, unless there's a direct conflict or bug we're made aware of, we won't update immediately due to the amount of testing and knock-on issues that can be caused from updates.

B) If you look at this file and search for .btn, it will be around the 10th result:
cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css

C) I'm not sure what Melissa was going for above either. Generally, .btn styles should have a 'type' also used, like primary, warning, danger, etc.. like:
<input class="btn btn-primary">...</input>
The .btn class *is* transparent and the btn-primary sets the color.

The btn-login is what we use to set that color. However, on your site, your template seems to be inlining (including in the HTML) the btn-login colors. I think there's an issue with the order of the bootstrap.css file and that inline code which is causing the btn-login colors to be ignored unless they are set to important.

I hope that helps explain some more.

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

None
1 year 1 month ago - 1 year 1 month ago #68508 by joomleb
Hi Alex, 
sure, I wrote "... Maybe for your upcoming JFBC..." and because the Joomla 4.3.0 beta 4 is out... just it.
And, to simply add !important to the color definitions would force us to add the same to the hover and active colors. Really not a good solution.

1 - "...The btn-login is what we use to set that color..." - Are you referring to my settings OR Are you speaking about you ?
I'm asking because I'm using these settings for the module:
- Styles > Login Button CSS Class: btn-login
- Styles > Register Button CSS Class: btn-sistema

2 - "...However, on your site, your template seems to be inlining (including in the HTML) the btn-login colors...
I'm defining the btn-login and btn-sistema colors through the Custom CSS feature of the Helix Ultimate 2.0.12 template.
As far as I understand Helix Ultimate is calling the Custom CSS file after Bootstrap (I add the index file here), but maybe something is not going as expected... 

"...I think there's an issue with the order of the bootstrap.css file and that inline code which is causing the btn-login colors to be ignored unless they are set to important..." = Please, Do you think there is anythng I can do to better define tha order bootstrap.css  cstom.css files order ?
Attachments:
Last edit: 1 year 1 month ago by joomleb.
The topic has been locked.
Support Specialist
6 months 2 weeks ago #68633 by mel
I need to do some updating of JFBConnect/SCLogin to the 5.2 version of Bootstrap. Can you verify which of these issues you're still having?

-Melissa
The topic has been locked.
Active Subscriptions:

None
6 months 2 weeks ago - 6 months 2 weeks ago #68641 by joomleb
Hi Mel, 
Yes, I can confirm the entire issue discussion is still valid, with
PHP 7.4.33 / 8.1.32 + Joomla 4.3.4 + Helix Ultimate 2.0.12 (Bootstrap 5) + JFBConnect 9.0.244 - SCLogin Module
test1.egulp.net

Please, re read carefully this discussion and pay attention to:

www.sourcecoast.com/forums/jfbconnect-9-...l-bootstrap-conflict
www.sourcecoast.com/forums/jfbconnect-9-...bootstrap-conflict-2

The issues could have the same "concept origin"
Last edit: 6 months 2 weeks ago by joomleb.
The topic has been locked.