Search Results for 'filter style'

[Trevor]

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.

[Trevor]

I think you are seeing default behavior of the browsers. Try instead to attach Select2 to the dropdowns, then style them. This post explains how (4th paragraph down):

https://support.searchandfilter.com/forums/topic/format-question/#post-221332

This post will also be helpful:

https://support.searchandfilter.com/forums/topic/customise-dropdown-combobox/#post-180345

[Anonymous]

How can I change the font and style of my search & filter forms?

[Anonymous]

I added this code in style.css

.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 {
  color: #000;
  border-color: #000 !important;
}
.searchandfilter > ul > li.sf-field-submit input {
  background: #e84c3d;
	color: #fff;
}

blue-form-bg .searchandfilter > ul > li label {
    background-color: blue;
}
beige-form-bg .searchandfilter > ul > li label {
    background-color: #f5f5dc;
}
.searchandfilter > ul > li input,
.searchandfilter > ul > li label select {
    background-color: #fff;
}

I added “.sandf-horizontal” css class to my fields.

In these pages I have horizontal view:
https://www.virusfree-europa.com/strutture/
https://www.virusfree-europa.com/operatori-autorizzati/

In this page I don’t have horizontal view:
https://www.virusfree-europa.com/

[Trevor]

That requires some simple custom CSS, that used on the demo page is this:

.searchandfilter li[data-sf-field-input-type="checkbox"] ul {
    max-height: 180px;
    overflow: auto;
}

We do not offer pre-made styles, as each user’s needs are often very different.

[Anonymous]

I have purchased it today.
Are there some custom styles?
I have over 100 categories and it is very long, i would like to have the checkbox option insede a box like Genres in your demo here and not full length

[Anonymous]

Hi!

There’s a lot of results in portfolio taxonomy I can’t change via css, because some text hasn’t a class to display none…

This is my HTML (shortcode) result code:

<div class="search-filter-results" id="search-filter-results-2627" data-paged="1" style="opacity: 1;">	
	Found 1 Results<br>
	Page 1 of 1<br>
	
	<div class="pagination">
		
		<div class="nav-previous"></div>
		<div class="nav-next"></div>
			</div>
	
			<div>
			<h2 data-fontsize="34" data-lineheight="38.08px" class="fusion-responsive-typography-calculated" style="--fontSize:34; line-height: 1.12;"><a href="https://coursalia.com/curso/excel-fundamentos-herramientas/">Excel: Fundamentos y herramientas</a></h2>
			
			<br>
Este curso online de excel ha sido por años el más cursado por alumnos de todo el mundo en la Universitat Politècnica de Valencia. Obtenga el certificado!

			<img width="378" height="225" src="Excel-Fundamentos-y-herramientas-1.jpg" class="attachment-small size-small wp-post-image" alt="Excel Fundamentos y herramientas" srcset="Excel-Fundamentos-y-herramientas-1-200x119.jpg 200w, Excel-Fundamentos-y-herramientas-1-300x179.jpg 300w, Excel-Fundamentos-y-herramientas-1.jpg 378w" sizes="(max-width: 378px) 100vw, 378px">
			

			

			<small>15/03/2020</small>

			
		</div>
		
		<hr>
			Page 1 of 1<br>
	
	<div class="pagination">
		
		<div class="nav-previous"></div>
		<div class="nav-next"></div>
			</div>
	</div>

Look the case of this words without tags in the code:

	Found 1 Results<br>
	Page 1 of 1<br>

So, how can I change the tags without modifying the plugin archives? Can I add a couple lines in functions.php to do this correctly?

Thanks in advance!

[Trevor]

Q1. Is it possible to filter post by year?
A1. At the moment, the only way to offer the user of your site a choice of just years would be if you had a custom field with just the years in. In V3 Pro addon (we hope to release this next month), you will have the option to add custom form filters, which may well allow you to do as you want.

Q2. Is there a way to separate sort control?
A2. We have received feature requests to allow the one form to be broken into parts to be placed (and styled) in different places (and differently styled) on the page.

We have taken those requests on board for our forthcoming V3 (which we hope to release in June). For example, you might have a form in WooCommerce that has a Search Box (text field), a Sort Order drop down, and then other fields (Product Categories, Product Tags, Variations, etc). You will be able to place the Search Box in the header, and the Sort Order above the products, and the rest of the form in the sidebar.

But, that is not possible right now.

[Anonymous]

Hi there,

I was asked to write my questions into the support forum:

As I am not a CSS pro, the documentation how to style the form horizontally did not work for me.

– I am using the DIVI builder, could you please explain what to fill in where (CSS class, Before, Main Element, After). Also I would like to make the Drop down Menue a little bit bigger (like 30% bigger).

– When the search doesn’t find matching articles or posts, there appears a standard-message, how can I change this?

– Is it possible to match the search plugin with the site search icon in the header (as the standard WP search is pretty weak).

Thanks for the support.

Best,
Felix

[Trevor]

To answer your questions in turn.

1. At the moment, the only way to offer the user of your site a choice of just years would be if you had a custom field with just the years in. In V3 Pro addon, you will have the option to add custom form filters, which may well allow you to do as you want.

2. Maybe you could use a checkbox and style the filters to look like buttons? This is possible using CSS to hide the checkboxes themselves. This is because you can select a checkbox by clicking its label, and you can style the label differently depending on whether the (hidden) checkbox is checked or not. The problem would be that, by default, checkboxes do not have a default set.