Notifications
Clear all

Limited Support

Our support team is currently on holiday from December 25, 2025 to January 7, 2026, and replies may be delayed during this period.

We appreciate your patience and understanding while our team is away. Thank you for being part of the wpForo community!

Merry Christmas and Happy Holidays! 🎄

wpForo 1.x.x [Closed] Search Form BG Color

5 Posts
2 Users
0 Reactions
1,017 Views
Posts: 11
Topic starter
(@donnongt)
Active Member
Joined: 5 years ago

How can I change the background color of the text input field in the forum toolbar without also changing the background under the fa-search icon, when the text field is hidden? Any ideas? Thanks.

 

 


4 Replies
Posts: 11
Topic starter
(@donnongt)
Active Member
Joined: 5 years ago

I actually want to change every text input field background color and I haven't found any one place to do so. I have implemented half a dozen css changes that have changed the background colors in most areas, but not the search input field. It's inherited color is white. Does anyone know where that field color is originally set, or was it never defined and just defaults to white? Thanks again.


Posts: 11
Topic starter
(@donnongt)
Active Member
Joined: 5 years ago

Nevermind. I figured it out.

.wpf-search input[type="text"]:focus

Posts: 11
Topic starter
(@donnongt)
Active Member
Joined: 5 years ago

OK, another question:

I would like to chage the Fa search icon color when the search form is in use. I used ':focus' to target the search form text input field when it is open, but that isn't working for the FA icon.

Does anyone have any idea how I can set the FA icon color differently, depending on whether the search form is visible or not? I appreciate the guidance.


1 Reply
Alvina
Moderator
(@alvina)
Joined: 6 years ago

Member
Posts: 1860

@donnongt,

Please try the following JS code:

jQuery( ".wpf-search" ).click(function() {
jQuery("#wpforo #wpforo-wrap .wpf-search i").css("color", "#00070b");
});

Please note the red marked value can be changed.

The code should be added in the current active theme JS files.

Here is an instruction on "How to Add Javascript  Without Breaking Your WordPress Site":  https://www.collectiveray.com/add-javascript-to-wordpress