Search Results for '.searchandfilter custom css'

[Anonymous]

Thanks for your detailed answer. That’s motivating.

Q2 Make a dropdown multi-select of ‘Eten & drinken‘ and ‘Faciliteiten‘
A2 You want this to be a dropdown with checkboxes? I think that this too will come in V3

Yes, that would be exactly what I want, just this example.

Q3 Use stars in stead of the range-bar, because it’s about review-score. The stars should be colored when you pick them.
A3 I can only think this would require some custom JavaScript to enable the click on the stars to change the slider (that could be hidden). But to add the stars themselves, again, V3 would make this a lot easier

I want to filter by clicking the stars in the filter. I’m looking forward to V3 to make this happen.

Q4 Some space between the dropdown with option ‘Relevantie‘ and ‘Filters wissen‘
A4 Custom CSS would be needed:

Works great, thanks!

With V3, you will have more flexibility to style things using classes, but I am not sure how much control we can give you in the Elementor widget settings. But, something for us to consider.

If this could be done in Elementor that would be great.
But if it can be done on the WordPress dashboard that’s also helping.

A5 You don’t mention the spacing you indicated in the screenshot, for ‘Eten & drinken‘ and ‘Faciliteiten‘, like this:

.searchandfilter > ul > li[data-sf-field-input-type="checkbox"] > ul > li {
    padding-top: 5px;
    padding-bottom: 5px;
}

5px is what it is currently set at, so increase those for more gap, decrease for less gap.

Perfect, this work great by just changing the padding. Thanks!

Good luck with the developent of V3.

[Trevor]

You would need to create your own CSS for the form, using CSS media queries to make the CSS responsive. For example, you can wrap your CSS for the desktop display (horizontal) so it does not affect the mobile view, but you need to discover the responsive breakpoint of your theme. For example, like this:

@media (min-width: 993px) {
  .searchandfilter[data-sf-form-id="4997"] {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
  }
}

For more custom CSS examples, there are many snippets in the forum:

https://support.searchandfilter.com/forums/search/data+form+sf+id+searchandfilter

[Anonymous]

Hi
I have a new site that I am working on and I am trying to replicate parts of my existing one.

I am having a similar issue to here: https://support.searchandfilter.com/forums/topic/fields-shortened-in-off-canvas-side-bar/

on my http://www.truckpages.co.uk site the s&f filter works perfectly in the sidebar side bar. In the new development site this is not the case (the drop downs appear to be hidden behind the form, yet I seem to have done nothing different to the original truck site).

The dev site is dev.farmmachinerypages.co.uk When viewed in mobile an ‘amend search’ trigger button will appear and call the off-canvas:
https://dev.farmmachinerypages.co.uk/farm-machinery/for-sale/make-types/case-ih-tractors/

Here you can see it working on the truck site: https://www.truckpages.co.uk/trucks/for-sale/daf/

I have spent hours removing all custom css, editing it, turning forms on and off and changing php template files. No luck.

I’m sure I’ve done something odd but I just can’t see it?

Thanks

[Trevor]

So:

Q1 Move the sort-dropdown to be in the top right (I read that’s not possible in the current version?)
A1 You are correct, this will come in V3 (due in a few months)

Q2 Make a dropdown multi-select of ‘Eten & drinken‘ and ‘Faciliteiten‘
A2 You want this to be a dropdown with checkboxes? I think that this too will come in V3

Q3 Use stars in stead of the range-bar, because it’s about review-score. The stars should be colored when you pick them.
A3 I can only think this would require some custom JavaScript to enable the click on the stars to change the slider (that could be hidden). But to add the stars themselves, again, V3 would make this a lot easier

Q4 Some space between the dropdown with option ‘Relevantie‘ and ‘Filters wissen‘
A4 Custom CSS would be needed:

.searchandfilter[data-sf-form-id="3835"] .sf-field-reset {
    margin-top: 15px;
}

With V3, you will have more flexibility to style things using classes, but I am not sure how much control we can give you in the Elementor widget settings. But, something for us to consider.

You don’t mention the spacing you indicated in the screenshot, for ‘Eten & drinken‘ and ‘Faciliteiten‘, like this:

