Forums › Forums › Search & Filter Pro › How to edit the form

Viewing 10 posts - 1 through 10 (of 15 total)
1 2
  • Anonymous
    (Private)  March 27, 2017 at 3:06 pm #99690

    I have one small question. My website is: http://www.knappekoppen.work.

    As you can see, the select boxes are now beneath each other. I want them to be next to each other, at the same line.

    Also, I want to put “<div class=”select-style”>” before “<select>” and “</div>” after “</select>”.

    How can I do this?

    Anonymous
    (Private)  March 27, 2017 at 3:16 pm #99693

    Edit: I would like to have the select boxes on the same line as the word ‘vacatures’. ‘vacatures’ should be aligned left en the boxes on the right.

    Anonymous
    (Private)  March 27, 2017 at 3:30 pm #99701

    Other question: is there a possibility to divide the portfolio products automatically over several pages? For example 10 products per page.

    Anonymous
    (Private)  March 27, 2017 at 4:02 pm #99710

    Edit edit: excuse me, the select boxes will be BENEATH ‘vacatures’. The three boxes should be at the same line, centered.

    Trevor
    (Private)  March 27, 2017 at 4:23 pm #99716

    Hi Jasper

    That’s a lot of quick questions 😉 Can I number them 1-4?

    #3 You seem to have done this, by setting post per page to 10, on the General Settings tab? It might look better with 12 though?

    #4 supersedes #2, yes?

    And that leaves us with #1. Which is actually two questions, I will call 1A and 1B

    1B is not possible with this version of Search & Filter Pro, but will be possible in some months when we release V3.

    1A. You need some simple Custom CSS to do this:

    .searchandfilter ul li {
  display: inline-block !important;
  margin-right: 20px;
}
.searchandfilter ul li:last-child {
  margin-right: 0;
}
    Anonymous
    (Private)  March 27, 2017 at 5:06 pm #99730

    Thanks very much for your reply! All questions are answered.

    Considering answer 1B: is there another way to edit the CSS of the select boxes as in this example https://coderwall.com/p/w7npmq/fully-custom-select-box-simple-css-only?

    Trevor
    (Private)  March 27, 2017 at 5:10 pm #99734

    As they have divs around them, it isn’t possible to do that until V3. However, you can set them as Comboboxes and in the plugin settings choose Select2 from the choices. That would make them much nicer and give you more flexibility with Custom CSS.

    Anonymous
    (Private)  March 27, 2017 at 7:11 pm #99751

    Thanks again! It worked perfectly. One question (again ;-)):

    http://www.knappekoppen.work. The last thing I want to do is to change the font-family of all the options. I tried this:

    .sf-level-0 { font-family: 'Open Sans'!important; }

    …but this doesn’t work! It’s now Times New Roman and I want it to be ‘Open Sans’.

    Thanks!

    Anonymous
    (Private)  March 28, 2017 at 12:53 am #99815

    Sorry, two more questions (last ones, I promise 🙂 ):

    1) Is there any possibility to delete the textbox in the combobox (the box in which you can type what you’re looking for? And if not: Can I change the text “No results found” into my own language?

    2) If I open the combo boxes on my mobile to see the options, I automatically zoom in on my screen a little bit. How can I make sure this does not happen?

    Trevor
    (Private)  March 28, 2017 at 8:40 am #99856

    OK

    The class for the Select2 dropdown elements is select2-results__option and not sf-level-0.

    Hide the box:

    .searchandfilter .select2-search.select2-search--dropdown {display: none;}

    I am not sure what might cause the zoom. Maybe hiding the search box will fix that.

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 15 total)
1 2