Login page - reverse order of Email form and Social buttons

[JTrollerb123]

Hi,

I've been trying to reverse the order of the email login elements and the social network login buttons ...  In this template ... "Core --> Front --> System --> Login" but no luck.  Instead of the default view, I'd like to have the social media buttons on the left and the email login form on the right.  Screenshot below.  Can someone help with the code?  Thank you!!

{{if !\IPS\Request::i()->isAjax()}}
	<div class=''>
		<br>
		<h1 class='ipsType_reset ipsType_veryLarge ipsType_center'>{lang='sign_in_short'}</h1>
		{{if \IPS\Settings::i()->allow_reg}}
			<p class='ipsType_large ipsType_center ipsType_light'>{lang="dont_have_an_account"} <a href='{url="app=core&module=system&controller=register" seoTemplate="register"}'>{lang="sign_up"}</a>.</p>
		{{endif}}
		<br>
{{endif}}

	<div class='ipsColumns ipsColumns_collapsePhone'>
		<div class='ipsColumn ipsColumn_fluid ipsBox'>
			<div class='ipsPad'>
				{{if $error !== NULL}}
					{template="message" group="global" location="global" params="$error, 'error'"}
					<br>
				{{endif}}
				{{foreach $forms as $k => $form}}
					{{if $k === '_standard'}}
						{$form|raw}
					{{endif}}
				{{endforeach}}
			</div>
		</div>
		{{if count ( $forms ) > 1}}
			<div class='ipsColumn ipsColumn_veryWide ipsBox'>
				<div class='ipsPad'>
					<h2 class='ipsType_sectionHead'>{lang='sign_in_faster'}</h2>
					{{if count ( $forms ) > 2}}
						<p class='ipsType_normal ipsType_reset ipsType_light'>{lang='sign_in_connect'}</p>
					{{endif}}
					<br>
					{{foreach $forms as $k => $form}}
						{{if $k !== '_standard'}}
							<div class='ipsPad_half'>{$form|raw}</div>
						{{endif}}
					{{endforeach}}
				</div>
			</div>
		{{endif}}
	</div>
	
{{if !\IPS\Request::i()->isAjax()}}
</div>
{{endif}}

 

[newbie LAC]

Hello,

Email, password etc 

		<div class='ipsColumn ipsColumn_fluid ipsBox'>
			<div class='ipsPad'>
				{{if $error !== NULL}}
					{template="message" group="global" location="global" params="$error, 'error'"}
					<br>
				{{endif}}
				{{foreach $forms as $k => $form}}
					{{if $k === '_standard'}}
						{$form|raw}
					{{endif}}
				{{endforeach}}
			</div>
		</div>

Social buttons

		{{if count ( $forms ) > 1}}
			<div class='ipsColumn ipsColumn_veryWide ipsBox'>
				<div class='ipsPad'>
					<h2 class='ipsType_sectionHead'>{lang='sign_in_faster'}</h2>
					{{if count ( $forms ) > 2}}
						<p class='ipsType_normal ipsType_reset ipsType_light'>{lang='sign_in_connect'}</p>
					{{endif}}
					<br>
					{{foreach $forms as $k => $form}}
						{{if $k !== '_standard'}}
							<div class='ipsPad_half'>{$form|raw}</div>
						{{endif}}
					{{endforeach}}
				</div>
			</div>
		{{endif}}

 

[JTrollerb123]

I reversed these 2 snippets of code but when I did it, the alignment got messed up and there's no longer a space in between both halves.  Now showing as the above. How do you fix?  Thanks!

[newbie LAC]

1 hour ago, JTrollerb123 said:

the alignment got messed up and there's no longer a space in between both halves.

It's depends of css

See 

 

[JTrollerb123]

That link helped me understand how the tables in responsive IP.Board now work.  Set both halves to VeryWide and it did the trick.

Thanks!