How to move Google and FB signup above standard form?

[Gauravk]

I tried moving the order from Admin CP but still standard form shows first.

 

BACKEND

 

FRONT END - MOBILE

 

FRONT END - DESKTOP

[bfarber]

You would need to adjust the template to do this I'm afraid.

[Gauravk]

15 hours ago, bfarber said:

You would need to adjust the template to do this I'm afraid.

Thanks, can you please guide me with that?

As in today age 75% users are from mobile and if we show this sign in faster above standard form that will boost the sign ups.

[Gauravk]

I have reached till here: Templates - Core - Front - System - register.

Tried moving few codes above but ending up with a blank signup faster box. Appreciate any coder help to move social signup option before the standard form please.

@newbie LAC can you please?

Thanks in advance

<section class='ipsBox_alt ipsPad'>
	<br>
	{{if $postBeforeRegister}}
		<h1 class='ipsType_veryLarge ipsType_center ipsType_reset'>{lang="post_before_register_headline"}</h1>
		{{if !\IPS\Request::i()->hidereminder}}<p class='ipsType_reset ipsType_large ipsType_center ipsType_light'>{lang="post_before_register_subtext"}</p>{{endif}}
	{{else}}
		<h1 class='ipsType_veryLarge ipsType_center ipsType_reset'>{lang='sign_up'}</h1>
		<p class='ipsType_reset ipsType_large ipsType_center ipsType_light'>{lang="existing_user"} <a href='{url="app=core&module=system&controller=login" seoTemplate="login"}'>{lang="sign_in_short"}</a></p>
	{{endif}}
	<br>

	<div data-role='registerForm'>
		<div class='ipsColumns ipsColumns_collapseTablet'>
			{{$buttonMethods = $login->buttonMethods();}}
			{{if $buttonMethods}}
				<div class='ipsColumn ipsColumn_fluid'>
			{{endif}}
					<div class='ipsBox ipsPad_double {{if !$buttonMethods}}cRegister_noSocial ipsPos_center{{endif}}'>
						{$form|raw}
					</div>
			{{if $buttonMethods}}
				</div>
				<div class='ipsColumn ipsColumn_wide' id='elRegisterSocial'>
					<div class='ipsBox ipsPad'>
						<h2 class='ipsType_sectionHead'>{lang='reg_start_faster'}</h2>
						<p class='ipsType_normal ipsType_reset ipsType_light'>{lang='reg_connect'}</p>
						<br>
						<form accept-charset='utf-8' method='post' action='{$login->url}' data-controller="core.global.core.login">
							<input type="hidden" name="csrfKey" value="{expression="\IPS\Session::i()->csrfKey"}">
							{{foreach $buttonMethods as $method}}
								<div class='ipsType_center ipsPad_half'>
									{$method->button()|raw}
								</div>
							{{endforeach}}
						</form>
					</div>
				</div>
			{{endif}}
		</div>
	</div>
</section>

 

[Gauravk]

Can anyone please help with the code edits here?

[Gauravk]

Finally, with my no-coding knowledge, I manage to move them up. Looks nice on mobile but on desktop its funny.

Appreciate if someone can help in fixing these two minor issues:

• Social login outside box and standard form outside box width should be same
• Social login Google and FB button should be align to center (not left).

 

<section class='ipsBox_alt ipsPad'>
	<br>
	{{if $postBeforeRegister}}
		<h1 class='ipsType_veryLarge ipsType_center ipsType_reset'>{lang="post_before_register_headline"}</h1>
		{{if !\IPS\Request::i()->hidereminder}}<p class='ipsType_reset ipsType_large ipsType_center ipsType_light'>{lang="post_before_register_subtext"}</p>{{endif}}
	{{else}}
		<h1 class='ipsType_veryLarge ipsType_center ipsType_reset'>{lang='sign_up'}</h1>
		<p class='ipsType_reset ipsType_large ipsType_center ipsType_light'>{lang="existing_user"} <a href='{url="app=core&module=system&controller=login" seoTemplate="login"}'>{lang="sign_in_short"}</a></p>
	{{endif}}
	<br>

	<div data-role='registerForm'>
		<div class='ipsColumns ipsColumns_collapseTablet'>
            {{$buttonMethods = $login->buttonMethods();}}
          		<div class='ipsColumn ipsColumn_wide' id='elRegisterSocial'>
					<div class='ipsBox ipsPad' align='center'>
						<h2 class='ipsType_sectionHead'>{lang='reg_start_faster'}</h2>
						<p class='ipsType_normal ipsType_reset ipsType_light'>{lang='reg_connect'}</p>
						<br>
						<form accept-charset='utf-8' method='post' action='{$login->url}' data-controller="core.global.core.login">
							<input type="hidden" name="csrfKey" value="{expression="\IPS\Session::i()->csrfKey"}">
							{{foreach $buttonMethods as $method}}
								<div class='ipsType_center ipsPad_half'>
									{$method->button()|raw}
								</div>
							{{endforeach}}
						</form>
					</div>
				</div>
				</div>
			{{if $buttonMethods}}
				<div class='ipsColumn ipsColumn_fluid'>
			{{endif}}
					<div class='ipsBox ipsPad_double {{if !$buttonMethods}}cRegister_noSocial ipsPos_center{{endif}}'>
						{$form|raw}
					</div>
			{{if $buttonMethods}}
          
          
			{{endif}}
		</div>
	</div>
