Change SCLogin Enhanced appearance

1. Margins/paddings - Create a template override for the theme you're using in SCLogin. For more info on how to do the theme override, please see www.sourcecoast.com/sclogin/documentation/themes.

Add these blocks to the file:
Remove this block around line 88
Remove this block around line 26:
2. Button widths - Find the following block in your theme file and lower the width from 87% to around 60% (around line 76)
3. Change Username and/or e-mail login button label: This is done by updating the text in your mod_sclogin language files for the MOD_SCLOGIN_USERNAME key.

I think this should fix all the issues you mentioned, so let me know if you have any more questions.

-Melissa

The strange boxes are caused because your template has borders around the "login" class. You can add the following to the sclogin theme css to get rid of them for our module only:

As far as enlarging the elements
1) For the textboxes, I already provided an example how to change the widths in my previous post
2) For the login and register buttons, you can change the padding for the ".sourcecoast .btn" and ".sourcecoast .btn-primary" blocks
3) For the social network buttons, I recommend that you make larger images yourself. If you stretch them with CSS, they will probably be fuzzy. You can read how to do this here: www.sourcecoast.com/jfbconnect/docs/social-login/login-button
4) If there is extra whitespace, then you can edit your template files for the module position the SCLogin module is in. The SCLogin uses 100% width so it should be fluid if you condense it.

1) You say "For the textboxes, I already provided an example how to change the widths in my previous post". If in this case "textboxes" mean "input boxes" I think I did what I wanted.

Yes, this is what I meant.

2) You say "For the login and register buttons, you can change the padding for the ".sourcecoast .btn" and ".sourcecoast .btn-primary" blocks ". I want to change theur width. I am reaaly bad at CSS. In this case does padding means width ?

Well with CSS, there are multiple ways to do anything So you can accomplish what you want with width (explicitly setting the pixel amount) or setting the padding (the size inside of the buttons padding around the text. Try to add the following code to the CSS. I think it will be probably be the easiest for you to understand. The second block has to set the padding, otherwise the element would be cut off:

3) I will see it later but I want the module to be responsive so do I need to create the "largest" images I can and then set their width in % in order for them to be able to fit the creen width ?

I think you should create your images to be what you labeled in your last screenshot as "desired width for all elements". The template is currently smart enough to scale down our social network buttons, so it should scale down yours as well as the view shrinks.

4) You say "If there is extra whitespace, then you can edit your template files for the module position the SCLogin module is in. The SCLogin uses 100% width so it should be fluid if you condense it." I just do not get it.

I was confused at what you meant in your screenshot by "Delete this margin". Looking at your page, if you grow all of the elements in the SCLogin module to the "desired width of all of your elements" any extra whitespace or margin isn't being added by the SCLogin module since all of its elements would take up 100% of SCLogin's width. Any whitespace on the side of the module would be controlled by other elements in your template.

Password height:
Space between button and social network images
* Note some of those block definitions may exist already. So if they do, they I'd recommend combining these with those.
* Another tip, if using Chrome or Firefox, there are built-in Developer Tools that let you temporarily modify CSS on your site. I would suggest using them to play around with changing styles to test your changes immediately/easier.