Social Login Pushes Signup Button Out of View

I followed the instructions of the user kautukbhatnagar from here: https://forum.tagdiv.com/topic/want-social-login-short-code-on-login-page/ using AccessPress Social Login Lite. It works great and the social login buttons show where they’re supposed to but the problem is that it causes the “Create an Account” button to be pushed down out of display.

Is there a way I can move everything (Such as the login button) up some or increase the height of the modal (Or both)? Here’s what my modal looks like:

Here’s what line 42 of td-login-modal.php looks like:

<div class="td-login-info-text">' . __td('Forgot your password? Get help', TD_THEME_NAME) . '<BR />'.do_shortcode('[apsl-login-lite]').'</div>

• This topic was modified 9 years by tomashley. Reason: added code

I have come up with a temporary fix by using CSS relative positioning on lines 41, 42 (Added style to those two lines) and 43 (Added a div with style attribute):

<input type="button" name="login_button" id="login_button" class="wpb_button btn td-login-button" style="position:relative; bottom:25px;" value="' . __td('Login', TD_THEME_NAME) . '">

<div class="td-login-info-text" style="position:relative; bottom:25px;"><a href="#">' . __td('Forgot your password? Get help', TD_THEME_NAME) . '</a><BR />'.do_shortcode('[apsl-login-lite]').'</div>

<div style="position:relative; bottom:45px;">' . $users_can_register_link . '</div>

This should only be a temporary fix until I can get a response. As we all know, relative positioning isn’t good to use.

• This reply was modified 9 years by tomashley.

Here’s what my fix looks like if anyone is interested…

Now I’m investigating how I should add it to mobile. Still would like a better way than relative positioning though for desktop.

Did you find any good way to use social login buttons at mobile login form?

Did you fix it ?

What’s the file for the mobile login? Maybe I can insert there too? I do have the mobile site thing enabled. Would be nice to know both files where the mobile login code is at.

• This reply was modified 9 years by tomashley.

BTW, here’s an updated snippet for wp-content/themes/Newspaper/parts/header/td-login-modal.php …

echo '
<div id="login-form" class="white-popup-block mfp-hide mfp-with-anim">
<div class="td-login-wrap">
<i class="td-icon-modal-back"></i>
<div id="td-login-div" class="td-login-form-div td-display-block">
<div class="td-login-panel-title">' . __td('Sign in', TD_THEME_NAME) . '</div>
<div class="td-login-panel-descr">' . __td('Welcome! Log into your account', TD_THEME_NAME) . '</div>
<div class="td_display_err"></div>
<div class="td-login-inputs"><input class="td-login-input" type="text" name="login_email" id="login_email" value="" required><label>' . __td('your username', TD_THEME_NAME) . '</label></div>
<div class="td-login-inputs"><input class="td-login-input" type="password" name="login_pass" id="login_pass" value="" required><label>' . __td('your password', TD_THEME_NAME) . '</label></div>
<input type="button" name="login_button" id="login_button" class="wpb_button btn td-login-button" value="' . __td('Login', TD_THEME_NAME) . '">
<div class="td-login-info-text">' . __td('Forgot your password? Get help', TD_THEME_NAME) . '</div>
<div style="position:relative;top:6px">' . do_shortcode('[apsl-login-lite]') . '</div><div style="position:relative;bottom:27px">' . $users_can_register_link . '</div>
</div>

<div id="td-forgot-pass-div" class="td-login-form-div td-display-none">
<div class="td-login-panel-title">' . __td('Password recovery', TD_THEME_NAME) . '</div>
<div class="td-login-panel-descr">' . __td('Recover your password', TD_THEME_NAME) . '</div>
<div class="td_display_err"></div>
<div class="td-login-inputs"><input class="td-login-input" type="text" name="forgot_email" id="forgot_email" value="" required><label>' . __td('your email', TD_THEME_NAME) . '</label></div>
<input type="button" name="forgot_button" id="forgot_button" class="wpb_button btn td-login-button" value="' . __td('Send My Password', TD_THEME_NAME) . '">
<div class="td-login-info-text">' . __td('A password will be e-mailed to you.', TD_THEME_NAME) . '</div>
</div>
</div>
</div>
';

Please let me know where the files are for the mobile version so I can start fiddling with it.

• This reply was modified 9 years by tomashley.

I’ve got it working on mobile!!! wp-content/themes/Newspaper/mobile/parts/register.php

Here’s the entire code for that page in which two sections were altered: https://hastebin.com/ucufivazef.scala

• This reply was modified 9 years by tomashley.
• This reply was modified 9 years by tomashley.

Hi everybody,

How can i prevent users from seeing TopBar after logging in?

——————–

@tomashley You’re awesome man ! Thank you for shared us.

Hi there.
I have edited the code as it is in example above, I did get the Social login icons displayed in modal, but now when i press password recovery button or Create an account button, the modal does not show anything. It shows only the primary log in modal window, but nothing else. Any ideas here?

Also the URL of the code for mobile integration does not work. Could you please repost it?
Thanks!

Hi tomashley,

Can you please put the code for for mobile login, because the link is broken I think.