Search Results for '.searchandfilter custom css'

[Trevor]

If these are dropdown select boxes, this Custom CSS usually works:

.searchandfilter > ul > li {
  display: inline-block;
  margin-right: 20px;
  float: left;
}
.searchandfilter > ul > li:last-child {
  margin-right: 0;
}
.search-filter-results {clear: both;}

We do not offer a support service for CSS customization to match your theme, you would need to do this yourself.

[Trevor]

Try this Custom CSS:

.page-content.txt section.post_content .searchandfilter > ul ul {
  padding: 0;
}
.page-content.txt section.post_content .searchandfilter > ul {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

[Trevor]

You have set it with this custom CSS for the background:

.post_content {
    width: 25%;
    background-color: #B8B8B8;
    height: relative;
    position: relative;
    margin-left: -2.5%;
    float: left;
}

Whereas the background might need to be on the form and removed from the post_content:

.post_content .searchandfilter {
    background-color: #B8B8B8;
}

[Trevor]

You would need to use Custom CSS. A very basic example is:

.searchandfilter > ul > li {
  display: inline-block;
  margin-right: 20px;
  float: left;
}
.searchandfilter > ul > li:last-child {
  margin-right: 0;
}
.search-filter-results {clear: both;}

[Trevor]

You would need some Custom CSS, like this:

.searchandfilter > ul > li.sf-field-category {
  display: inline-block;
  margin-right: 20px;
  float: left;
}
.searchandfilter > ul > li.sf-field-tag {
  display: inline-block;
  float: left;
}
.search-filter-results, .sf-field-submit {clear: both;}

[Trevor]

The answer to the Masonry question is rather dependent on your theme (Tesseract, yes?). Are you using Beaver Builder to make the grid and does that use Masonry?

To make the filters go horizontal, you would need to use Custom CSS, like this maybe?

.searchandfilter > ul > li {
  display: inline-block;
  margin-right: 20px;
  float: left;
}
.searchandfilter > ul > li:last-child {
  margin-right: 0;
}
.search-filter-results {clear: both;}

[Trevor]

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;
}

[Trevor]

Hi

You need to use some Custom CSS to do that. Something like this:

form.searchandfilter .sf-input-text,
form.searchandfilter label {
  vertical-align: middle;
}
form.searchandfilter > ul {padding: 0 !important;}
form.searchandfilter > ul > li {
  margin-right: 20px;
	display: inline-block;
}
form.searchandfilter > ul > li:last-child {
  margin-right: 0;
}

[Trevor]

Hi Kathy

1. This would require some custom CSS. And where this is placed depends on which Display Results Method you are (the choices are shown here). Some use your theme templates, one uses Visual Composer (a new beta option not shown on that list as it requires a free extension) and one uses a template that we supply with the plugin. This post explains this methodology.

2. Where the search form uses Ajax, and if you have set ‘Only Use Ajax on the Results Page` (see the docs link I gave above for this) it will stay on the page. If you are using the WooCommerce or Post Type Archive method, then you get an additional option to enable on “taxonomy archives” which may help also.

[Trevor]

Hi, can you take a look at this CSS in this post for an example:

https://support.searchandfilter.com/forums/topic/how-do-i-custom-design-my-search-form/#post-91725