How-to and Troubleshooting
7
Posts
2
Users
1
Reactions
1,680
Views
Sep 08, 2022 9:57 am
Hello,
I've had to install the Nextend Social Login plugin because I was getting an error [object Object] when trying to use the built social login through wpForo.
Nextend Social Login is working fine but the buttons are in a strange place under the login form, does anyone know how I can move them into the form?
Thanks
6 Replies
Sep 08, 2022 4:10 pm
add this to custom css
#wpforo #wpforo-wrap .wpforo-login-wrap .wpforo-login-table {
padding-bottom: 50px !important;
}
div.nsl-container.nsl-container-block .nsl-container-buttons {
display: inline-flex !important;
top: -85px !important;
position: relative;
text-align: center !important;
}
#nsl-custom-login-form-1 .nsl-container {
text-align: center;
}
div.nsl-container .nsl-container-buttons a {
margin: 0 5px !important;
}
.nsl-button.nsl-button-default {
background-color: transparent !important;
}
Dashboard > Forums > Settings > Settings > Colors & Styles (Custom CSS)
Sep 08, 2022 4:28 pm
@tutrix Thanks, the code works fine however the buttons overlap the sign in button in mobile view?
Sep 08, 2022 4:39 pm
add this after the code from above
@media screen and (max-width: 620px){
div.nsl-container.nsl-container-block .nsl-container-buttons {
top: -50px !important;
display: inline-block !important;
}}
Sep 08, 2022 4:49 pm
Sep 08, 2022 5:15 pm
use this code instead of the codes above
#wpforo #wpforo-wrap .wpforo-login-wrap .wpforo-login-table {
padding-bottom: 60px !important;
}
div.nsl-container.nsl-container-block .nsl-container-buttons {
display: inline-flex !important;
top: -95px !important;
position: relative;
text-align: center !important;
}
#nsl-custom-login-form-1 .nsl-container {
text-align: center;
}
div.nsl-container .nsl-container-buttons a {
margin: 0 5px !important;
}
.nsl-button.nsl-button-default {
background-color: transparent !important;
}
@media screen and (max-width: 820px){
div.nsl-container.nsl-container-block .nsl-container-buttons {
top: -80px !important;
display: inline-block !important;
}}
#wpforo #wpforo-wrap .wpforo-register-table {
padding-bottom: 50px !important;
}
#wpforo #wpforo-wrap .wpforo-register-table .wpf-field.wpf-extra-field-end {
border-bottom: none !important;
}
#wpforo #wpforo-wrap .wpforo-login-wrap .wpforo-login-table,
#wpforo #wpforo-wrap .wpforo-login-wrap .wpforo-table .wpfw-1 .wpf-field:nth-child(2n) {
background-color: #f5f5f5 !important;
}
