Notifications
Clear all

wpForo 1.x.x [Closed] Editable field icons overlap the text

10 Posts
2 Users
0 Reactions
1,001 Views
Posts: 12
 Waka
Topic starter
(@waka)
Eminent Member
Joined: 5 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:

 

9 Replies
Sofy
Posts: 4570
 Sofy
Admin
(@sofy)
Support Team
Joined: 6 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. 

Posts: 12
 Waka
Topic starter
(@waka)
Eminent Member
Joined: 5 years ago

Thanks, that would be great. The link: forums

*Edited as there was a typo in the url*

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

Support Team
Posts: 4570

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;
}
 Waka
(@waka)
Joined: 5 years ago

Eminent 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.

Sofy
 Sofy
Admin
(@sofy)
Joined: 6 years ago

Support Team
Posts: 4570

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.

 

 Waka
(@waka)
Joined: 5 years ago

Eminent 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!

Sofy
 Sofy
Admin
(@sofy)
Joined: 6 years ago

Support Team
Posts: 4570

@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;
}
 Waka
(@waka)
Joined: 5 years ago

Eminent 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

Sofy
 Sofy
Admin
(@sofy)
Joined: 6 years ago

Support Team
Posts: 4570

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