Notifications
Clear all

[Solved] Reposition social buttons

7 Posts
2 Users
1 Likes
127 Views
Hype Matrix
Posts: 72
Topic starter
(@hypematrix)
Estimable Member
Joined: 2 years ago

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
Tutrix
Posts: 825
(@tutrix)
Noble Member
Joined: 3 years ago

@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)

 

4 Replies
Hype Matrix
(@hypematrix)
Joined: 2 years ago

Estimable Member
Posts: 72

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

Tutrix
(@tutrix)
Joined: 3 years ago

Noble Member
Posts: 825

@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;
}}
Hype Matrix
(@hypematrix)
Joined: 2 years ago

Estimable Member
Posts: 72

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

Tutrix
(@tutrix)
Joined: 3 years ago

Noble Member
Posts: 825

@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;
}
Hype Matrix
Posts: 72
Topic starter
(@hypematrix)
Estimable Member
Joined: 2 years ago

Thanks @tutrix, looks perfect now!