Log-In Page centering
Guys please help me how do i center the login page
Guys please help me how do i center the login page
You can add your style in [HTML] -> [Styles] -> [User] to change the style of the input elements.
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");
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. :-)
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");
Thanks
Any way to make it nicer when logging via mobile device
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
how did you disable the header and footer on login page?
Hi
The page still does not look correct when on your mobile it is to big and not centred.
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
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
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.
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.
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.
can someone update for 2020 please
thanks
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?
Hi
How would you go about centering the Login, Forgotten Password and register button within the login box
many thanks
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.