Search Results for '.searchandfilter custom css'

[Trevor]

Our loader icon is a simple addition to the page, so you may need to use some Custom CSS, or actually hide it entirely and make your own. Please see these two posts (from the same thread);

https://support.searchandfilter.com/forums/topic/search-filter-scroll-loading-icon-positionning-in-infinite-scroll/page/2/#post-127324

https://support.searchandfilter.com/forums/topic/search-filter-scroll-loading-icon-positionning-in-infinite-scroll/page/3/#post-128735

This third party blog post might also give you some ideas:

https://wpbeaches.com/adding-a-loading-icon-spinner-on-search-filter-pro-archive-page/

[Trevor]

You would need to apply custom CSS to the form to suit your precise needs. There are many CSS snippets on our forum:

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

I do sometimes provide these, if I have the available time (but I am rather busy at the moment, sorry).

For example, to find snippets for the search field, which has the class name sf-field-search, this search should give you posts that style that field:

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

Rounder corners are set with the CSS border-radius attribute.

[Trevor]

You would need custom CSS, like this:

.searchandfilter[data-sf-form-id="218"] .sf-field-search input, .sf-field-search label {
    display: block;
    width: 100%;
}
.searchandfilter[data-sf-form-id="218"] > ul {
    margin: 0 7px 0 10px;
}
.searchandfilter[data-sf-form-id="218"] li[data-sf-field-input-type="select"] select,
.searchandfilter[data-sf-form-id="218"] li[data-sf-field-input-type="select"] label {
    width: 100%;
}

[Trevor]

3) Would require there to be a custom field where it indicates if a product has a sale price. I am not sure WooCommerce has such a field. It has the actual Sale Price, but that is not the same thing. It could, I suppose be done with a range field set as a radio button (where the options could be All Items and Sale Items), with some modifications, but only as long as the Sale Price is not being used as a filter elsewhere in the form.
4) That would require custom CSS, but you would need to explore that yourself, as it is not something that would be within the scope of our support, sorry. There are some snippets on our forum:
https://support.searchandfilter.com/forums/search/data+form+sf+id+searchandfilter
I do sometimes provide these, if I have the available time (which I do not at this time, sorry) and publish them for others to see.
5) As above, that can most likely be done, with custom CSS.
6) It should work, but some other JavaScript may be interfering. Looking at that screenshot, the Ajax Container is probably wrong for WooCommerce, which usually has .products for its Ajax Container.

[Anonymous]

add this to your custom css

.searchandfilter select.sf-input-select {
max-width: 170px;
}

[Anonymous]

For horizontal display: Add this to your custom css:

.searchandfilter ul li {
display: inline !important;
}

[Trevor]

Try this custom CSS:

.searchandfilter[data-sf-form-id="3664"] .sf-field-search input, .sf-field-search label {
    display: block;
    width: 100%;
}
.searchandfilter[data-sf-form-id="3664"] ul {
    padding-left: 0;
}
.searchandfilter[data-sf-form-id="3664"] li[data-sf-field-input-type="select"] select,
.searchandfilter[data-sf-form-id="3664"] li[data-sf-field-input-type="select"] label {
    width: 100%;
}
.searchandfilter[data-sf-form-id="3664"] .meta-slider {
    max-width: calc(100% - 21px);
    margin-left: 5px;
}

[Trevor]

You have some custom CSS there, using Flexbox, so you should utilise that thus:

.searchandfilter[data-sf-form-id="2509"] > ul {
    flex-wrap: wrap;
}

[Trevor]

Custom CSS like this:

.searchandfilter[data-sf-form-id="2169"] .sf-field-submit input {
    border-radius: 5px;
    color: #282828;
    background: #78c8ce;
}

[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 (change the 992px to suit). 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