Search Results for 'filter style'

[Trevor]

Are you using our Shortcode display results method? You might find this post a better method:

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

If you want to continue to use the shortcode method, pagination can be styled (with numbers) using the free WP-PageNavi plugin. If you want to use Infinite scroll instead, you must copy the contents of the infinite scroll results PHP template found in the templates folder of our plugin, create a folder in your child theme folder named search-filter and make a new file there called results.php with the content of that exemplar file.

[Anonymous]

What kind of thing did you have in mind Trevor?

I’ve tried the following code to add a new list item before the 3rd from last:

$('#search-filter-form-1203 ul:first-child()').find(' > li:nth-last-child(3)').before('<li class="li-new">New</li>');

This successfully adds a new li tag in the place I require, which I can style and make use of:

However, as soon as I filter the results, the new li tag is replaced with a duplication of one of the existing li tags, containing the search fields:

Can you think of a method that won’t interfere with the filtering?

Thanks,

Ash

[Trevor]

You need to separate out groups, branches or parent/child tags into separate custom taxonomies. In the case of your form, this means you plan to use tags three times, so you really need a new taxonomy for the children (Capacity, Region and Venue Style).

In general, you can use a particular Taxonomy, such as Category, (or Tags, each Taxonomy and each Custom Field) only once in the form. This post tries to explain this a bit better (you can use a plugin to switch category terms from category to any new taxonomy that you make, so it is not so hard to do). It is a really awful preachy lecture I wrote:

https://support.searchandfilter.com/forums/topic/multiple-categories-combination/#post-55166

Sorry about the tone, but the message is right and it links to good plugins (except taxonomy switcher I think).

Taxonomy switcher is a ‘use once and remove’ type of plugin, and it uses ‘hidden’ features in WordPress that have not changed for about 2 years.

Let us say that you have Categories (as WordPress calls them) on some posts, and some of them are fruit types. For example, Apple. Now you decide to have a separate taxonomy called Fruit Type. You may have hundreds of posts with those fruit types already in Categories, and don’t want to retype them all again. Let us say the the Apple ‘term’ has an ID # of 234 (they all have ID numbers). You tell Taxonomy Switcher to move the term 234 from Categories to Fruit Types, and it does all the work for you. You can do a whole bunch of IDs at once, all you need is their ID numbers.

IF you went in to one of our forms in admin, to the Tags, Categories & Taxonomies settings tab, find the line for Categories (in this case) and use the search to ‘add’ all the ones you want to move, then you will see in the settings box all the ID numbers you need to be able to do this. So, cut them from that box and paste them in to Taxonomy Switcher.

Be wary if you have child terms though (those which have a parent), as the parent may have to be moved also, or you may need to re-define the children as parents instead before you move them.

[Anonymous]

Ok I have tried that and now its spits out even more code:

