Search Results for 'filter style'

[Trevor]

You mean the ‘Party Size’ and ‘Bedrooms’?

Those hover colors are set by your browser. The only way to reliably style them is to change them to Select2 controls.

This post might help (ignore the first 3 paragraphs):

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

[Trevor]

I am loath to recommend themes, as there are so many good ones, and it most work fine with our plugin. You do not even need to find one that has Portfolio built in as a post type, as it is easy to add custom Post types and the custom taxonomies for those with plugins like Custom Post Type UI.

Our demo site uses the free Twenty Seventeen theme, for example. I would be inclined to use something like that to start with. Add the plugin I mentioned above and use that to make the Portfolio post type and a ‘category’ taxonomy for that called portfolio-category. I would then install the Post Grid plugin and our plugin, and set those up using this method:

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

I wouldn’t be too concerned about style and appearance, and instead I would focus on function.

There are a lot of free plugins that will help you enhance a theme like Twenty Seventeen, and there are a lot of helpful free resources on ‘how to …’ for it on the Internet.

[Trevor]

I am not sure if this works for you, as Custom CSS:

.searchandfilter[data-sf-form-id="2062"] li.sf-field-search label::after {
  font-family: FontAwesome;
  font-size: 24px;
  font-weight: normal;
  font-style: normal;
  content: "\f002";
  display: inline-block;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #fff;
  background: #000;
  position: relative;
  top: 3px;
  cursor: pointer;
 }

[Trevor]

At the moment, my login does not work (at least as an admin), I assume you switched it back off.

When set to Post Type Archive, a form takes control of the template for the archives page of the post type. With two forms on the page doing the same thing, there is the possibility that the two forms will conflict. One form will always be hidden, but it is still active. Also, when you select an option in one form, the other form will not know that this has happened.

So, we normally recommend just the one Post Type Archive form per post type. This does mean that, where you want the forms to be different between mobile and desktop, your only options are to style them differently, but the field types would still be the same (for example, a field cannot be checkbox on desktop and dropdown select on mobile). This also means that the form has to remain in the same location on the page, and that can be an issue requiring careful planning.

In any event, the form is currently set to ‘Custom’ display results method.

I had thought that you wanted to be able to select more than one filter term before submitting the form. with Auto Submit ON, for each selection, the form will submit. with Auto Submit OFF, of course you must add a submit button to the form to allow the user to send the query.

As to whether the form would work, it does not look setup to integrate with Elementor right now? As per this post:

https://support.searchandfilter.com/forums/topic/how-can-i-search-elemntor-column-while-retaining-the-design-of-that-column/#post-209754

[Anonymous]

Hello!

I have repeated results, both in infinite scroll and in results with normal pagination type. I made the web a couple of years ago, and created a file for the results that is this:

<?php
/**
 * Search & Filter Pro
 *
 * Sample Results Template
 *
 * @package   Search_Filter
 * @author    Ross Morsali
 * @link      http://www.designsandcode.com/
 * @copyright 2015 Designs & Code
 *
 * Note: these templates are not full page templates, rather
 * just an encaspulation of the your results loop which should
 * be inserted in to other pages by using a shortcode - think
 * of it as a template part
 *
 * This template is an absolute base example showing you what
 * you can do, for more customisation see the WordPress docs
 * and using template tags -
 *
 * http://codex.wordpress.org/Template_Tags
 *
 */
?>

<div class="sections_group">
  <div class="section ">
    <div class="section_wrapper clearfix">
      <div class="column one column_blog">
        <div class="blog_wrapper isotope_wrapper">
