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:
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.
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;
}
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.
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.
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!
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;
}
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
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;
}