</section>

[bfarber]

	<div data-role='registerForm'>
		<div class='ipsColumns ipsColumns_collapseTablet'>
            {{$buttonMethods = $login->buttonMethods();}}
          	{{if $buttonMethods}}
          		<div class='ipsColumn ipsColumn_wide' id='elRegisterSocial'>
					<div class='ipsBox ipsPad' align='center'>
						<h2 class='ipsType_sectionHead'>{lang='reg_start_faster'}</h2>
						<p class='ipsType_normal ipsType_reset ipsType_light'>{lang='reg_connect'}</p>
						<br>
						<form accept-charset='utf-8' method='post' action='{$login->url}' data-controller="core.global.core.login">
							<input type="hidden" name="csrfKey" value="{expression="\IPS\Session::i()->csrfKey"}">
							{{foreach $buttonMethods as $method}}
								<div class='ipsType_center ipsPad_half'>
									{$method->button()|raw}
								</div>
							{{endforeach}}
						</form>
					</div>
				</div>
			{{endif}}
          <div class='ipsColumn ipsColumn_fluid'>
            <div class='ipsBox ipsPad_double {{if !$buttonMethods}}cRegister_noSocial ipsPos_center{{endif}}'>
              {$form|raw}
            </div>
          </div>
		</div>
	</div>

 

[newbie LAC]

Remove Columns classes

<section class='ipsBox_alt ipsPad'>
	<br>
	{{if $postBeforeRegister}}
		<h1 class='ipsType_veryLarge ipsType_center ipsType_reset'>{lang="post_before_register_headline"}</h1>
		{{if !\IPS\Request::i()->hidereminder}}<p class='ipsType_reset ipsType_large ipsType_center ipsType_light'>{lang="post_before_register_subtext"}</p>{{endif}}
	{{else}}
		<h1 class='ipsType_veryLarge ipsType_center ipsType_reset'>{lang='sign_up'}</h1>
		<p class='ipsType_reset ipsType_large ipsType_center ipsType_light'>{lang="existing_user"} <a href='{url="app=core&module=system&controller=login" seoTemplate="login"}'>{lang="sign_in_short"}</a></p>
	{{endif}}
	<br>
	<div data-role='registerForm'>
		{{$buttonMethods = $login->buttonMethods();}}
		{{if $buttonMethods}}
			<div id='elRegisterSocial' class='ipsType_center ipsSpacer_bottom'>
				<div class='ipsBox ipsPad'>
					<h2 class='ipsType_sectionHead'>{lang='reg_start_faster'}</h2>
					<p class='ipsType_normal ipsType_reset ipsType_light'>{lang='reg_connect'}</p>
					<br>
					<form accept-charset='utf-8' method='post' action='{$login->url}' data-controller="core.global.core.login">
						<input type="hidden" name="csrfKey" value="{expression="\IPS\Session::i()->csrfKey"}">
						{{foreach $buttonMethods as $method}}
							<div class='ipsType_center ipsPad_half'>
								{$method->button()|raw}
							</div>
						{{endforeach}}
					</form>
				</div>
			</div>
		{{endif}}
		<div class='ipsBox ipsPad_double {{if !$buttonMethods}}cRegister_noSocial ipsPos_center{{endif}}'>
			{$form|raw}
		</div>
	</div>
</section>