Customize the layout of search form and search results

Trevor

#177015

This reply has been marked as private.

Anonymous

#177044

This reply has been marked as private.

Trevor

#177046

I did not edit any theme files, nor that copy file, in the end. If you look in the form at the Advanced Settings tab, all that was necessary was to force is_search, and to make sure the Ajax Container setting on the Display Results tab was corrected.

Anonymous

#177061

Done! Thank you very much for helping me all day.

If you have time, please help me customize the layout of the search form. Thanks again.

Anonymous

#177122

As you mentioned above, I realize that the key to solving the problem is to force is_search and select the appropriate Ajax Container as this will force the system to always display results on the search results page (not on an archive page), which has the specific sidebar. So we do not have to create a child theme in this case.

Trevor

#177125

This reply has been marked as private.

Trevor

#177170

For the form, the Custom CSS you are looking for would be this:

.searchandfilter ul li.sf-field-reset {
  display: inline-block;
  margin-right: 50px;
}
.searchandfilter ul li.sf-field-submit {
  display: inline-block;
}
.searchandfilter ul li.sf-field-reset input, .searchandfilter ul li.sf-field-submit input {
  width: 75px;
  background: #666;
  color: #fff;
}
.searchandfilter > ul > li select {
  width: 200px;
}
/* the next is 200px-(2*12px padding) - (2*1px border) */
.searchandfilter ul li.sf-field-search input {
  width: 174px;
}

I already added that in the WordPress Customiser for you.

Anonymous

#177186

Hi Trevor,

That’s exactly what I need.

However, in order for users to have more search options, I used the WP Tab Widget Pro. Unfortunately, the buttons are no longer on the same row. Maybe that’s because of the layout of that Tab plugin. Would you mind helping me solve that problem? I am very grateful for your help.

Trevor

#177189

oooh. That plugin has some badly (not very targetted) CSS. I have fixed the Custom CSS I wrote to this:

.wpt_widget_content .tab-content .searchandfilter ul li.sf-field-reset {
  width: 75px;
  display: inline-block;
  margin-right: 50px;
}
.wpt_widget_content .tab-content .searchandfilter ul li.sf-field-submit {
  width: 75px;
  display: inline-block;
}
.wpt_widget_content .tab-content .searchandfilter ul li.sf-field-reset input, .wpt_widget_content .tab-content .searchandfilter ul li.sf-field-submit input {
  width: 75px;
  background: #666;
  color: #fff;
}
.searchandfilter > ul > li select {
  width: 200px;
}
/* the next is 200px-(2*12px padding) - (2*1px border) */
.searchandfilter ul li.sf-field-search input {
  width: 174px;
}

Trevor

#177191

Did you test the forms to make sure they still worked like that?

[Author]

Posts