Search Form & Results Styling

Anonymous

#244363

Good evening,

First and foremost, I just want to say thank you for this plug-in. Amazing stuff!! I’ve created an e-commerce platform of sorts and I’m using the “Alizee” theme on WordPress. People can sign up on my platform and create posts using my “WordPress User Frontend” form. An example of a post will be a textbook for instance, and the details would be name, retail price, selling price, etc.

I use “Search & Filter Pro” to help my users filter the items by category, price, etc. I’ve selected “Using a Shortcode” as my display results method. As expected, it is a straightforward display on the front-end of my platform. In your experience with this plug-in, what are simple ways that I can improve the overall layout and design of the search form and results display. At the moment it’s very blocky, and I’d prefer it to look sleeker if possible. I’m not looking for anything crazy, as I just want it to be aesthetically pleasing.

The page that I need help with is: https://www.thecollegexchange.com/search-page/

Please let me know your thoughts, thank you so much!!

Milton

Trevor

#244433

There are two issue here; the form and the results.

You have chosen to use for now our Shortcode display results method, which means that the style of the display is somewhat basic, but can be customized by yourself:

https://searchandfilter.com/documentation/search-results/using-a-shortcode/#customising-the-results

It depends what content you want (what taxonomies, images, description, custom fields) and layout you want, as that will determine how easy it will be to do. a simple alternative that would improve the look of the results would be to follow this guide:

https://searchandfilter.com/documentation/3rd-party/post-grid/

Unless your theme also comes with a page builder plugin?

As to the form, that would require custom CSS (styling). Whilst I can create CSS, I am not able to advise on what the style should like like. You need to find a form you prefer and let me know so that I can look at that exemplar form and maybe make something for you.

Anonymous

#245393

Thank you so much for the help here thus far! The “Post Grid” plug-in really helped with the design of the results feed. In terms of the search form, at this point the only changes I would like to make include adding an underline underneath my current search form header “Search & Filter” where I can change the color of it whenever I want, make the “available fields” titles bold (such as Search, Category and Price on my page), and make the field boxes underneath the titles less “boxy” and rounding out the edges a bit more.

As two other quick questions:

-Can I insert some code so that the entire post description shows under the post?
-How can I get rid of the side-widget (Categories) on my “Search & Filter” page?

My current page is: https://thecollegexchange.com/search-page/

Thank you again!!

Trevor

#245528

Not in the same order.

The sidebar has the widget in. Is it just this page you don’t want the form to show there, or remove it from all pages?

You want an underline here?

https://www.screencast.com/t/o8bdPOC8

If so, the custom CSS is:

.page-id-1309 .post-1309 > .entry-header > .entry-title {
  border-bottom: 2px solid green;
  padding-bottom: 10px
}

Or something like that. The padding is the space between the text and the line.

Anonymous

#245604

The custom CSS worked perfectly for the underline under the main title, thank you!

In terms of the sidebar widget, I just want it removed from this “Search & Filter” page. My goal is that the posts in the results feed will then fill the whole page instead of 2/3 of it as it stands now.

Any thoughts of how I can make the “available field” titles bold text (Search, Category, Price…)?

Trevor

#245606

More custom CSS for you:

.page-id-1309 #primary {
  width: 100%;
}
.page-id-1309 #secondary {
  display: none;
}
.searchandfilter[data-sf-form-id="1313"] h4 {
  font-weight: 700;
}

Anonymous

#245612

Beautiful code for the bold fields titles and getting rid of the sidebar widget!

As the remaining questions:
-Is there some css code I can use to change the color of the price range slider to whatever I want? It’s currently blue right now, would love to also make it the yellow color of the site
-Is there css code I can use to make the field boxes underneath the titles less “boxy” and round out the edges a bit more?
-Can I insert some code so that the entire post description shows under each post?

Truly, thank you so much for the help with everything so far!

Trevor

#246182

Slide color and form ‘beauty’:

.searchandfilter[data-sf-form-id="1313"] .noUi-connect {
  background-color: #edd100;
}
.searchandfilter[data-sf-form-id="1313"] > ul > li.sf-field-search input.sf-input-text,
.searchandfilter[data-sf-form-id="1313"] > ul > li.sf-field-post-meta-selling_price input,
.searchandfilter[data-sf-form-id="1313"] > ul > li.sf-field-category select {
  border: none;
  border:solid 1px #ccc;
  border-radius: 4px;
}
.searchandfilter[data-sf-form-id="1313"] > ul > li.sf-field-search input.sf-input-text {
  padding: 4px;
}
.searchandfilter[data-sf-form-id="1313"] > ul > li.sf-field-post-meta-selling_price input,
.searchandfilter[data-sf-form-id="1313"] > ul > li.sf-field-category select {
  padding: 6px;
}

As to content, I think that you have to edit the Post Grid, go to edit the Layout:

https://www.screencast.com/t/DotpJ86k

And change the Post Excerpt source to Post Content:

https://www.screencast.com/t/QgVQ3ki8

I think. You might need to increase the word limit also.

Anonymous

#247261

This has all been an amazing help! Thank you so much Trevor!

Trevor

#247421

Thanks for getting back to me. I will close this thread for now.

[Author]

Posts