Forums Forums Search Search Results for 'filter style'

Viewing 10 results - 281 through 290 (of 496 total)
  • Author
    Search Results
  • #122467

    Trevor
    Participant

    With Avada, the only way I know to get it to reliably work is to use our Shortcode Display Results method. This gives you a basic layout, but you are free to customise this. The guide to customising is here.

    At that point you can then edit this to change the HTML structure, add parts, remove parts, use CSS classes from your theme to style, and so on.

    #121123

    In reply to: Translation problem


    Anonymous
    Inactive

    Hi Ross! Just a few comments from the dev who helped me style the filter (after the translation issues were resolved thanks to you!), in case that helps 🙂

    #1. The filter works slowly.
    When we choose one of conditions, filter refresh search result for couple of second.
    I did not notice it before.

    #2. Also when we change language, filter not always works from the first time.
    I switched the language and chose “Downtown”. The filter did not work.

    #3.On the search page in French, when we choose one of conditions, the page scrolls up.
    I did not notice it before.

    #120979

    Trevor
    Participant

    You will need to enqueue the files. My concern is that this should be automatic, so something about your theme is turning that off, probably to save resource loading.

    Like this:

    <link rel='stylesheet' id='search-filter-plugin-styles-css'  href='YOUR_URL/wp-content/plugins/search-filter-pro/public/assets/css/search-filter.min.css' type='text/css' media='all' />
    <script type='text/javascript' src='YOUR_URL/wp-content/plugins/search-filter-pro/public/assets/js/search-filter-build.min.js'></script>
    <script type='text/javascript' src='YOUR_URL/wp-content/plugins/search-filter-pro/public/assets/js/select2.min.js'></script>

    How many others are needed, I do not know, but those are the ones a site I have just made uses.

    #120411

    Trevor
    Participant

    I just replied to another of your threads, but here you give me some more information, so I can first direct you to this post:

    https://support.searchandfilter.com/forums/topic/divi-blog-module-grid/#post-99184

    Note that the Ajax container will vary according to whether you use a grid or a list view.

    Secondly, as to the CSS, you would have to add Custom CSS to style the search form itself. If you search for the key words horizontal CSS you will find some snippets on this forum, but I can help with fine tuning it. All I would need are olive pages with what you have and what you want to to resemble.

    #118140

    In reply to: Visual Results?


    Trevor
    Participant

    BTW, this is the grid making results.php I used for your genesis theme:

    <?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
     *
     */
    
    if ( $query->have_posts() )
    {
    	?>
    	
    	Found <?php echo $query->found_posts; ?> Results<br />
    	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>
    	
    	<?php
    	$odd_check = 1;
    	$first_check = 1;
    	
    	while ($query->have_posts())
    	{
    		$query->the_post();
    
    		if ( $odd_check == 1 ) {
    			$odd_class = " odd";
    		} else {
    			$odd_class = "";
    		}
    		if ( $first_check == 1 ) {
    			$first_class = " first";
    		} else {
    			$first_class = "";
    		}
    		?>
    		<article class="simple-grid one-third<?php echo $odd_class;?><?php echo $first_class;?> post-<?php echo get_the_ID();?> post type-post status-publish format-standard entry">
       <a href="<?php the_permalink(); ?>" class="alignnone">
       <?php the_post_thumbnail("small");?>
    			</a>
    			<header class="entry-header">
        <h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
       </header>
    		</article>
    
    		<?php
     	$odd_check++;
    		if ( $odd_check == 3 ) $odd_check = 1;
    	 $first_check++;
    		if ( $first_check == 4 ) $first_check = 1;
    
    	}
    	?>
    	<div style="clear: both;">
    		Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?>
    	</div>
    	
    	<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>
    	<?php
    }
    else
    {
    	echo "No Results Found";
    }
    ?>

    Anonymous
    Inactive

    thanks I found some jquey

    
    $(document).ready(function() {
    $('.searchandfilter h4').each(function() {
    $(this).prepend('<img src="xxx/wp-content/uploads/2017/06/1497224577_ic_keyboard_arrow_down_48px.png" class="arrow_down" /><img src="http://storenet.mgtestsite.com/wp-content/uploads/2017/06/1497224605_ic_keyboard_arrow_up_48px.png" class="arrow_up" style="display:none" />');
    });
    
    $( "li ul").addClass( "list" );
    
    	 $(".searchandfilter h4").click(function() {
    	  $(this).find('img').toggle();
    	  $(this).nextAll('ul.list').first().toggle('slow');
    	
    });
    });
    #114400

    Anonymous
    Inactive

    Hi,
    Here is the results.php, but I have another for costumization.

    RESULTS.PHP

    
    <?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
     *
     */
    
    if ( $query->have_posts() ) {
    	?>
    
    	Found < ? php echo $query->found_posts;
    	?>
    	Results
    	<br/> 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>
    
    	<
    	? php
    	while ( $query->have_posts() ) {
    		$query->the_post();
    
    		?>
    		<div style="display: inline-block; width:50%;">
    			<?php 
    				if ( has_post_thumbnail() ) {
    					echo '<p>';
    					the_post_thumbnail("small");
    					echo '</p>';
    				}
    			?>
    		</div>
    		<div style="display: inline-block; width:50%;">
    			<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    			<p>
    				<?php the_category(); ?>
    			</p>
    			<p>
    				<?php the_tags(); ?>
    			</p>
    			<p>
    				<small>
    					<?php the_date(); ?>
    				</small>
    			</p>
    			<p><br/>
    				<?php the_excerpt(); ?>
    			</p>
    		</div>
    
    		<
    		/div>
    
    		<hr/>
    		<?php
    		}
    		?> 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> <
    		? php
    	} else {
    		echo "No Results Found";
    	}
    	?>
    

    2553.PHP

    
    <?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
     *
     */
    
    if ( $query->have_posts() ) {
    	?>
    
    	<div style="float: left;">
    		<strong>
    			<?php echo $query->found_posts; ?>
    		</strong> resultado(s)</div>
    	<div style="float: right;">Pág.
    		<?php echo $query->query['paged']; ?> de
    		<?php echo $query->max_num_pages; ?>
    	</div>
    	<div style="clear: both;"></div>
    	<hr>
    
    	<div class="pagination" style="width: 100% !important;">
    
    		<div style="float: right;">
    			<?php next_posts_link( '<span class="ion-arrow-right-c"></span>', $query->max_num_pages ); ?> </div>
    		<div style="float: left;">
    			<?php previous_posts_link( '<span class="ion-arrow-left-c"></span>' ); ?>
    		</div>
    		<div style="clear: both;"></div>
    		<?php
    		/* example code for using the wp_pagenavi plugin */
    		if ( function_exists( 'wp_pagenavi' ) ) {
    			echo "<br />";
    			wp_pagenavi( array( 'query' => $query ) );
    		}
    		?>
    	</div>
    	<div style="clear: both;"></div>
    
    	<
    	? php
    	while ( $query->have_posts() ) {
    		$query->the_post();
    
    		?>
    
    		<div style="float: left; width: 50%;  padding-bottom: 50px;">
    			<?php 
    				if ( has_post_thumbnail() ) {
    					echo '<p>';
    					the_post_thumbnail("small");
    					echo '</p>';
    				}
    			?>
    		</div>
    
    		<div style="float: left; width: 50%; padding-left: 20px; padding-bottom: 50px;">
    
    			<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    			<p>
    				<?php echo do_shortcode('[pods field="resumo_objectivos"]'); ?>
    			</p>
    			<p>
    				<?php echo do_shortcode('[pods field="datas"]'); ?>
    			</p>
    			<p>
    				<?php echo do_shortcode('[pods field="preco"]'); ?>
    			</p>
    			<p>
    				<?php echo do_shortcode('[pods field="duracao"]'); ?>
    			</p>
    		</div>
    
    		<hr/>
    		<div style="clear: both;"></div> <
    		? php
    	}
    	?>
    
    	<div class="pagination" style="width: 100% !important;">
    
    		<div style="float: right;">
    			<?php next_posts_link( '<span class="ion-arrow-right-c"></span>', $query->max_num_pages ); ?> </div>
    		<div style="float: left;">
    			<?php previous_posts_link( '<span class="ion-arrow-left-c"></span>' ); ?>
    		</div>
    		<div style="clear: both;"></div>
    		<?php
    		/* example code for using the wp_pagenavi plugin */
    		if ( function_exists( 'wp_pagenavi' ) ) {
    			echo "<br />";
    			wp_pagenavi( array( 'query' => $query ) );
    		}
    		?>
    	</div>
    	<div style="clear: both;"></div>
    
    	<
    	? php
    } else {
    	echo "Não foram encontrados resultados";
    }
    ?>
    
    #113103

    In reply to: Edit field boxes


    Trevor
    Participant

    OK

    This CSS styles pretty much everything on the button. Change or delete what you want!

    .searchandfilter input[type="submit"] {
      border: 1px solid #ddd;
      border-radius: 3px;
      color: #fff;
      background: #ddd;
      font-size: 14px;
      padding: 0.7em;
      line-height: 16px;
      cursor: pointer;
      color: #666;
      text-align: center;
      margin-top: 44px;
      font-weight: 700;
    }
    #112598

    In reply to: Translation problem


    Anonymous
    Inactive

    Hi Trevor! Sorry for the delay, here’s what the developer said, let me know your thoughts!
    Thanks again so much

    I created new search template for page in French according to the Trevor’s recommendations.
    I fixed the styles for it.

    But I noticed that the filter for the page in French does not work correctly.
    When we select any option filter tries to search results in English.

    When we launch these pages in the first time, results look good.
    This is link to the filter in English: https://intheloup.la/filter/
    This is link to the filter in French: https://intheloup.la/fr/filtre/

    Search result in English looks good too: https://intheloup.la/filter?_sft_where=downtown
    Search result in French is incorrect https://intheloup.la/fr/filtre/?_sft_ou=downtown

    I noticed that in the address bar request to the database is always in English.
    ?_sft_where=downtown and ?_sft_ou=downtown

    Search is carried out by category, perhaps you do not have a translation of categories or posts in French are not in those categories.
    I try to find a solution to this issue on the internet forums.
    Maybe Trevor will be able to help us with this problem.

    #112096

    In reply to: Placeholder


    Anonymous
    Inactive

    Unfortunately this solution didn’t work either so the solution I came up with was to copy the code produced by your search widget and then alter the placeholder attribute with the following solution…

    <form data-sf-form-id=’276′ data-is-rtl=’0′ data-maintain-state=” data-results-url=’/results’ data-ajax-url=’/?sfid=276&sf_action=get_data&sf_data=results’ data-ajax-form-url=’/?sfid=276&sf_action=get_data&sf_data=form’ data-display-result-method=’shortcode’ data-use-history-api=’1′ data-template-loaded=’0′ data-lang-code=” data-ajax=’1′ data-ajax-data-type=’json’ data-ajax-target=’#search-filter-results-276′ data-ajax-pagination-type=’normal’ data-ajax-links-selector=’.pagination a’ data-update-ajax-url=’1′ data-only-results-ajax=’1′ data-scroll-to-pos=’0′ data-init-paged=’1′ data-auto-update=’1′ action=’/results’ method=’post’ class=’searchandfilter’ id=’search-filter-form-276′ autocomplete=’off’ data-instance-count=’1′>

      <li class=”sf-field-search” data-sf-field-name=”search” data-sf-field-type=”search” data-sf-field-input-type=””> <label><input placeholder=”” style=”font-family:Arial, FontAwesome” name=”_sf_search[]” class=”sf-input-text” type=”text” value=”” title=””></label>

    </form>

Viewing 10 results - 281 through 290 (of 496 total)