Notifications
Clear all

wpForo 1.x.x Editable field icons overlap the text

10 Posts
2 Users
0 Likes
712 Views
Waka
Posts: 12
 Waka
Topic starter
(@waka)
Active Member
Joined: 3 years ago

Hi,

I'm trying out wpForo on our website, but see that the editable text fields have a problem. The icons for the field overlap the text.

I've attached a screenshot from the standard wpForo registration page on our website:

 

Topic Tags
9 Replies
Sofy
Posts: 4057
 Sofy
Admin
(@sofy)
Support Team
Joined: 5 years ago

Hi @waka,

This is just a small CSS conflict with either your theme or current other plugins. Please leave us your forum URL to allow us to check the issue and provide some CSS solution for you. 

Reply
Waka
Posts: 12
 Waka
Topic starter
(@waka)
Active Member
Joined: 3 years ago

Thanks, that would be great. The link: forums

*Edited as there was a typo in the url*

Reply
7 Replies
Sofy
 Sofy
Admin
(@sofy)
Joined: 5 years ago

Support Team
Posts: 4057

ok @waka,

Please navigate to Dashboard > Forums > Settings > Styles admin page, add the CSS codes in "Custom CSS Code" textarea, save it, delete all caches and check again. Press CREL+F5 (twice) on frontend before checking. 

#wpforo #wpforo-wrap .wpforo-login-wrap .wpf-field .wpf-field-wrap input[type="text"], #wpforo #wpforo-wrap .wpforo-login-wrap .wpf-field .wpf-field-wrap input[type="password"], #wpforo #wpforo-wrap .wpforo-login-wrap .wpf-field .wpf-field-wrap input[type="email"] {
padding: 10px 20px 10px 34px !important;
font-size: 14px !important;
}
#wpforo #wpforo-wrap .wpf-field-wrap .wpf-field-icon {
left: 10px !important;
top: 8px !important;
}
Reply
Waka
 Waka
(@waka)
Joined: 3 years ago

Active Member
Posts: 12

Thanks for the help @Sofy, those changes fixed the problems on the login page but there are others.

The register page has the same problem: register

Also the search bar on the menu has an inherited border and padding problem.

Reply
Sofy
 Sofy
Admin
(@sofy)
Joined: 5 years ago

Support Team
Posts: 4057

Ah yes, I see, add this one as well, and check again:

#wpforo #wpforo-wrap .wpf-field input[type="text"], #wpforo #wpforo-wrap .wpf-field input[type="password"], #wpforo #wpforo-wrap .wpf-field input[type="email"], #wpforo #wpforo-wrap .wpf-field input[type="date"], #wpforo #wpforo-wrap .wpf-field input[type="number"], #wpforo #wpforo-wrap .wpf-field input[type="url"], #wpforo #wpforo-wrap .wpf-field input[type="tel"], #wpforo #wpforo-wrap .wpf-field input[type="search"], #wpforo #wpforo-wrap .wpf-field input[type="color"], #wpforo #wpforo-wrap .wpf-field textarea, #wpforo #wpforo-wrap .wpf-field select{
padding: 11px 11px 15px 47px !important;
font-size: 13px !important;
}

I'm sorry, but there is some difficulty with removing the border around the search section. I'll provide some solution just later.

 

Reply
Waka
 Waka
(@waka)
Joined: 3 years ago

Active Member
Posts: 12

That fixed the Register page too 👍 @Sofy.

I did think the search field problems would be a little more difficult to fix. Thanks for your help so far!

Reply
Sofy
 Sofy
Admin
(@sofy)
Joined: 5 years ago

Support Team
Posts: 4057

@waka,

I've found the CSS solution, please try this CSS code:

#wpforo #wpforo-wrap .wpf-search input[type="text"].wpf-search-field{
border: none !important;
box-shadow: none !important;
color: #fff;
padding: 0 3px 0 38px !important;
}
Reply
Waka
 Waka
(@waka)
Joined: 3 years ago

Active Member
Posts: 12

Thanks for your help, that's sorted the border problem.

The search bar returns to a dark colour though, with white text when opened. This makes it difficult for a user to know there is an editable text box present. On your website the forum search bar opens as a white box and allow text entry. 

I assume there is another CSS related answer to this question?

 

Thanks

Reply
Sofy
 Sofy
Admin
(@sofy)
Joined: 5 years ago

Support Team
Posts: 4057

ok @waka, I see.

Please add the following code as well:

#wpforo #wpforo-wrap .wpf-search input[type="text"].wpf-search-field{
color: #000;
}
#wpforo #wpforo-wrap .wpf-search input[type="text"]:focus{
background: #F5F5F5 !important;
}
Reply
Share: