Forums › Forums › Search & Filter Pro › Designing the search form and product archive

Viewing 10 posts - 1 through 10 (of 19 total)
1 2
  • Anonymous
    (Private)  February 28, 2020 at 2:20 pm #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
    (Private)  February 28, 2020 at 3:15 pm #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
    (Private)  March 2, 2020 at 8:28 am #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
    (Private)  March 2, 2020 at 2:56 pm #235330
    This reply has been marked as private.
    Trevor
    (Private)  March 3, 2020 at 11:00 am #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
    (Private)  March 3, 2020 at 9:24 pm #235480

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

    Thanks!

    Trevor
    (Private)  March 5, 2020 at 10:42 am #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
    (Private)  March 5, 2020 at 10:43 am #235602

    Oh, and form background color.

    Anonymous
    (Private)  March 11, 2020 at 8:26 am #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
    (Private)  March 11, 2020 at 12:04 pm #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
Viewing 10 posts - 1 through 10 (of 19 total)
1 2