Search Results for 'filter style'

[Trevor]

In general terms, I am sorry to say that I cannot do this work for you within our support. However, I will try to help where I can.

Q1. Change the HTML of the filter
A1. The current version of the plugin does not allow you change the structural HTML of the form. It is possible to make some changes to the inner elements of the form fields using this filter:

https://www.designsandcode.com/documentation/search-filter-pro/action-filter-reference/#Filter_Input_Object

We are well on our way to code the next major release, V3, which will allow you do do as you wish.

Q2. Disable Search Form CSS
A2. In the plugins settings you can only opt to disable ALL assets. To stop just the front end CSS from loading, you would need to dequeue it in your theme’s functions.php file. If you are using a commercial theme, it is best instead to implement a child theme and edit the functions.php file of that (otherwise, when you update the theme, the changes would be lost). The code would look like this:

function dequeue_sandf_style() {
  wp_dequeue_style( 'search-filter-plugin-styles' );
  wp_deregister_style( 'search-filter-plugin-styles' );
}
add_action( 'wp_print_styles', 'dequeue_sandf_style' );

I think that would do it.

Q3. Style the Filter with my own CSS
A3. This is something you will need to do yourself

Q4. Add JavaScript functionality for the show/hide of each filtercomponent.
A4. Again something you would need to do. Other users have done this, so I know it is possible.

Again, if you have any questions, please get back to me. I will leave this thread open for you to be able to do that.

[Anonymous]

Oke, let me clarify a bit more and answer your question after. These images present the Design i made in Sketch:
https://imgur.com/7WzF3Uz
https://imgur.com/rARSOgI
https://imgur.com/a/H2Ry4

Right now i have the default Search & Filter html output working, as you can see in these screenshots:
https://imgur.com/bC9VGkf
https://imgur.com/Zv0qqzU

I want to turn the default Search Form:
https://imgur.com/Zv0qqzU
Into this Search Form:
https://imgur.com/a/H2Ry4

In order to this i think it’s best to:
1. Change the HTML of the filter
2. Disable Search Form CSS
3. Style the Filter with my own CSS
4. Add JavaScript functionality for the show/hide of each filtercomponent.
The functionality and HTML code i wish to have is like the filter Airbnb developed:
https://www.airbnb.nl/s/homes

I’m developing locally, so got nothing working online yet. Is this enough information for you?

[Trevor]

Yes. It will require some coding skills, but it is not hard. You first need to read this page in our documentation.

You can change the HTML, the style tags, delete stuff, add stuff.

[Anonymous]

OK, first is solved, thanks a lot!

<?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() )
{
	?>
	
	
	<?php
	$nPosts = 0;
	while ($query->have_posts())
	{
		$query->the_post();
		$nPosts=$nPosts+1;
		$big= ($nPosts % 3);
		$isNextBig=($nPosts+1)%3;
		
		if($big=="0") echo"<br /> <div class='et_pb_column et-last-child'>";
		else if($isNextBig=="0")echo"<div class='et_pb_column et_pb_column_1_2 et-last-child'>";
		else echo"<div class='et_pb_column et_pb_column_1_2'>";
		?>

			<?php 
				if ( has_post_thumbnail() ) {
				    ?>
				    <a>">
				    <div class="cont">
						<div class='postimage' style='background-image: url("<?php the_post_thumbnail_url("large");?>")'></div>
						<div class="overlay_post">
						</div>
					</div></a>

					<?php
				}
			?>

	      <div class="below_image">
	          	
			<h2><a>"><?php the_title(); ?></a></h2>
			
			<?php echo do_shortcode("[yasr_visitor_votes_readonly]"); ?>
			
			<div class="desc"><?php the_excerpt(); ?></p></div>
			
			<p class="meta"><?php the_date();echo" | by ";?>
						
			<a>');" href="javascript:void(0);"><?php the_author();?></a></p>

			<p class="meta"><?php $categories = get_the_category(); 
			
			foreach($categories as $cat){
				
			?>
			
			<a>slug;?>');" href="javascript:void(0);"><?php echo $cat->cat_name;?></a>
			
			<?php
				}?>
			
			<?php $terms = get_the_terms($post->ID, "sport"); $count = count($terms); if ( $count > 0 ){ foreach ( $terms as $term ) {?>
			<a>slug;?>');" href="javascript:void(0);"><?php echo $term->name;?></a>
			<?php
			} } ?></p>
			<br/>
			
			<p><a>">READ MORE</a></p>
		</div>	
		</div>
		
		<?php
	}
}
else
{
	echo "Ops! no results found!";
}
?>
<script type="text/javascript">
function searchCat(slug){
jQuery('select[name="_sft_category[]"]').val(slug).change();
}
function searchAuthor(slug){
jQuery('select[name="_sf_author[]"]').val(slug).change();
}
function searchSport(slug){
jQuery('select[name="_sft_sport[]"]').val(slug).change();
}
</script>

