Skip Navigation

[Resolved] Visual design in search filters

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 4 replies, has 2 voices.

Last updated by Waqar 2 months, 1 week ago.

Assisted by: Waqar.

Author
Posts
#2696758
redsearcc.JPG
searcc.JPG

Hello,

I need some help to finish a project that involves mostly visual changes.

1. How do I set a bigger typography size and font color in the search filters?
2. How do I change the search bar height? (I need one for the attached image.searcc)
3. How do I change the search filter colors? (the white bar)
4. Add an icon to the search filter.

second image is my current page (red is the changes i need)

I have done quite a lot for someone with zero developer knowledge, yet I will need some very detailed information to make the changes.

Thank you,

#2696997

Hi,

Thank you for contacting us and I'd be happy to assist.

To suggest the next steps, I'll need to see how this search page is set up in the admin area.

Can you please share temporary admin login details, along with the link to this search page?

Note: Your next reply will be private and making a complete backup copy is recommended before sharing the access details.

regards,
Waqar

#2697359

The access details worked, thank you.

But, I couldn't find the search form shown in your screenshot. Can you please also share the link to the page where this search form can be seen?

#2697415

Here is the link:

hidden link

#2697633

Thank you for sharing the link.

You can include the following CSS code in the view's CSS editor, to adjust the styles according to the points you've shared:
( screenshot: hidden link )


.wpv-filter-form .form-group input[name="wpv_post_search"],
.wpv-filter-form .form-group select {
    font-size: 1.2rem;
    line-height: 1.4rem;
    background: #E6E5E5;
}


.wpv-filter-form .form-group input[name="wpv_post_search"] {
    background: url(<em><u>hidden link</u></em>) #E6E5E5 no-repeat 0% 50%;
    background-size: 4%;
    padding: 3% 1% 3% 5%;
}

This should do the trick and feel free to adjust the values used in the code as needed.

#2697701

Thank you!

juanG-5 confirmed that the issue was resolved on 2024-05-14 19:06:53.
This ticket is now closed. If you're a Toolset client and need related help, please open a new support ticket.