[Resolved] Visual design in search filters

[Author]

Posts

[juanG-5]

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,

[Waqar]

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

[Waqar]

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?

[juanG-5]

Here is the link:

hidden link

[Waqar]

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.

[juanG-5]

Thank you!