[Trevor]

Ah, I understand. This has been covered before, so it might be best discussed between us on a call, but another user has asked what I suspect is much the same question:

https://support.searchandfilter.com/forums/topic/how-to-style-the-search-data/

Do bear in mind that what you want is very much custom coding for now, but we hope to make this much easier in the next major release of the plugin, V3, which is due in 2018.

[Trevor]

Option 1 is not so much a filter as a menu, and whilst you could place that menu next to, and style it the same as, the search form, it would (and probably should) not be part of the search form.

2 and 3 are Post Meta fields, and should work normally. Be aware that ACF has 3 meta keys per field. One starts with an underscore, one starts ‘fieldxxxxxxxxxx’ and the other is the slug of the field without an underscore. It is this last one that you should use.

[Trevor]

I split this post from this thread:

https://support.searchandfilter.com/forums/topic/how-to-start-styling/

I had not seen your post at the end of that post, so I apologise for the late reply.

Perhaps you could explain what you have (maybe a link/URL) and what you want to do to it by way of styling (maybe an image – which you would need to upload to an image sharing site and give me the link – or maybe a link/URL to a sample styled layout on your site)?

[Trevor]

Bear in mind I am working a bit blind here?

This should remove the bits you din’t want, and enable our infinite scroll:

<?php

/* Blog Style A */

if ( $query->have_posts() ) {
	?>
	
<div class='search-filter-results-list'>
	
	<?php
	while ($query->have_posts()) {
		$query->the_post();

        $cb_post_id = $post->ID;
?>
	<div class='search-filter-result-item'>
        <article id="post-<?php the_ID(); ?>" <?php post_class('cb-blog-style-a cb-module-e cb-separated clearfix'); ?>>
        
            <div class="cb-mask cb-img-fw" <?php cb_img_bg_color( $cb_post_id ); ?>>
                <?php cb_thumbnail( '260', '170' ); ?>
                <?php cb_review_ext_box( $cb_post_id ); ?>
            </div>

            <div class="cb-meta clearfix">

                <h2 class="cb-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

                <?php cb_byline( $cb_post_id ); ?>

                <div class="cb-excerpt"><?php echo cb_clean_excerpt( 160 ); ?></div>
                
                <?php cb_post_meta( $cb_post_id ); ?>

            </div>

        </article>
	</div>
        <?php

    } ?>
</div>
<?php
//    cb_page_navi( $cb_qry );
}
else
{
	?>
	<div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'>
		<span>End of Results</span>
	</div>
	<?php
}
//wp_reset_postdata();

?>

A couple of lines are disabled because I think that they are not needed.

[Anonymous]

After this I’ve also started another topic to style the results page (if you are working on this anyway that would really really great :))

sort-results-per-category-divi-theme

Thank you so much for all your time, effort and trouble helping me out! Its highly appreciated.

[Anonymous]

Hello,

I am trying to configure the search and filter with my Divi and Woocommerce store. (https://mechanicoutlet.com/shop). I can’t seem to be able to style the plugin at all the way I’m used to. No matter what I put into the custom CSS box it doesn’t do anything…

I would also like to use the ajax feature so the page doesn’t have to reload every time a box is checked and my category list is so long it wouldn’t be practical to have a submit button on the bottom.

Also, I would like to be able to add a search to the home page that would then display the results on the shop page so the customer can filter.

Can you please help me with these items and possibly other issues you may see. Thank you!

-David