[Resolved] Templates for custom search: predefined fields CSS

[Author]

Posts

[TobiasS8611]

Hello together,

are there any predefined templates for the custom search? I`m using the divi template and if I define a custom search, it looks like this: hidden link (i mean only the search fields and button)

How can I change them to a layout like the search in your real estate template?

And how can i show the search on the left side and not on the top?

Thanks in advance
Tobias

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - there is no predefined templates available for the search form. If you want to style your search form, you can still add your own HTML and CSS around the filter shortcodes to style the form as well as add your additional custom CSS and JS to filter sections CSS and JS box.

how can i show the search on the left side and not on the top?
==> You can display the custom search form as a widget. Please check following Doc for more info:
- https://toolset.com/documentation/user-guides/front-page-filters/#vfmh-display-the-filter-in-widget

If you want to copy the real estate search form you can use module manager plugin to install the search module. Please check the following link:
=> https://toolset.com/modules/house-search/

[TobiasS8611]

Thanks Minesh,
i bought the interactive package and installed the module manager and the house-search plugin.
But why is it looking like this now? hidden link

What did i wrong?

[Minesh]

Could you please go to: Toolset => Settings => General Tab => Bootstrap Loading and enable the option "Toolset should load the Bootstrap 3.0"

Does that help?

[TobiasS8611]

much better. Now it looks like this: wma.tobias-schmidt.me/daenemark/
How can i give the "Search Houses / Use filters" a background color like in the example?

[Minesh]

Well - could you please share access details so I can check what CSS needs to be adjusted.

*** Please make a FULL BACKUP of your database and website.***
I have set the next reply to private which means only you and I have access to it.

[Minesh]

Well - I've added following CSS to your view's filter section's CSS box:

.filter-list .search-header {
    background-color:#db5800;
    padding: 15px;
    color: #fff;
    position: relative;
    text-align: center;
}

To style search filter you should target the element and add such custom CSS as required.

[TobiasS8611]

Thanks Minesh, I think i will manage the rest.

[Minesh]

Glad to help. Feel free to resolve the ticket 🙂

[TobiasS8611]

My issue is resolved now. Thank you!