Page 1 of 1

Log-In Page centering

Posted: Fri Nov 10, 2017 1:34 pm
by imbongm

Guys please help me how do i center the login page


Re: Log-In Page centering

Posted: Sat Nov 11, 2017 11:36 am
by arbei

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


Re: Log-In Page centering

Posted: Tue Nov 14, 2017 6:09 pm
by kirondedshem

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('<span class="input-group-addon"><i class="fa fa-envelope"></i></span>');

//add the key icon next to the password filed
$("#password").parent().addClass("input-group");
$("#password").parent().append('<span class="input-group-addon"><i class="fa fa-key"></i></span>');

//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"><span class="logo-lg"><img src="uploads/compnay_logo/pic.png" style="height:130px;max-width:350px;"/></span></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");


Re: Log-In Page centering

Posted: Thu Nov 16, 2017 10:01 pm
by andyrav

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. :-)


Re: Log-In Page centering

Posted: Thu Nov 16, 2017 11:06 pm
by kirondedshem

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");


Re: Log-In Page centering

Posted: Fri Nov 17, 2017 4:46 am
by andyrav

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


Re: Log-In Page centering

Posted: Fri Nov 17, 2017 1:31 pm
by kirondedshem

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


Re: Log-In Page centering

Posted: Fri Nov 17, 2017 10:36 pm
by andyrav

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


Re: Log-In Page centering

Posted: Sat Nov 18, 2017 12:35 am
by andyrav

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


Re: Log-In Page centering

Posted: Sat Nov 18, 2017 12:57 am
by kirondedshem

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


Re: Log-In Page centering

Posted: Mon Nov 20, 2017 11:40 pm
by andyrav

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


Re: Log-In Page centering

Posted: Tue Nov 21, 2017 12:45 am
by kirondedshem

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.

  1. 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.
  2. 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.


Re: Log-In Page centering

Posted: Fri Aug 10, 2018 5:33 pm
by sangnandar

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.


Re: Log-In Page centering

Posted: Wed Aug 14, 2019 1:50 am
by andyrav

can someone update for 2020 please
thanks


Re: Log-In Page centering

Posted: Wed Aug 14, 2019 4:49 pm
by arbei

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?


Center Login, Forgotten Password and register button

Posted: Wed Aug 14, 2019 6:38 pm
by andyrav

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

many thanks


Re: Log-In Page centering

Posted: Thu Aug 15, 2019 9:07 am
by arbei

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.