Log-In Page centering

imbongm · Post by **imbongm** » Fri Nov 10, 2017 1:34 pm

Guys please help me how do i center the login page

arbei · Post by **arbei** » Sat Nov 11, 2017 11:36 am

You can add your style in [HTML] -> [Styles] -> [User] to change the style of the input elements.

kirondedshem · Post by **kirondedshem** » Tue Nov 14, 2017 6:09 pm

What am using currenlty Is jquery as I feel it give me more controll like moving some controll into some divs, adding specific classes to only specific controlls adding html elements into other divs etc etc.
For example, here Ive tried to customise login page to look like the one in admin LTE template.
The trick is to inspect the element you want to change and then see what classes or styles you need to add to it to look like you want.
Put this code in client scripts->others->login page->startup scripts.

// Write your startup script here
// document.write("page loaded");

//put the envelope icon next to username
$("#username").parent().addClass("input-group");
$("#username").parent().append('');

//add the key icon next to the password filed
$("#password").parent().addClass("input-group");
$("#password").parent().append('');

//make the submit button span the whole area
$("#btnsubmit").addClass("btn-block");

//add a header for the box.
//put a logo above the login page
var header = '<div class="login-logo"><img src="uploads/compnay_logo/pic.png" style="height:130px;max-width:350px;"/></div>';
$('[class="login-box ewLoginBox"]').prepend(header);

//enclose the whole login form in a panel like border
$('[class="login-box ewLoginBox"]').addClass("panel panel-success");

andyrav · Post by **andyrav** » Thu Nov 16, 2017 10:01 pm

Hi
The login screen is not very nice when logging in from a mobile device using these settings.
Also could you add centring the recaptcha and Forgot password etc.
Might be nice to have Login centred and in a bigger text.

but over all i like. :-)

kirondedshem · Post by **kirondedshem** » Thu Nov 16, 2017 11:06 pm

Might be nice to have Login centred and in a bigger text.
to answer you initial question. I checked the admin LTE login page and saw that only adding this class to the form does the centering trick so add this line
//cetner the login box
$("#flogin").attr("class","register-box");

andyrav · Post by **andyrav** » Fri Nov 17, 2017 4:46 am

Thanks
Any way to make it nicer when logging via mobile device

kirondedshem · Post by **kirondedshem** » Fri Nov 17, 2017 1:31 pm

I dont really understand what you mean, coz by default all phpmaker generated pages are mobile freindly ie they adjust accordingly.

What else ive done is Ive disabled header and footer on login page and I see that my login page is always centered irrespective of what screen its on mobile or desktop. that way I dont have to see the navbar or menu, Ive also hidden the breadcrumb as well so only login panel is visible now.

Any way to make it nicer when logging via mobile device
What do you mean exactly

andyrav · Post by **andyrav** » Fri Nov 17, 2017 10:36 pm

how did you disable the header and footer on login page?

andyrav · Post by **andyrav** » Sat Nov 18, 2017 12:35 am

Hi
The page still does not look correct when on your mobile it is to big and not centred.

kirondedshem · Post by **kirondedshem** » Sat Nov 18, 2017 12:57 am

how did you disable the header and footer on login page?
when you press generate and you see a list of tables, views and custom file.
To select the tables you want to renegerate files for you normally tick in column called "Output".
Now to disable the header or footer fro appearing on given page you tick in the "No header / footer " column.

SO during generate-> scroll down and expand the "other files" section -> below it look for login.php->tick no header/footer, then regenerate.

Ensure you have put this line as well.
//cetner the login box
$("#flogin").attr("class","register-box");

Try to put all the styles ive indicated into the demo project's login page and see if it still show the same

andyrav · Post by **andyrav** » Mon Nov 20, 2017 11:40 pm

Are many thanks
are you able to add the following

Center and make the text Login bigger
Center Remember me link
Centre Forgot Password and Register Link
make reCapture whole area
make the login box in the middle of the page

many thanks

kirondedshem · Post by **kirondedshem** » Tue Nov 21, 2017 12:45 am

We all have different user interace requirements, so you will have to inspect the html of the items you want to change, add classes to them to see if they do what you want, add specific styles to them etc etc untill you get disired result and then write a jqurey to add that class or that style tat you feel you need to add to all those elements.
For example
make the login box in the middle of the page
Center Remember me link
Centre Forgot Password and Register Link

If you inspects these elements the div that contains them, you can add class text-center to center everything inside it, something like
$(".login-box-body").addClass("text-center");

make the login box in the middle of the page
If you have put all the styles Ive been giving you so far, as well as disabling header and footer, your login form should be centered both on desktop and mobile.

To show that it works.

open the online demo phpmaker 2018 site->go to login page->click inspect and open console log
2.COPYING all the styles in this post one by one and paste in the console log.
If you've pasted them correctly the login pbox should be centred as well.

HINT: Download the admin LTE template, go through thier template to see hoe they use multiple classes, Use the above hints to look for all possible combinations of classes ans styles to make your page as you want.

sangnandar · Post by **sangnandar** » Fri Aug 10, 2018 5:33 pm

Hi there,

How to centering the #flogin vertically?

kirondedshem wrote:
//cetner the login box
$("#flogin").attr("class","register-box");

This line adds margin:7% auto; into #flogin
margin: auto;
does make #flogin center horizontally, but
margin: 7% ;
doesn't make it center vertically.

Thanks.

andyrav · Post by **andyrav** » Wed Aug 14, 2019 1:50 am

can someone update for 2020 please
thanks

arbei · Post by **arbei** » Wed Aug 14, 2019 4:49 pm

I use Chrome (F12 > toggle device) to test the mobile mode and I see the login box is at the middle and responsive in mobile mode. What problem did you see?

andyrav · Post by **andyrav** » Wed Aug 14, 2019 6:38 pm

Hi
How would you go about centering the Login, Forgotten Password and register button within the login box

many thanks

arbei · Post by **arbei** » Thu Aug 15, 2019 9:07 am

You may simply add a class to the card body (see https://getbootstrap.com/docs/4.1/utili ... -alignment) or you may add your CSS under the HTML > Styles > User tab.