Designing the search form and product archive

Anonymous

#235207

Hello,

I am using S&F Pro and I want to design my search form, because certain fields are not displayed correctly and I want the design to fit the rest of the website.

You can see the search form here: https://kevini1.sg-host.com/shop/
I want the input fields to be correctly sized, they need to be less high and more wide. I want less space between the fields and the title fonts to be bigger. A background with a border would be a very nice addition.

When looking at the product archive, it would be better if all the titles of the products were aligned to the bottom. Can this be changed?

I would really appreciate support with regards to these questions.

Kind regards,

Kevin

Trevor

#235214

The style of the search I can help you with. Any annotated screenshots (of what you want) you can make to help me would be appreciated. You will need to upload images to an external file sharing site, like dropbox, and share the link(s) with me.

However, the style of the results comes from your theme or Elementor. That we have no control over, and I am sorry I cannot help you with that.

Anonymous

#235266

Thanks a lot for your quick response Trevor.

Ive made an image showing what I want (excuse my lack of graphic skills). See the image here: https://www.dropbox.com/s/h3udzjymsmgfoey/searchinventflow.jpg?dl=0

I would like the text to have the following color, font and size: #02213d, Teko, size: 16px (as seen in the image). Please also use this color for borders. The background color is #F3F3F3. The slider color does not have to be changed. You can use a dark grey color for the text inside fields.

If you need any additional information, please let me know. If you could create this for me, it will be hugely appreciated.

Kind regards,

Kevin

Anonymous

#235330

This reply has been marked as private.

Trevor

#235394

I have been working on this, but need you to make a change, if possible. Go to WP Admin -> Search & Filter -> Settings and change the Combobox script to Select2 (it is currently set to Chosen) and let me know when you have done this?

Anonymous

#235480

Hi Trevor, great! I just changed it. If you need me to do anything else, let me know.

Thanks!

Trevor

#235600

This Custom CSS is my first hit at it:

.searchandfilter[data-sf-form-id="2703"] select.sf-input-range-select {
  border: 1px solid #aaa;
  padding: 2px 0;
  border-radius: 4px;
}
.searchandfilter[data-sf-form-id="2703"] > ul > li:first-child {
  margin-left: 0;
  padding-top: 0;
}
.searchandfilter[data-sf-form-id="2703"] li.sf-field-search h4 {
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 3px;
  padding-top: 0;
}
.searchandfilter[data-sf-form-id="2703"] h4 {
  font-size: 18px;
  font-weight:600;
}
.searchandfilter[data-sf-form-id="2703"] select,
.searchandfilter[data-sf-form-id="2703"] .select2-container .select2-results__option,
.searchandfilter[data-sf-form-id="2703"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: black;
  font-size: 14px;
}
.searchandfilter[data-sf-form-id="2703"] li.sf-field-search input,
.searchandfilter[data-sf-form-id="2703"] li.sf-field-search label,
.searchandfilter[data-sf-form-id="2703"] .select2-container {
  min-width: 100%;
}
.searchandfilter[data-sf-form-id="2703"] > ul {
  margin: 20px;
  border: 1px solid #002f60;
  padding: 15px;
}
.searchandfilter[data-sf-form-id="2703"] .meta-slider {
  max-width: calc(100% - 12px);
}
.searchandfilter[data-sf-form-id="2703"] li .sf-meta-range.sf-meta-range-slider label  {
  width: calc(50% - 9px);
}
.searchandfilter[data-sf-form-id="2703"] li .sf-meta-range.sf-meta-range-slider input {
  width: 100%;
  max-width: 100%;
}

However. The following need specifying:

font colors for each field
font sizes for each field
border colors for the form and fields

Trevor

#235602

Oh, and form background color.

Anonymous

#236215

Hello Trevor,

Thank you for your efforts. The font colors for the headings of the field should be #02213d with a font size of 16px. The font colors for the text within the fields should be #00000 with a font size of 14px.

Border color for the form and fields should be #02213d. The form background color can be #F3F3F3.

If you need anything else let me know.

P.s. where do I add your CSS to? Customize > Additional CSS?

Kind regards,

Kevin

Trevor

#236254

If there is no other place to add custom CSS in your theme, then Customize – Additional CSS will suffice.

I think this is it then:

.searchandfilter[data-sf-form-id="2703"] select.sf-input-range-select {
  border: 1px solid #aaa;
  padding: 2px 0;
  border-radius: 4px;
}
.searchandfilter[data-sf-form-id="2703"] > ul > li:first-child {
  margin-left: 0;
  padding-top: 0;
}
.searchandfilter[data-sf-form-id="2703"] li.sf-field-search h4 {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 3px;
  padding-top: 0;
}
.searchandfilter[data-sf-form-id="2703"] h4 {
  font-size: 16px;
  font-weight:600;
  color: #02213d;
}
.searchandfilter[data-sf-form-id="2703"] select,
.searchandfilter[data-sf-form-id="2703"] .select2-container .select2-results__option,
.searchandfilter[data-sf-form-id="2703"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: black;
  font-size: 14px;
}
.searchandfilter[data-sf-form-id="2703"] li.sf-field-search input,
.searchandfilter[data-sf-form-id="2703"] li.sf-field-search label,
.searchandfilter[data-sf-form-id="2703"] .select2-container {
  min-width: 100%;
}
.searchandfilter[data-sf-form-id="2703"] > ul {
  margin: 20px;
  border: 1px solid #02213d;
  padding: 15px;
  background: #f3f3f3;
}
.searchandfilter[data-sf-form-id="2703"] .meta-slider {
  max-width: calc(100% - 12px);
}
.searchandfilter[data-sf-form-id="2703"] li .sf-meta-range.sf-meta-range-slider label  {
  width: calc(50% - 9px);
}
.searchandfilter[data-sf-form-id="2703"] li .sf-meta-range.sf-meta-range-slider input {
  width: 100%;
  max-width: 100%;
  font-size: 14px;
  color: #000;
  border-color: #02213d;
}
.searchandfilter[data-sf-form-id="2703"] .select2-container .select2-selection,
.select2-container--open .select2-dropdown--above {
  border-color: #02213d;
}
.searchandfilter[data-sf-form-id="2703"] .select2-container, .select2-container--open {
  font-size: 14px;
  color: #000;
}
.select2-container--open .select2-search--dropdown .select2-search__field {
  border-color: #02213d;
}

[Author]

Posts