.searchandfilter > ul > li[data-sf-field-input-type="checkbox"] > ul > li {
    padding-top: 5px;
    padding-bottom: 5px;
}

5px is what it is currently set at, so increase those for more gap, decrease for less gap.

[Trevor]

Until V3, you can have a field only in the one type on the page. In V3 (due in a few months), you will be allowed to have the fields multiple times, to allow showing of different format fields responsively.

You would need to create your own CSS for the form, using CSS media queries to make the CSS responsive. For example, you can wrap your CSS for the desktop display (horizontal) so it does not affect the mobile view, but you need to discover the responsive breakpoint of your theme. For example, like this:

@media (min-width: 992px) {
  .searchandfilter[data-sf-form-id="1234"] {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
  }
}

Where 1234 needs to be changed to match your form ID.

For more custom CSS examples, there are many snippets in the forum:

https://support.searchandfilter.com/forums/search/data+form+sf+id+searchandfilter

[Trevor]

You would need to create custom CSS for that. There are many snippets in the forum:

https://support.searchandfilter.com/forums/search/data+form+sf+id+searchandfilter

I do sometimes create some custom CSS for users, but that is generally outside the scope of our support, and is done mainly if I have time. At the moment, there may be a delay if you want that.

If you want me to help with this, could you make an annotated screenshot of what you see and upload it to a file sharing site (like the WordPress Cloudup site) and share the link for the set with me? Please use a Private Reply.

If you can give me a URL to that page so I can see it live (I will need this)?

[Trevor]

To remove the red lined items, you need this custom CSS:

.searchandfilter[data-sf-form-id="4548"] .sf-field-taxonomy-product_category .sf-level-0 > .sf-input-checkbox,
.searchandfilter[data-sf-form-id="4548"] .sf-field-taxonomy-product_category .sf-level-0 > .sf-label-checkbox {
    display: none;
}
.searchandfilter[data-sf-form-id="4548"] ul li.sf-field-taxonomy-product_category > ul > li {
    padding: 0;
}

As to the remove empty fields, I have no solution for that sorry. It may be something we will add in V3 (not due for some months yet), I am not sure.

It might be possible to do this with custom JavaScript, that checks if the field is empty, but I do not know how that would be done and have no snippets to share.

[Trevor]

I don’t sorry, it would be too complex. You would need to create custom CSS for that. There are many snippets in the forum:

https://support.searchandfilter.com/forums/search/data+form+sf+id+searchandfilter

[Trevor]

Your custom CSS:

.searchandfilter[data-sf-form-id="2167"] .sf-field-submit input {
    border-radius: 3px;
    color: #fff;
    font-family: Assistant;
    font-weight: 400;
}

You need to have the icons in the size you need as transparent png images of the correct size on your site. The CSS would be something like this I think:

.searchandfilter[data-sf-form-id="2167"] .sf-field-search input {
    padding-right: 30px;
    background: url(your path to the image);
}

and

.searchandfilter[data-sf-form-id="2167"] .sf-field-taxonomy-job_locations select {
    padding-right: 30px;
    background: url();
}

I think.

[Trevor]

Ah, that we have little or no control over. Let me explain, and then offer a ‘Select’ replacement script as a possible solution (used by many themes).

One of the reasons so many themes/sites use ‘Select’ replacement scripts is that much of the formatting of standard select controls is done by the browser, and so you have little or no control over that.

The Chosen script is included with/used by our plugin by default. However, it is now pretty much abandoned and has not received any major updates in a long time. It has poor support for iOS devices for example.

In the current version of our plugin, there is an option in our settings page to choose which (Combobox) script to use.

Go to wp-admin -> Search & Filter -> Settings -> Combobox Script

Change this from Chosen to Select2

The Select2 script is then available for you to apply to the form. Select2 is maintained now by the WooCommerce team, who are, of course, owned by Automattic, the owners of WordPress, and as such is used by a lot of themes and plugins.

So, in the form field settings, select the combobox option for each. This will mean you may need to add the styling you want to these fields.

There is an alternate way of doing this, but this is the easiest. Now you can style the resulting select as it is not a select!

This post shows the complete Select2 CSS that we already include in our plugin:

https://support.searchandfilter.com/forums/topic/customise-dropdown-combobox/#post-180345

At the end is an example of how to modify it.