<?php
if ( $query->have_posts() )
{
	?>

 <div style="clear: both;">      
	<h4 style="font-weight: bold; text-align: center;"><?php echo $query->found_posts; ?> cursos encontrados</h4>
	<!--Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />

	<div class="pagination">

		<div class="nav-previous"><?php next_posts_link( 'Older posts', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Newer posts' ); ?></div>
		<?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
	</div>-->
</div>     
      <div class="  <div class="search-filter-results">
">

	<?php
	while ($query->have_posts())
	{
		$query->the_post();

		?>
		<div class="post-item isotope-item clearfix post type-post status-publish format-standard has-post-thumbnail hentry ">
  <div class="image_frame post-photo-wrapper scale-with-grid image" style="margin-bottom: 0 !important;">
    <div class="image_wrapper"><a href="<?php the_permalink(); ?>">
      <div class="mask"></div>
      <img width="960" height="502" src="<?php the_post_thumbnail("small"); ?>" class="scale-with-grid wp-post-image" alt="<?php the_title(); ?>"></a>
    </div>
  </div>
  <div class="post-desc-wrapper">
    <div class="post-desc">
      <div class="post-head">
        <!--<div class="post-meta clearfix">
          <div class="author-date"><span class="vcard author post-author"><span class="label">Publicado por </span><i class="icon-user"></i> <span class="fn"><?php the_author(); ?></span></span> </div>

        </div>-->
      </div>
      <div class="post-title">
        <h4 class="entry-title" itemprop="headline"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
        <?php the_excerpt(); ?>
      </div>
    </div>
  </div>
</div>

		<?php
	}
	?>

<div style="clear: both;">

	<div class="pagination">

		<div style="text-align: center; font-weight: bold;"><span class="nav-previous"><?php previous_posts_link( '< ANTERIOR'); ?></span>&nbsp;&nbsp;&nbsp;<strong>Página <?php echo $query->query['paged']; ?> de <?php echo $query->max_num_pages; ?></strong>&nbsp;&nbsp;&nbsp;<span class="nav-next"><?php next_posts_link( 'SIGUIENTE >', $query->max_num_pages ); ?></span></div>
		<?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
	</div>	
 </div>     

	
	<?php
}
else
{
	echo '<h4 style="font-weight: bold; text-align: center;">No hay más cursos para los criterios indicados.</h4>';
	echo '<p style="font-weight: bold; text-align: center;"><a href="#" class="search-filter-reset" data-search-form-id="2889" data-sf-submit-form="always">Reiniciar filtros y mostrar todos los cursos.</a></p>';
}
?>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

the web is http://www.sweetit.es/cursos
with the view normal pagination type it looks like this
https://www.sweetit.es/wp-content/uploads/2020/02/pagination-type-normal-page-01.jpeg
https://www.sweetit.es/wp-content/uploads/2020/02/pagination-type-normal-page-02.jpeg

with the view without scroll
https://www.sweetit.es/wp-content/uploads/2020/02/pagination-type-infinite-scroll.jpeg

If I put results per page 300 (total) does not repeat any results.

I don’t know how to make the results look good, can you help me? If you need more information, you can write to me at sweetit@sweetit.es
Thank you!

[Anonymous]

Thanks for a great plugin!

I´m using SF with WP job manager and would like the search results to display the same way as when using the built in filter in WP job manager. I have tried using what I assume is the template for displaying search results in WP job manager specifically content-job_listing.php by copying it to the theme folder as explained in the docs. This does not work, maybe I´m using the wrong template or something. But the results does not display the right way.

So now I´m wondering if I can edit the SF results.php template in a way that would fetch the meta information in the WP job manager job_listing custom post type. Meta like location, company thumbnail, job expiration date and so on, and display it in the search results. Then I could style it with css myself. Is there a way to do this? I´m not a very advanced user so I probably need a little dumbed down explanation.

Kind regards
Martin

[Anonymous]

Thank you for the advice. I created the themify-shoppe-child folder with style.css and functions.php files.
The content of functions.php is: (and looks like it’s working!). Thanks.

<?php
/**
** activation theme
**/
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . 'https://cdn2.wpformation.com/style.css' );

}
add_action('multilingualpress.metabox_after_update_remote_post', 'mlpress_post_saved', 10, 2);

function mlpress_post_saved($relationshipContext, $post) {
    $post_ID = $post->ID;
    do_action('search_filter_update_post_cache', $post_ID);
}

[Anonymous]

Hello,

I started using the Search & Filter Pro plugin with a DIVI theme, with the addon installed. It shows up, but the style is wrong (starts by showing 1 column instead of 2, then, after selecting another category it just breaks, see ss).

https://ibb.co/cJQL9Bz – 1 column instead of 2
https://ibb.co/WctFK0z – it breaks and resizes down to this level.

Any ideas?

Thank you!

[Anonymous]

Hi,
I’ve searched as long as possible in the forum.
I’ve read the documentation.

The ajax form search fields and reset, works well.
But I can’t get infinite scrolls to work.

I’ve tryed with shortcode. I’ve put the shortcode in the WP classic editor. I’ve copied results.php in a subfolder of my theme (that is elementor hello theme) and I pasted in, the code of the results-infinite-scroll.php template.
In the settings the result url is filled etc etc.
Nothing. Scrolling nothing happens.

