Skip Navigation

[Resolved] Styling search form and make the search work

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
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10: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/Kolkata (GMT+05:30)

This topic contains 5 replies, has 2 voices.

Last updated by kjetilF 4 years, 11 months ago.

Assisted by: Minesh.

Author
Posts
#1412343

Hi
I’m trying to build a new home page with blocks. I’d like it much as the old one, actually a search/ results page:
hidden link
but with more control over the layout and also easier ways to include other elements when needed.
I have followed some of your tutorials, like
https://toolset.com/2019/12/using-toolset-blocks-on-existing-toolset-sites/
https://toolset.com/documentation/getting-started-with-toolset/filter-content-lists-and-add-custom-search/
to build this:
hidden link
It is private, so you need to login to see it (guess you need to provide me a place to put the login credentials?)

Please note that this site uses both Views and Beaver builder pages etc. To avoid any conflicts, I have made a new post type – Special pages – just for pages like the new front/home/search page.

What I can’t figure out is:
1 - (How) can I place an image behind the search form? (like on the old front page)
Or would I have to place it below?
2 - Why the search doesn’t really work
If you please look at the front end page - hidden link - and try some of the selectors, they hardly produce any results. Even when you have just opened the page it tends to go empty, completely unlike the old front page.
If you select Region > Toscana (with most home offers) and then different kinds of properties (Type bolig) on the new and old search pages, they produce totally different results.
Also, even if I (under View Search) have checked “Show only filter options that would produce results” I get empty results.
3 – Styling: This is the first pages I try to build using blocks. Is it normal that the output is so different from the styling as seen in the backend? I really struggle styling and placing especially the form fields. In this try I’ve kept it simple.
(4 - I guess the map will work as soon as the search and results work 🙂

I really like the new approach and the effort you have made to make Toolset a “blockset” – I really hope we can make this work 

Thanks,
Kjetil

#1413267

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

What I can’t figure out is:
1 - (How) can I place an image behind the search form? (like on the old front page)
Or would I have to place it below?
==>
You should try to use the container block and set the background image. Please check the following screenshot:
- hidden link

2 - Why the search doesn’t really work
If you please look at the front end page - hidden link - and try some of the selectors, they hardly produce any results. Even when you have just opened the page it tends to go empty, completely unlike the old front page.
If you select Region > Toscana (with most home offers) and then different kinds of properties (Type bolig) on the new and old search pages, they produce totally different results.
Also, even if I (under View Search) have checked “Show only filter options that would produce results” I get empty results.
===>
I need access details to check whats going wrong with your setup.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

3 – Styling: This is the first pages I try to build using blocks. Is it normal that the output is so different from the styling as seen in the backend? I really struggle styling and placing especially the form fields. In this try I’ve kept it simple.
==>
It could be same but you should use the columns block to place your fields.

(4 - I guess the map will work as soon as the search and results work
==>
Ok. please let me know if its not working.

#1414519

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

I'm handling the current image background issue and will split the ticket with other addon issues.

1 - Image background:
I finally managed to create a container and move the search View into it (pulling it out from a quite similar Kadence row).
I also created a column set to put the search fields side-by-side.
I now have a background image, but (I should have been more precise): It should be just behind the search form, NOT behind the results - as on the old front page - hidden link - possible?
1b - By the way:
I've set both the container and the theme's content (Astra settings > content layout) width to "full width", but it won't stretch out. Other things having an influence...?
(I'd like to have just the search form part full width like on the old front page)
===>
I've set the Beaver Builder row and column to full width from the settings:
=> hidden link

As you can see now, its showing the full width, you should edit your Beaver Builder layout settings to customize your layout.
hidden link

3 - I actually had used columns (at an earlier stage), as I have for the search form now. Seems to work now 🙂
===>
Great.

4 - We'll see when 2 is fixed
==>
Please let me know where exactly map is not working.

#1415291

Hi, Minesh
Thanks again for sharing some wisdom 🙂

1a - What you have added shows how simple it could be solved, adjusting the background image height
I'll try to tweek it so it shows fine also on small devices
--> I can't see any screen size-dependant settings(?)
Thanks also for adding the needed padding to make the form fields display nicely.

1b - What you have done should not be possible... - but its fine.
Let me explain - hopefully I won't ad any unnecessary confusion to our discussion: To avoid confusion and technical clashes, I actually had made a new post type ("Special pages") which BB is NOT assigned to.
I did this because, to my experience, mixing Toolset and BB will not work.
But by a mistake I sent you to a new search page that I had built on a normal "page" (not the "special page" version - hidden link) - and BB is assigned to pages.
Anyway: The page works, which is great. It also means that the Toolset + BB problem belongs to the past.

I think we're there.
Thanks a lot - your help has been great.

All the best
Kjetil

#1416005

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

1a - What you have added shows how simple it could be solved, adjusting the background image height
I'll try to tweek it so it shows fine also on small devices
--> I can't see any screen size-dependant settings(?)
Thanks also for adding the needed padding to make the form fields display nicely.
===>
Screen size dependant settings is not available for now but we do have plans to add to Toolset blocks in near future release.

1b - What you have done should not be possible... - but its fine.
Let me explain - hopefully I won't ad any unnecessary confusion to our discussion: To avoid confusion and technical clashes, I actually had made a new post type ("Special pages") which BB is NOT assigned to.
I did this because, to my experience, mixing Toolset and BB will not work.
But by a mistake I sent you to a new search page that I had built on a normal "page" (not the "special page" version - hidden link) - and BB is assigned to pages.
Anyway: The page works, which is great. It also means that the Toolset + BB problem belongs to the past.
===>
great.

Glad to help 🙂

#1416983

Brilliant help, Minesh!
My issue is resolved now. Thank you!