Skip Navigation

[Resolved] Styling the search form on my home page. I want to make it more user friendly

This support ticket is created 4 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

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 2 replies, has 2 voices.

Last updated by huwE-2 4 years, 11 months ago.

Assisted by: Waqar.

Author
Posts
#1469621
Screenshot_2020-01-20 Saddle Seller The Premium Saddle Selling Website.png

Tell us what you are trying to do?
I have created a search form. I am happy with the set up but want to style the form so that it is more user friendly. I would like to change the way the form is layed out and style the label and the select boxes as well if possible.

Is there any documentation that you are following?

Is there a similar example that we can see?
Yes see screen shot
What is the link to your site?

#1470533

Hi,

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

By default, the input fields in a view's search form, inherit styles from the active theme, so that they stay uniform with the rest of the website.

If Bootstrap styles and script library is enabled from WP Admin -> Toolset -> Settings -> General -> Bootstrap loading, then these form elements also use Bootstrap styles.
( hidden link )

Here is a useful guide on using Bootstrap styles, in the content:
https://toolset.com/documentation/user-guides/layouts/using-bootstrap-css-elements-content/

If for some reason, Bootstrap library is disabled on your website, then you'll need to add custom CSS styles to your view, to make these fields, show in a specific design or layout.

Note: To check which CSS code is applying to different page elements, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link

Alternatively, you can also try out our new Blocks based view builder, which offers a number of visual controls to style and design these view elements, without the need for custom CSS code:
https://toolset.com/documentation/getting-started-with-toolset/create-and-display-custom-lists-of-content/

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

#1472573

My issue is resolved now. Thank you!