Reposition social buttons - How-to and Troubleshooting - wpForo 2.0

RE: Reposition social buttons

Hype Matrix — Thu, 08 Sep 2022 19:00:28 +0000

Thanks @tutrix, looks perfect now!

RE: Reposition social buttons

Tutrix — Thu, 08 Sep 2022 17:15:46 +0000

@hypematrix

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;
}

RE: Reposition social buttons

Hype Matrix — Thu, 08 Sep 2022 16:49:08 +0000

@tutrix That's much better :) Only thing is they go over the line now?

1.jpg

RE: Reposition social buttons

Tutrix — Thu, 08 Sep 2022 16:39:42 +0000

@hypematrix

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;
}}

RE: Reposition social buttons

Hype Matrix — Thu, 08 Sep 2022 16:28:24 +0000

@tutrix Thanks, the code works fine however the buttons overlap the sign in button in mobile view?

RE: Reposition social buttons

Tutrix — Thu, 08 Sep 2022 16:10:47 +0000

@hypematrix

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)

Nextend-Social-Login.jpg

Reposition social buttons

Hype Matrix — Thu, 08 Sep 2022 09:57:27 +0000

Hello,

I've had to install the Nextend Social Login plugin because I was getting an error 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

1662574151-1.jpg