Then I’ve tryed with custom setting. I’ve set a custom template in my theme with the code of the results-infinite-scroll.php template customized.
In the settings the result url is filled etc etc.
Ajax container = #main
Pagination Type is set to infinite scroll; show loading icon checkbox is checked, but it’s not loaded.
Post result selector = .search-results-item (but I’ve tryed without it, too)
Infinite Scroll Container: = empty (but I’ve tryed with #search-filter-results-list, too)
I’ve tryed all the other fields of the Ajax Pagination setting section, but nothing.
I’ve deactivated all plugin except ACF Pro, Custom post type UI and S&F Pro of course. Nothing
I’ve changed the theme with a default one. Nothing.

The page is on a live web site that I’m developing. I can give the url but not publicly

Thanks in advance for your help

My custom template code:

<?php
/*
Template Name: Eventi
*/
get_header(); 
?>
<style>
.content {
    width:1440px;
    margin:0 auto;
    padding:20px;
}
.search-results-wrapper {
    display:flex;
    flex-wrap: wrap;
}
.search-results-item {
  /*flex: 1 0 21%;*/
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-basis: 25%;
}
.content-wrapper {
  flex: 1;
}
.post-thumb {
    height:300px;
    width:100%;
    background-position:center;
    background-size:cover;
    border-radius: 0 80px 40px 80px;
    border: 1px solid #15255E;
}
.post-thumb .term {
    display:inline-block;
    padding:5px 20px;
    background-color:#ccc;
    color:#FFF;
    min-width:200px;
    text-align:center;
    font-size: 20px;
    font-weight: 500;
}
.post-content {
    display:none;
    font-size:1rem;
  color:#010326;
  padding-top:20px;
  width:100%;
}
.post-title {
    color: #009cd3;
    font-size: 28px;
    margin-top:30px;
}
.post-event-date,
.post-event-place {
    font-size: 16px;
    font-weight: 400;
    color: #009cd3;
}

.search-results-wrapper .btn-wrapper {
    margin-top:30px;
}
.search-results-wrapper .toggle_btn {
    width:100px;
}
.search-results-wrapper .btn-hover-last {
    width:75px;
}
.search-results-wrapper .btn-hover-first {
    margin-right:40px;
}
.search-results-wrapper .btn-hover-wrapper {
  text-align:left;  
  position:relative;
  padding-right:20px;
  display:inline-block;
}

.search-results-wrapper .toggle-wrapper:after {
  content:"\f067";
  font-size: 16px;
  top: 0px;
  right: 0px;
  position: absolute;
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  transition: all .5s ease-out;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: 'FontAwesome';
  color:#15255e;
}
.search-results-wrapper .toggle-wrapper.active:after {
  transform: rotate(-180deg);
  content:"\f068";
  color:#009ad2;
}
.search-results-wrapper .btn-hover-wrapper a
{
  display:block;
  position:relative;
  cursor:pointer;
}
.search-results-wrapper .btn-hover-wrapper img
{
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
.search-results-wrapper .btn-hover-last {
    padding:0;
}
.search-results-wrapper .btn-hover-last a {
  transform: translateY(-3px);
}
.search-results-wrapper .btn-hover-wrapper .hover-image
{
  position:absolute;
  top:0px;
  left:0px;
  opacity:0;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.search-results-wrapper .btn-hover-wrapper:hover img
{
 opacity:0; 
}

.search-results-wrapper .btn-hover-wrapper:hover .hover-image
{
 opacity:1; 
}

</style>

	
	<div class="content">
	
		<div class="inner-content">

			<main class="main" role="main" id="main">
			    
				
				<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

                    <article id="post-<?php the_ID(); ?>" <?php post_class(''); ?> role="article" itemscope itemtype="http://schema.org/WebPage">
                    						
                    	<header class="article-header"><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                    		<h1 class="page-title"><?php the_title(); ?></h1>
                        </header> <!-- end article header -->

                        <section class="entry-content" itemprop="text">
                    	    <?php the_content(); ?>
                    	</section> <!-- end article section -->
                    
                    </article> <!-- end article -->
                    
                 <?php endwhile; endif; ?>
                 
                <?php wp_reset_query(); ?>

                 
                    
            	<div>
            		<?php echo do_shortcode('[searchandfilter id="1675"]'); ?>
            	</div>

                    <?php
                    
                    $args = array('post_type' => 'eventi');
                    $args['search_filter_id'] = 1675;
                    $query = new WP_Query($args);
                    
                    if ( $query->have_posts() ) {
                    ?>
                    
                    Found <?php echo $query->found_posts; ?> Results<br />
                    
                    	<div class="search-results-wrapper" id="search-filter-results-list">
                        	<?php
                        	while ($query->have_posts())
                        	{
                        		$query->the_post();
                        		$content = get_the_content();
                        		?>
                        		<div class="search-results-item search-filter-result-item">
                        			
                        			<div class="content-wrapper">
                            		    <?php 
                            				if ( has_post_thumbnail() ) :
                            				    $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium-large'); 
                            		    ?>
                            				<div class="post-thumb" style="background-image:url(<?=$featured_img_url ?>)">
                            				    <?php 
                                                    $terms = get_the_terms( $post->ID, 'tipologia' ); 
                                                    foreach($terms as $term) :
                                                ?>
                                                        <span class='term' style="background-color:<?php the_field('tax_tipologia_color', 'tipologia' . '_' . $term->term_id) ?>">
                                                          <?php echo $term->name; ?>
                                                        </span>
                                                <?php
                                                    endforeach;
                                                ?>
                            				</div>
                            			<?php 
                            			    endif;
                            			?>
                            			<h2 class="post-title"><?php the_title(); ?></h2>
                            			<div class="post-event-date">
                            			    <span class="from-date"><?php the_field("start_date"); ?></span>
                            			    <?php 
                            			        if ( get_field("end_date") ) :
                        		            ?>
                            			            <span class="to-date"> - <?php the_field("end_date"); ?></span>
                            			    <?php       
                            			        endif;
                            			    ?>
                            			</div>
                            			<div class="post-event-place"><?php the_field("luogo"); ?></div>
                                    </div>
                                    
                                    <div class="btn-wrapper">
                                        <div class="btn-hover-wrapper toggle-wrapper btn-hover-first">
                                          <a class="toggle_btn" data-id="post-<?php the_ID(); ?>">  
                                            <img src="https://supernovae.kreas.it/wp/wp-content/uploads/2019/12/Scopri-di-piu-2.png" alt="Scopri di piu">
                                            <img src="https://supernovae.kreas.it/wp/wp-content/uploads/2019/12/Scopri-di-piu_over.png" class="hover-image" alt="Scopri di piu over">
                                          </a>
                                        </div>
                                        <div class="btn-hover-wrapper btn-hover-last">
                                          <a href="<?php the_field("event_url"); ?>" target="_blank" title="Scopri di piu">
                                            <img src="https://supernovae.kreas.it/wp/wp-content/uploads/2019/11/vai-al-sito-e1575911625135.png" alt="Vai al sito">
                                            <img src="https://supernovae.kreas.it/wp/wp-content/uploads/2019/11/vai-al-sito-over-e1575911641927.png" class="hover-image" alt="Vai al sito">  
                                          </a>
                                        </div>
                                        <div class="post-content toggle-content" id="post-<?php the_ID(); ?>">
                                            <?=$content ?>
                                        </div>
                                    </div>
                                    
                        		</div>
                        		
                    		<?php
                        	}
                        	?>
                    	</div>
                    <?php
                    }
                    else
                    {
                    	?>
                    	<div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'>
                    		<span>Non sono stati trovati eventi</span>
                    	</div>
                    	<?php
                    }
                    ?>
				
			    					
			</main> <!-- end #main -->
			
			

			

		</div> <!-- end #inner-content -->

	</div> <!-- end #content -->

<script>
jQuery(document).on('click', ".toggle_btn", function(event){
    var post_id = jQuery(this).attr("data-id");
    jQuery(this).parent().toggleClass('active');
    jQuery("#" + post_id).toggle(500);
    event.preventDefault();
});    
</script>
<?php get_footer(); ?>

[Trevor]

If that doesn’t happen if you turn Ajax OFF, AND if you apply those styles using JavaScript (jQuery), then you need to apply them after our Ajax triggers, which can happen after 2 events;

sf:ajaxformfinish -> after Auto Count runs to update numbers
sf:ajaxfinish -> after the form submits

Sample snippet:

<script type="text/javascript">
	$(function(){
		$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		    console.log("ajax finish");
		    // your code
		});
	}(jQuery));
	$(function(){
		$(document).on("sf:ajaxformfinish", ".searchandfilter", function(){
			console.log("ajax complete");
			// your code
		});
	}(jQuery));
</script>