Search Results for '.searchandfilter custom css'

[Trevor]

Have you …

1. Set autodetect category/taxonomy:

https://www.screencast.com/t/3B40jPYRF4SA

2. And also set ‘Enable filtering on Taxonomy Archives’:

https://www.screencast.com/t/piCPyshb6

Then, you must add the Product Category taxonomy to the form. You can hide it if you wish with this custom CSS:

.searchandfilter .sf-field-taxonomy-product_cat {
  display: none;
}

[Trevor]

#1 For product category, add a Taxonomy field to the form and select Product Category from the list of taxonomies:

https://www.screencast.com/t/tukcmYtTyzbn

#2 Add this CSS to your theme Custom CSS (if your theme has no custom CSS panel, use Appearance -> Customizer -> Additional CSS):

.searchandfilter ._sft_product_cat {
  display: none;
}

[Trevor]

In reply to post-259381

We don’t currently have such a range option (e.g. <=5) so you must make it a range, and hide the From box in the form using CSS, and set the From number to not auto detect but set it to 0 manually. The user can then select the upper number.

Horizontal forms you may need to enclose the custom CSS in a media query so as not to affect mobile view, but a simple method is shown here:

.searchandfilter > ul > li {
	display: inline-block;
	vertical-align: top;
	padding: 0 20px;
}

[Trevor]

I will take the first post:

Your theme has this CSS:

.traveltour-body h4 {
    color: #383838;
    font-size: 28px;
    font-family: "Poppins", sans-serif;
    margin-top: 0px;
    margin-bottom: 20px;
    line-height: 1.2;
    font-weight: 700;
}

To control this, you need custom CSS like this:

`.traveltour-body .searchandfilter[data-sf-form-id=”22″] h4 {
/* CSS rules */
}

To the second question:

I am not sure if that date will be a problem in that format. Maybe, maybe not. You would need to test. Ideally, it should be 20200918 for example. It should not matter that it is not datetime.

At the moment, you need to use both From and To. The To field can be hidden, and you can use JavaScript to fill it with a long away date when the page opens. We will change/enhance the form field date match/range options in V3, due in a few months.

[Trevor]

I can see that something is applying ‘Nice Select’ javascript to our select box (maybe your theme), which is hiding our field and showing a different field, but it is not copying across the terms. That you would need to talk with the theme author about (probably best to stop it from doing that). Some custom CSS could hide the nice select version of the field and reveal our field. For example:

.searchandfilter[data-sf-form-id="4693"] .sf-input-select:not(.nice-select) {
    display: inline-block !important;
}
.searchandfilter[data-sf-form-id="4693"] .sf-input-select.nice-select {
    display: none;
}

[Trevor]

This custom CSS should get you started for desktop:

@media (min-width: 768px) {
  .searchandfilter[data-sf-form-id="4680"] > ul {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding-top: 20px
  }
  .searchandfilter[data-sf-form-id="4680"] ul,
  .searchandfilter[data-sf-form-id="4680"] > ul > li:first-child {
    margin-left: 0;
  }
  .searchandfilter[data-sf-form-id="4680"] > ul > li {
    display: inline-flex;
    margin-left: 20px;
    padding: 0;
  }
  body[data-fancy-form-rcs="1"] .searchandfilter[data-sf-form-id="4680"] .fancy-select-wrap {
    padding-top: 0;
  }
}

[Trevor]

In the mobile version, the filters will need to be vertically arranged, not horizontal.

I can see that your theme has a CSS rule that uses flexbox to make them horizontal. At some point you need to set the content into a column. Use this custom CSS maybe:

.fusion-content-widget-area .widget .searchandfilter select.sf-input-select,
.fusion-content-widget-area .widget .searchandfilter label {
    width: inherit;
}
.fusion-content-widget-area .widget .searchandfilter > ul > li {
    min-width: 200px;
    margin-right: 20px;
}
@media only screen and (max-width: 991px) {
  .fusion-content-widget-area .widget .searchandfilter > ul {
    flex-direction: column;
  }
  .fusion-content-widget-area .widget .searchandfilter > ul > li {
    margin-right: 0;
    margin-bottom: 20px;
  }
  .fusion-content-widget-area .widget .searchandfilter .search-filter-reset {
    margin: 0;
  }
}

[Trevor]

You would need to make sure the specificity is correct. This is our standard slider CSS for that color (I believe):

.searchandfilter .noUi-connect {
    background-color: #526E91;
}

So you would need custom CSS, something like:

.searchandfilter[data-sf-form-id="1234"] .noUi-connect {
    background-color: #ccc;
}

Where you would change the ID to match that of your form, and the color to what you want it to be.

[Trevor]

You want to convert a long list of checkboxes into a dropdown list of checkboxes, yes?

This is an option that we are investigating for V3 (due in a few months), but is not possible now.

The only option we have right now is custom CSS to give the checkbox list a scrollbar:

.searchandfilter li[data-sf-field-input-type="checkbox"] ul {
    max-height: 180px;
    overflow: auto;
}

[Trevor]

This Custom CSS should improve the layout:

.searchandfilter[data-sf-form-id="421"] ul {
    padding-left: 0;
}
.searchandfilter[data-sf-form-id="421"] .sf-range-max,
.searchandfilter[data-sf-form-id="421"] .sf-range-min {
    max-width: 110px;
}