Search bar style pops in

This support ticket is created 6 years, 2 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/Hong_Kong (GMT+08:00)

Tagged: Custom search, Views plugin

This topic contains 1 reply, has 2 voices.

Last updated by Luo Yang 6 years, 2 months ago.

Assisted by: Luo Yang.

Author

Posts

November 29, 2018 at 8:07 am #1155265

leonB-3

Hi - firstly this is a great plugin!

I'm having a couple of issue trying to style the custom search i have created..

If you see the following link i have the following issues - hidden link

1 - The search button seems not to align in a row and is higher than the other search fields.

2 - If you refresh the page the search elements shown on the page show in the their default style but then swap to the custom CSS i have added - how do i stop this?

3 - Is there any documentation showing the CSS used to style a search bar beyond the default? I've online found some Toolset documentation saying you can style the search bar no examples with actual CSS shown.

Thanks again for your help!

November 29, 2018 at 8:54 am #1155279

Luo Yang

Hi,

Q1) This is a CSS problem, you can setup custom CSS codes, for example:

.wpv-submit-trigger { margin-top: 30px; }

See screenshot submit.JPG

Q2) I suggest you move your custom CSS codes to HTML <head> ... </head> area.
For example, you can put your CSS codes into your theme file "style.css", then they will take effect before load the HTML body, more help:
https://stackoverflow.com/questions/1642212/whats-the-difference-if-i-put-css-file-inside-head-or-body

Q3) We have provided some reference demo sites here:
https://discover-wp.com/site-templates/

Some of them are using styled custom search form, for example:
hidden link
hidden link

You can get the custom CSS codes by setup your own demo site here:
https://discover-wp.com/site-templates/

For your reference.