Search form customize styling

Anonymous

#243243

Good morning. I have two search form. One in horizontal styling and one in vertical styling.

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

Can you help me, please?

Trevor

#243264

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

Are these forms on the same page, or different pages?

Anonymous

#243266

The forms are in different pages:

https://www.virusfree-europa.com/

https://www.virusfree-europa.com/strutture/

https://www.virusfree-europa.com/operatori-autorizzati/

https://www.virusfree-europa.com/strutture/risultati-ricerca/

https://www.virusfree-europa.com/operatori-autorizzati/risultati-ricerca/

Thank you.

Trevor

#243297

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

#243332

Vertical form:
https://ibb.co/2hYxRG5

Anonymous

#243334

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

Trevor

#243525

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

#243569

Done

Trevor

#243725

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

Anonymous

#243756

Yes thank you. I have 2 more questions:
– “Nome struttura” and “Nome operatore autorizzato” are search fields. It’s possible change text color?
– I changed search form background-color. There is a white space out of fields. On phone view you notice more than desktop view. It’s possible delete? You can see it here: https://ibb.co/XkSfjk5

[Author]

Posts