Search Results for 'horizontal'

[Trevor]

I think you removed the original CSS you had used, so add this to the CSS I gave you:

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

[Trevor]

I think this custom CSS will be closer to what you wanted:

.sandf-horizontal .searchandfilter > ul {
  margin: 0 auto;
  display: table;
}
.sandf-vertical .searchandfilter > ul {
  margin-left: 0;
}
.sandf-vertical .searchandfilter > ul > li label,
.sandf-vertical .searchandfilter > ul > li input,
.sandf-vertical .searchandfilter > ul > li label select {
  width: 100%;
}
.sandf-horizontal .searchandfilter > ul > li label,
.sandf-horizontal .searchandfilter > ul > li input,
.sandf-horizontal .searchandfilter > ul > li label select {
  min-width: 225px;
}

.searchandfilter > ul > li label,
.searchandfilter > ul > li input,
.searchandfilter > ul > li label select {
  font-family: Arial;
  color: #000;
  border-color: #000 !important;
}
.searchandfilter > ul > li.sf-field-submit input {
  background: #e84c3d;
}

[Trevor]

In the widget for elementor that you use to place these forms, I believe you can add a class, yes?

I need you to add these as required:

Either:

sandf-horizontal

or

sandf-vertical

Otherwise I have no way to do the CSS you need. Let me know when this is done?

[Anonymous]

Horizontal form:
https://ibb.co/dBgWKPQ

[Trevor]

OK. I see these forms:

https://www.virusfree-europa.com/ – form 704 Horizontal

https://www.virusfree-europa.com/strutture/ – form 704 Horizontal

https://www.virusfree-europa.com/operatori-autorizzati/ – form 734 Horizontal

https://www.virusfree-europa.com/strutture/risultati-ricerca/ – form 704 Vertical

https://www.virusfree-europa.com/operatori-autorizzati/risultati-ricerca/ – form 734 Vertical

Might you be able to show me annotated (naming colors, font family, weight, size) screenshots of the frontend forms (one horizontal and one vertical) and what needs changing? You would need to upload the screenshot images to a file sharing site (like the WordPress Cloudup site) and share the links for them with me?

[Anonymous]

I need:
– centered search form (only for horizontal styling)
– same length for fields (button included)
– change fields background-color
– change fields text color
– change button color
– change button text-color

It’s possible?

[Ross]

Hi pas7o

We will need to change the horizontal css slightly, try this (replace the old CSS):

@media (min-width: 480px) {
	.searchandfilter > ul > li {
		display: inline-block;
		vertical-align: top;
		padding: 0 20px;
	}
}

You can change the 480px to target the width that you want for the device you need – so in this case, it will only show the search form horizontal, if the device width is over 480px

Thanks

[Anonymous]

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

[Anonymous]

in addition, they also have a custom “loading” animation, which is a horizontal bar going across the screen as the ajax filter works. again. how?

[Anonymous]

Thank you very much.

I will then customize it in the theme customizer. However, do I need to define a class for it in the Divi module or I can add properties inside the .searchandfilter I used to put it horizontally?

Thank you very much again