Forums › Forums › Search & Filter Pro › Horizontal search with Comboboxes

Tagged: , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Anonymous
    (Private)  October 21, 2015 at 8:22 am #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
    (Private)  October 21, 2015 at 2:50 pm #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
    (Private)  October 22, 2015 at 2:25 pm #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
    (Private)  October 22, 2015 at 3:24 pm #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
    (Private)  October 26, 2015 at 2:29 pm #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
    (Private)  October 27, 2015 at 11:12 am #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
    (Private)  October 27, 2015 at 1:02 pm #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
Viewing 7 posts - 1 through 7 (of 7 total)