Help with SCLogin CSS Styling for "Forgot Username and/or Password"

Hi there!

This is my site: www.instituteofmanagement.org/ and in the Modal popup SCLogin Form I am using some customized CSS for default view, but the problem I am having is displaying Forgot Username and Forgot Password as buttons besides Username and Password as in your example (it is displaying both lines below the buttons).

In fact even if I change the Theme to Sourcecoast, I get the same thing, which is not very nice ...

The code in my default.css regarding Vertical Layout is:

---

/* Vertical Layout */

.sclogin-joomla-login.vertical input#sclogin-username.input-block-level,
.sclogin-joomla-login.vertical input#sclogin-passwd.input-block-level {
width: 87% !important;
height: 20px !important;
}

.sclogin-joomla-login.vertical a.forgot.btn {
width: 13% !important;
margin-bottom: 0px;
}

.sclogin-joomla-login.vertical input#sclogin-username.input-append,
.sclogin-joomla-login.vertical input#sclogin-passwd.input-append {
width: 100%;
}

.sclogin-joomla-login.vertical #form-sclogin-submitcreate .btn {
margin-top: 5px !important;
}

---

How can I fix that to make it look nice (with the little grey icons to the right from username and password)?

And may I add another question:
Is it possible to add some text below the Login/Register buttons and above the Social Media buttons? To say something like: Fast Login/Register using Social Media:

Thanks for your help. It's true that I had Text Link instead of the button there ... that fixed it.

Thanks also for the info about the text description ... will work on that later.

It worked and now I have the Intro text before the Social Media buttons.
Thanks again for your help Melissa!

Maybe just a couple more question Mel:

1. Do you possibly know why sometimes I have to clear Cache in order to display customized CSS correctly? I customized the default.css ad placed it into my Helix3 template folder (according to instructions) and it worked fine, but then sometimes it showed old default.css ... So, I updated the original default.css file in media folder as well, hoping that would not happen, but it still does until I clear the Cache and then it displays fine. Any ideas?

2. I also noticed that when the Log In link for the modal SCLogin form shows regular (the original unformated default.css file) then the menu on the page works normal, but when my customized default.css is loaded, then the main menu shifts a little bit when menu items are clicked (top-level items get shifted down and to the left, while submenu items get shifted down and to the right for a pixel or so). Do you have any idea why this might be happening?

I am using Helix3 Framework on the website.

One more thing: sometimes when I open the website, I am automatically logged in (through Facebook) ... I do not click on Log In, I just see that I have user menu including Logout (instead of Log In link) and then I realize that I am already logged in even though I did not go through Log-in step. Why is that?

I just noticed another strange thing regarding CSS formatting ... You see I would like to have custom CSS formatting for the "Log In" Modal Link at the top of page, but use the regular default CSS formatting for the form I have on some pages in the right-hand column (see it here: www.instituteofmanagement.org/freebies). Now, even though I now copied back the original default.css file to the media folder and chose it for this login module, it still shows whatever formatting I choose for the top Log in link (Modal Popup Login Form). So, is there even a way to have different CSS formatting on different login forms (2 different positions)?

I managed to solve one issue: the shifting menu by removing ".sclogin-modal-links a:active" from my custom CSS.
Other issues are still there ...

Hi Alex!

The Facebook Login is now fixed. Thanks for that!
The Caching ... I am using default Joomla setting for that (Conservative Caching, 15 min cache time). I will try to disable it to see the difference ...

As for CSS Themes ... that's what I thought, so I created my own theme according to instructions and placed it in the template folder (as explained). I activated this custom CSS theme for the top Modal Popup Form and it works fine ... but my other form, which is in right-hand module position (column) on some pages, shows same formatting no matter what theme I choose (would like to have default theme). If I change theme for the top menu modal login from, then the CSS formatting changes for the other one as well no matter which theme I have selected there. That's why it's strange to me.

So, please let me know if you find any solution for that.
Otherwise it's great extension once it's setup correctly!

Regards, Danijel