#1 WordPress forum plugin created by gVectors Team

wpForo – WordPress Forum Plugin
  • Home
  • Forum
  • Migrate to wpForo
  • Addons
  • Addons Demo
  • Documentation

Forum

Home | Forum

wpDiscuz - WordPress Comment Plugin
  • Forums
  • Members
  • Recent Posts
Forums
Main Support Forums
How-to and Troubles...
Editable field icon...
 
Share:
Share
Tweet
Share
Notifications
Clear all

Editable field icons overlap the text

    Last Post
RSS

Waka
Posts: 12
 Waka
Topic starter
May 2, 2019 11:33 am
(@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:

 

Screenshot-126.png
Topic Tags
layout text-fields
9 Replies
Sofy
Posts: 4057
Sofy - Facebook Sofy - Twitter
 Sofy
Admin
May 2, 2019 12:21 pm
(@sofy)
Support Team
Joined: 4 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. 

In case you want to say thank you !)
We'd really appreciate and be thankful if you leave a good review on plugin page. This is the best way to say thank you to this project and support team.

Reply
Waka
Posts: 12
 Waka
Topic starter
May 2, 2019 1:03 pm
(@waka)
Active Member
Joined: 3 years ago

Thanks, that would be great. The link: forums

*Edited as there was a typo in the url*

This post was modified 3 years ago 2 times by Waka
Reply
7 Replies
Sofy
 Sofy
Admin
(@sofy)
Joined: 4 years ago

Support Team
Posts: 4057
Sofy - Facebook Sofy - Twitter
May 2, 2019 1:11 pm
Reply toWakaWaka

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

In case you want to say thank you !)
We'd really appreciate and be thankful if you leave a good review on plugin page. This is the best way to say thank you to this project and support team.

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

Active Member
Posts: 12
May 2, 2019 1:33 pm
Reply toSofySofy
Waka

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.

This post was modified 3 years ago by Waka
Reply
Sofy
 Sofy
Admin
(@sofy)
Joined: 4 years ago

Support Team
Posts: 4057
Sofy - Facebook Sofy - Twitter
May 2, 2019 2:10 pm
Reply toWakaWaka
Sofy
Waka

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.

 

In case you want to say thank you !)
We'd really appreciate and be thankful if you leave a good review on plugin page. This is the best way to say thank you to this project and support team.

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

Active Member
Posts: 12
May 2, 2019 2:15 pm
Reply toSofySofy
Waka
Sofy
Waka

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!

This post was modified 3 years ago by Waka
Reply
Sofy
 Sofy
Admin
(@sofy)
Joined: 4 years ago

Support Team
Posts: 4057
Sofy - Facebook Sofy - Twitter
May 3, 2019 10:05 am
Reply toWakaWaka
Sofy
Waka
Sofy
Waka

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

In case you want to say thank you !)
We'd really appreciate and be thankful if you leave a good review on plugin page. This is the best way to say thank you to this project and support team.

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

Active Member
Posts: 12
May 9, 2019 2:28 pm
Reply toSofySofy
Waka
Sofy
Waka
Waka

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: 4 years ago

Support Team
Posts: 4057
Sofy - Facebook Sofy - Twitter
May 10, 2019 9:18 am
Reply toWakaWaka
Sofy
Waka
Sofy
Waka

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

In case you want to say thank you !)
We'd really appreciate and be thankful if you leave a good review on plugin page. This is the best way to say thank you to this project and support team.

Reply
  All forum topics
  Previous Topic
Next Topic  
Related Topics
  • One Topic Layout Damaged
    2 years ago
  • Can i have my forum as simplified layout but having threaded reply view in topic page?
    2 years ago
  • Forum page links are not in the bar above the breadcrumb
    3 years ago
Topic Tags:  layout (8), text-fields (1),

Forum Search

Join Us!

Download wpForo plugin
on WordPress.org

wpForo Addons

wpforo-private-messages wpforo-advanced-attachments-128x128 wpforo-embeds-128x128 wpForo User Custom Fields addon wpForo – Blog Cross Posting addon wpForo Ads Manager wpForo – WooCommerce Memberships Integration wpForo Emoticons wpForo – Tenor GIFs Integration
View all Addons »

Recent Topics

  • Suggestion How to make new user to get approve manually before creating post and profile.

    By Adhyansh21, 6 hours ago

  • Posts deleted in database still show up on front-end

    By nylex, 7 hours ago

  • Not all links are automatically added with the "nofollow" attribute

    By st7878, 11 hours ago

  • Editors assign users to groups

    By mike_netinfo, 12 hours ago

  • Set password link opens forum login page instead of set password page

    By JanJan, 13 hours ago

  • User banned for using icons?

    By JanJan, 13 hours ago

Topic Tags

  • css52
  • translation50
  • plugin conflict48
  • seo47
  • new features45
  • buddypress43
  • avatar41
  • moderation40
  • ultimate member40
  • login40
  • forum40
  • registration37
  • threaded layout35
  • cache34
  • editor33
  • menu33
  • spam32
  • shortcode32
  • forum accesses30
  • widget29
View all tags (2190)

Recent Posts

  • RE: Not all links are automatically added with the "nofollow" attribute

    @dimalifragis It won't conflict with the wpForo Embeds ...

    By st7878, 23 mins ago

  • RE: How to make new user to get approve manually before creating post and profile.

    Thanks again

    By Adhyansh21, 3 hours ago

  • RE: Posts deleted in database still show up on front-end

    Ok then, wait until someone from wpForo support will he...

    By dimalifragis, 6 hours ago

  • RE: Set password link opens forum login page instead of set password page

    Hi @janjan, Go to Dashboard > Forums > Settings...

    By Chris, 10 hours ago

  • RE: Editors assign users to groups

    Hi @mike_netinfo, Only administrators can change user...

    By Chris, 11 hours ago

  • RE: Font Awesome Icons

    @seancallahan, It's better if you revert all your cha...

    By Chris, 11 hours ago

  • RE: Is there a way to add safety features?

    Hi @seancallahan, It's not recommended to install the...

    By Robert, 12 hours ago

Share:
Share
Tweet
Share
  Forum Statistics
21 Forums
9,931 Topics
50.2 K Posts
7 Online
47.9 K Members

Latest Post: Not all links are automatically added with the "nofollow" attribute Our newest member: Slot And Love - How They Are T... Recent Posts Unread Posts Tags

Forum Icons: Forum contains no unread posts Forum contains unread posts

Topic Icons: Not Replied Replied Active Hot Sticky Unapproved Solved Private Closed

Powered by wpForo | Copyright © 2016-2022 gVectors Team
Copyright Registration Service - Click here for more information or to register work
wpForo is Registered with the IP Rights Office
Copyright Registration Service

Ref: 4477265538
  • Home
  • Forum
  • Migrate to wpForo
  • Addons
  • Addons Demo
  • Documentation