Center login box

Discussions related to customizing hooks. Hooks are documented at http://bigprof.com/appgini/help/advanced-topics/hooks/
Post Reply
Moh Youba
Veteran Member
Posts: 228
Joined: 2017-03-12 09:31

Center login box

Post by Moh Youba » 2019-07-23 14:23

Hello

How to center the login box
login.jpg
login.jpg (32.3 KiB) Viewed 3789 times
Thank you

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Center login box

Post by jsetzer » 2019-07-23 14:49

You can use jquery to...
  1. remove $j("#login_splash")
  2. add class "col-sm-offset-3" to $j(".container > .row > .col-sm-6")
  3. add class "col-lg-offset-4" to $j(".container > .row > .col-lg-4")
That should do the trick.

For example add the following code to hooks/header-extras.php:

Code: Select all

<script>
    $j(function() {
        if ($j("#login_splash").length) {
            $j("#login_splash").remove();
            $j(".container > .row > .col-sm-6").addClass("col-sm-offset-3");
            $j(".container > .row > .col-lg-4").addClass("col-lg-offset-4");
        }
    });
</script>
Is this what you need?

chrome_2019-07-23_16-48-14.png
chrome_2019-07-23_16-48-14.png (19.09 KiB) Viewed 3787 times

Regards,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

Moh Youba
Veteran Member
Posts: 228
Joined: 2017-03-12 09:31

Re: Center login box

Post by Moh Youba » 2019-07-24 11:29

Hi Jan
Once again thank you for your great support, it is exactly what I want.
Best regards,

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

SOLVED: Center login box

Post by jsetzer » 2019-07-24 11:30

Great, glad to hear!

Best Regards,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

Moh Youba
Veteran Member
Posts: 228
Joined: 2017-03-12 09:31

Re: Center login box

Post by Moh Youba » 2019-07-24 19:11

login_page.jpg
login_page.jpg (120.39 KiB) Viewed 3746 times
working fine
Thanks !

User avatar
baudwalker
Veteran Member
Posts: 188
Joined: 2015-02-03 08:08
Location: Bellingen NSW Australia

Re: Center login box

Post by baudwalker » 2019-07-25 00:23

Great job Jan,
One thing is the menu I set up according to Ahmed's online course (see top image) is now pushed below the login (see bottom image)

Barry
Attachments
login screen.PNG
login screen.PNG (198.46 KiB) Viewed 3735 times

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: Center login box

Post by onoehring » 2019-07-25 06:53

Hi baudwalker,

maybe this works when added after your additional text:

Code: Select all

<div style="clear:both;"></div>
I tried myself - this does not seem to work, but I am currious how it can be done.

PS: in Ahmeds video he is using appendTo in the jquery. I tried with prependTo - without the result we hope for.

Olaf

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: Center login box

Post by onoehring » 2019-07-25 07:15

Hi

I have a solution:
in Ahmends code make this change (prepend and new ID as well) (oh, my extra headline text has the ID info instead of the one in Ahmeds video):

Code: Select all

	<script>
		$j(function(){
			$j('#info').prependTo('#introtxt');			
		})
	</script>
change the code from jsetzer (above) to (2 new lines with new ID)

Code: Select all

<script>
    $j(function() {
        if ($j("#login_splash").length) {
            $j("#login_splash").remove();
            $j(".container > .row > .col-sm-6").addClass("col-sm-offset-3");
            $j(".container > .row > .col-lg-4").addClass("col-lg-offset-4");
			
			$j(".container > .row > .col-sm-6").attr('id', 'introtxt');
			$j(".container > .row > .col-lg-4").attr('id', 'introtxt');
        }
    });
</script>
At this time it looks like - but how can the headline text be wider now?
ec71.png
ec71.png (70.85 KiB) Viewed 3722 times


Olaf

User avatar
baudwalker
Veteran Member
Posts: 188
Joined: 2015-02-03 08:08
Location: Bellingen NSW Australia

Re: Center login box

Post by baudwalker » 2019-07-25 08:16

still working on the problem :(

User avatar
baudwalker
Veteran Member
Posts: 188
Joined: 2015-02-03 08:08
Location: Bellingen NSW Australia

Re: Center login box

Post by baudwalker » 2019-07-25 08:36

Thank you Olaf it works well... and thank you also Jan

Barry

Post Reply