Log in | Register
  1. Forum
  3. Non-Commercial Extensions
  5. SCLogin Enhanced Login
  7. Modal Login Popup - How to change length of input fields (Horizontal)

Topic-icon Modal Login Popup - How to change length of input fields (Horizontal)

Active Subscriptions:

None
2 years 4 months ago - 2 years 4 months ago #67688 by davidunwin
We have just started using SC Login. Everthing is fine. We have created our own CSS Theme from the Sourcecoast them provided.
It works well, but I would like to improve the look and feel of the Modal.
If I set VERTICAL mode, There is always a scroll bar to the right.
If I set HORIZONTAL mode. The space for the username/email and password is quite small even though there is space to the right.
The screen shots show the 2 modes.
My question is 1) How can I get rid of the scrolling in VERTICAL mode or how can increase the size of the input fields in HORIZONRTAL Mode? I can't see where the CSS is stored for these fields.


Thanks in advance....David
  
Attachments:
Last edit: 2 years 4 months ago by davidunwin.
The topic has been locked.
Support Specialist
2 years 4 months ago #67690 by alzander
David,
I'm glad you're enjoying the SCLogin module so far. As for the graphical issues above, we'd be more than happy to help. However, can you please send us a URL where we can see the issues? Every template is different, so it's extremely difficult to give generic CSS answers just from the screenshots alone.

Once we have a link, we should be able to help provide some code to apply to make things work. Please have the SCLogin module configured in the orientation (horizontal or vertical) mode that you'd prefer and we'll do what we can.

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

None
2 years 4 months ago #67691 by davidunwin
Hi Alex,
Thanks for coming back to me so quickly, really appreciate your help on this.
I have set SCLOGIN as HORIZONTAL
To see it working go to cirenopenair.org.uk/ and click on the LOGIN button

  
Attachments:
The topic has been locked.
Support Specialist
2 years 4 months ago #67692 by alzander
Try these styles, which I think should get you a lot closer to what you're looking for:
.sclogin input.input-small {
   width: 130px;
}

.sclogin.ns-bs2 .showpasswd.btn, .sclogin.ns-bs2 a.forgot.btn {
   height: 44px;
   line-height: 44px;
}

The last style for the forgot button is already in the template file, so update those values if you can. Right now, JCH Optimize is putting all the styles directly into the HTML, so it's not possible to point you to exactly which line to make that change at.

Keep us posted on how that goes and let us know if you need anything else.

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

None
2 years 4 months ago #67693 by davidunwin
Hi Alex,
I think I may have out the code in the wrong place as your changes did not work on the modal?? I entered it my own theme css (see screen shots).
Should I put it in my own template CSS Instead?
 
 
 
Attachments:
The topic has been locked.
Support Specialist
2 years 4 months ago #67698 by alzander
I just visited your page and see the changes in there now. If you update the site's CSS, make sure you clear any caches on the server (like JCH Optimize, Joomla, and possibly your template's cache) as well as doing a hard refresh in your browser (ctrl-R or cmd-R).

Either way, I think it looks great, but if you have any other questions or need something from us, please let me know!

Thanks,
Alex
The following user(s) said Thank You: davidunwin
The topic has been locked.
Active Subscriptions:

None
2 years 4 months ago #67700 by davidunwin
Hi Alex,
Yes I can see the changes now. As you say I should have cleared all the cache files.
Thanks again
Kind regards
David
The topic has been locked.
  1. Forum
  3. Non-Commercial Extensions
  5. SCLogin Enhanced Login
  7. Modal Login Popup - How to change length of input fields (Horizontal)
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS