Horizontal styling / connecting Search&Filter to WP site search

Anonymous

#242834

Hi there,

I was asked to write my questions into the support forum:

As I am not a CSS pro, the documentation how to style the form horizontally did not work for me.

– I am using the DIVI builder, could you please explain what to fill in where (CSS class, Before, Main Element, After). Also I would like to make the Drop down Menue a little bit bigger (like 30% bigger).

– When the search doesn’t find matching articles or posts, there appears a standard-message, how can I change this?

– Is it possible to match the search plugin with the site search icon in the header (as the standard WP search is pretty weak).

Thanks for the support.

Best,
Felix

Trevor

#242950

Q1. I am using the Divi builder, could you please explain what to fill in where (CSS class, Before, Main Element, After). Also I would like to make the dropdown menu a little bit bigger (like 30% bigger).

A1. It should be possible with custom CSS that I can help you with.

Are you able to send me a live link/URL to your search page so I can take a look?

Might you be able to show me an annotated (naming colors, font family, weight, size) screenshot of the frontend form and what needs changing? You would need to upload the screenshot image to a file sharing site (like the WordPress Cloudup site) and share the link for it with me?

If you are able to show another form that is already in your site that is as you want, that would help.

Q2. When the search doesn’t find matching articles or posts, there appears a standard-message, how can I change this?

A2. Once I have seen your site, I may know better. Note that the documentation for our Divi integration (and the additional extension plugin you need to download from the top of the page is here:

https://searchandfilter.com/documentation/3rd-party/divi/

Q3. Is it possible to match the search plugin with the site search icon in the header (as the standard WP search is pretty weak).

A3. Do you mean that, in the search form, you have a text search box that you want to ‘match’ the one in the header, OR, do you mean that you want the search in the header to direct to our search form (the latter may prove difficult in Divi until we release V3 of our plugin towards the end of June)?

Anonymous

#243558

This reply has been marked as private.

Trevor

#243714

Try this Custom CSS (hopefully it may give you some ideas too):

.searchandfilter[data-sf-form-id="1104"] > ul > li {
  display: inline-block;
  vertical-align: top;
  padding-left: 20px;
}
.searchandfilter[data-sf-form-id="1104"] > ul > li:first-child {
  padding-left: 0;
}
.searchandfilter[data-sf-form-id="1104"] ul {
  padding: 0;
}
.searchandfilter[data-sf-form-id="1104"] > ul > li select {
  font-size: 16px;
  padding: 5px
}

[Author]

Posts