Horizontal search with Comboboxes

Anonymous

#27816

Hello everyone,
i bought this wonderful plugin but i’m having trouble to build what i need. I need to create a page with in the middle a long search bar and under it 3-4 comboboxes to filter the results. It’s like the Google search, only the bar in the middle of the page, the Search button in front of it and under the bar the comboboxes, here a simple scheme:

_______________________________
|SEARCH|…………………..| <—- search bar
_______________________________
_____________..____________..__________________
|Regions.|V|..|Stars..|V|..|Type of room..|V| <– comboboxes to filter results
_____________..____________..__________________

Sorry about the ugly “draw”, had to use dots to make the spaces.
So, how can i do that, to get a Google-like page with some combobox in it?

Thanks in advance!

Anonymous

#27851

Hi again, i tried but still no luck. Is there anyone who could help me please? I have to do the same thing on a site for a customer, but i don’t know what to do…

Ross Moderator

#27968

Hi Luca

In order to style your search form you must have some basic CSS knowledge.

Please see here the notes on how to customise:

http://www.designsandcode.com/documentation/search-filter-pro/getting-started/display-search-form/#Styling_Your_Search_Form

What you are asking for is something very specific to your site, and would require some custom coding.

I’ll give you a pointer though however, depending on your theme this may still not work – if you look at hte code you will notice the search field list item has a class for easy styling,

So the following CSS should convert S&F to a horizontal layout (depending on your theme) but then sets the search field to display block ,which means it will be on its own line.

.searchandfilter > ul > li
{
    display:inline-block;
}

.searchandfilter > ul > li.sf-field-search
{
    display:block;
}

Like I mentioned, this may not work in your setup – but its a good starting point.

Thanks

PS, please also ensure you are using S&F 2.0.2 (released 2 days ago).

Anonymous

#27982

Many thanks for the answer, i’ll check as soon as possible and i’ll let you know if it works.
Thanks again!

Anonymous

#28233

Hi again, i’m sorry about my ignorance ^^”

But i was looking for the CSS inside the plugin, i thought it was something like “style.css” but i can’t find it. I found other files with different names but when i open them i can’t find this, for example:

li.sf-field-search

Can you tell me please where the file is located?

And i use Divi theme. Maybe i have to modify something inside its css too?

Thanks.

Ross Moderator

#28286

Hey Luca

You should add your custom CSS to the CSS file used by your theme, this is usually style.css but not always the case.

If you must find the plugin CSS, you can find it public/assets/css/search-filter.min.css – but if you change this file future plugin updates will lose your changes.

Thanks

Anonymous

#28309

Ok, i managed to make what i neede, thanks! Just one thing: i’m trying to put the search bar in the middle of the page, like Google. I’m trying with CSS but it doesn’t move, it stays on the left side. There’s an option or something like that maybe to disable the “positioning”?

I tried with:

position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;

But nothing. Maybe i’m using the wrong selector?

[Author]

Posts