[et_pb_section bb_built=”1″ next_background_color=”#ffffff” _builder_version=”3.24″ use_background_color_gradient=”on” background_color_gradient_start=”#004363″ background_color_gradient_end=”#001d39″ background_color_gradient_direction=”90deg” background_color_gradient_end_position=”85%” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” z_index_tablet=”500″][et_pb_row _builder_version=”3.24″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” z_index_tablet=”500″][et_pb_column type=”4_4″][et_pb_post_title _builder_version=”3.24″ meta=”off” featured_image=”off” text_color=”light” text_orientation=”center” text_shadow_horizontal_length=”text_shadow_style,%91object Object%93″ text_shadow_horizontal_length_tablet=”0px” text_shadow_vertical_length=”text_shadow_style,%91object Object%93″ text_shadow_vertical_length_tablet=”0px” text_shadow_blur_strength=”text_shadow_style,%91object Object%93″ text_shadow_blur_strength_tablet=”1px” title_text_align=”center” title_text_shadow_horizontal_length=”title_text_shadow_style,%91object Object%93″ title_text_shadow_horizontal_length_tablet=”0px” title_text_shadow_vertical_length=”title_text_shadow_style,%91object Object%93″ title_text_shadow_vertical_length_tablet=”0px” title_text_shadow_blur_strength=”title_text_shadow_style,%91object Object%93″ title_text_shadow_blur_strength_tablet=”1px” meta_text_shadow_horizontal_length=”meta_text_shadow_style,%91object Object%93″ meta_text_shadow_horizontal_length_tablet=”0px” meta_text_shadow_vertical_length=”meta_text_shadow_style,%91object Object%93″ meta_text_shadow_vertical_length_tablet=”0px” meta_text_shadow_blur_strength=”meta_text_shadow_style,%91object Object%93″ meta_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” z_index_tablet=”500″ background_color=”rgba(255,255,255,0)” locked=”on” /][et_pb_text admin_label=”Pathway Assessment Blueprint – H5″ _builder_version=”3.24″ text_text_align=”center” text_text_color=”#ffffff” text_text_shadow_horizontal_length=”text_text_shadow_style,%91object Object%93″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length=”text_text_shadow_style,%91object Object%93″ text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength=”text_text_shadow_style,%91object Object%93″ text_text_shadow_blur_strength_tablet=”1px” text_orientation=”center” link_text_shadow_horizontal_length=”link_text_shadow_style,%91object Object%93″ link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length=”link_text_shadow_style,%91object Object%93″ link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength=”link_text_shadow_style,%91object Object%93″ link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length=”header_text_shadow_style,%91object Object%93″ header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length=”header_text_shadow_style,%91object Object%93″ header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength=”header_text_shadow_style,%91object Object%93″ header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_align=”center” header_5_text_shadow_horizontal_length=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_blur_strength_tablet=”1px” custom_margin=”-1em|||” custom_padding=”0px|||” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” z_index_tablet=”500″ background_layout=”dark” header_5_text_color=”#ffffff” locked=”on”]

When it doesn’t spit out code it instead displays the actual content of the page as a whole. The goal of the filter for these pages are to just display the title, the tag, the category and that’s it. Thoughts?

[Trevor]

Our form (filter panel) is relatively unstyled, so that you can apply custom CSS to it to style it as you want.

[Anonymous]

I’m trying to style the Results page for my Divi site. I’ve got a nice styled template for my CPT page but once the search and filter page loads, it’s kind of a mess. I’d like the results page to look like this (http://dev.fourthtrimestercollective.com/providers/) PW: Maine.
If you just select “Birth Center”from the form and submit, you’ll see how it’s different. I would like to have the image on the left with the text to the right for each instance if possible. I’m not sure how to do that in the php.

[Trevor]

You have some style (not from our plugin) that is shaping the button:

#top .pagination .current, #top .pagination a, #top .fullsize .template-blog .pagination a {
    float: left;
    height: 35px;
    width: 35px;
    line-height: 35px;
    text-align: center;
    padding: 0;
    border-radius: 100px;
    margin-right: 3px;
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.2);
}

It is this part:

#top .pagination a {
    border-radius: 100px;
}

So, this should remove that:

#top .search-filter-results .pagination a {
    border-radius: 0;
}

[Anonymous]

Hello,
I would like to filter an elementor post post widget on the same page, so I followed your instructions on how to integrate with elementor pro (https://searchandfilter.com/documentation/3rd-party/elementor/), but 2 issues came up:

1. What if my post grid widget and filter is applied to an elementor template? In this case I cannot add the full URL path of the page, since multiple pages/posts will be using the template and hence also the post grid widget and filter. Is there a work-around?

2. I also tried to apply the search and filter to a single page. Now the filter is working – it’s loading on the same page, but the problem is that it messes up the design of the post grid widget (I have used the card style). I wish I could attach an image but what seems to be happening is that the image in the widget is doubled so that what is displayed is first the post image then a blank space equal to the size of the image and then finally the rest of the post card. Have you seen this issue before?

Thank you

[Anonymous]

Hello,
I have a development site at w3.tourismproperties.co.nz
There is a Search Filter search bar on the home page. It is nestled within/above a carousel.

When one loads the page on a desktop the search bar is just fine. You can resize the loaded page to mobile and the search bar behaves as expected.
However, if you load the page from mobile, or reload it on desktop in a mobile emulation, quite often the search form elements don’t get styled by what I expect if jquery-ui.
There are no js errors shown.

Do you know anything about S&F Pro script loading on mobile?
Is there a directive or something I need to change so the search form elements get the jquery-ui treatment on mobile?
Thank you for your help.
Don

[Anonymous]

Last thing, how can I style the dropdown menu in a cleaner way, such as the “Film Certificate” filter in your demo ? : https://demo.designsandcode.com/sfpro-movie-reviews/