Search Results for 'filter style'

[Anonymous]

I put the following in my themes style.css but it only adjusts the padding between the taxonomy titles and the dropdowns, it doesn’t reduce space between the checkboxes.

.searchandfilter > ul > li
{
    padding: 0; !important;
}

Any ideas how to reduce the spacing between individual checkboxes?

Thanks,
Alex

[Anonymous]

yes the begin text:

About

Search & Filter is a simple search and filtering plugin for WordPress brought to you by Designs & Code.

It is essentially an advancement of the WordPress search box, adding taxonomy and post type filters to really refine your searches.

You can search by Category, Tag, Custom Taxonomy, Post Type or any combination of these easily – you can even remove the search box and simply use it as a filtering system for your posts and pages. Taxonomies and Post Types can be displayed as dropdown selects, checkboxes, radio buttons or multiselects.
Documentation

Advanced documentation and examples has now moved – find it on our Search & Filter Plugin Documentation.

Please find below limited documentation to get you started.
How To Use

To display Search & Filter all you need to do is a use a shortcode:
[searchandfilter taxonomies=”category,post_tag”]
This will display a search box, a category dropdown and a tag dropdown. You can use the shortcode within posts/pages and widget areas.

To use this within a theme file you simple need to call the do_shorcode function with the shortcode above within the theme file:
<?php echo do_shortcode( ‘[searchandfilter taxonomies=”category,post_tag”]’ ); ?>
Arguments

Examples for most of the arguments below can be found over on the Search & Filter Plugin Documentation.
Name Default Value Options Additonal Information
fields Comma seperated list of any field names and Public Taxonomies:

search
post_date
post_types
*public taxonomy names Example using all your public taxonomies (copy & paste!):
[searchandfilter taxonomies=”search,category,post_tag,post_format”]
types select Comma seperated list of any of the types found below:

select
checkbox
radio
multiselect

These types should only be used when the field is post_date:

date
daterange The order of values in this comma seperated list needs to match the fields list.
headings Comma seperated list containing any string value. Blank values are ommited completely and the heading will not display. The order of values in this comma seperated list needs to match the fields list.
hierarchical 0 Comma seperated list.

1 – display as hierarchical
*Any other value is ignored The order of values in this comma seperated list needs to match the fields list.
hide_empty 1 Comma seperated list.

0 – Shows empty taxonomies
1 – Hides empty taxonomies
*Any other value is ignored The order of values in this comma seperated list needs to match the fields list.
order_by name Comma seperated list of the following possible values:

ID
name
slug
count
term_group

This uses the values of “orderby” as defined on the WordPress site. The order of values in this comma seperated list needs to match the fields list.
order_dir ASC Comma seperated list containing:

ASC – ascending
DESC – descending

This sets the order of taxonomies terms for a given taxonomy and can be used in conjunction with order_by. The order of values in this comma seperated list needs to match the fields list.
post_types Comma seperated list of any post types (names) in the Public Post Types table below.

or set to:

all This can be used with or without post_type appearing in the field list.

When post_type appears in the field list, the post types listed here will be selectable in the post_type field.

When post_type does not appear in the field list, then all searches are retricted to the post types here.
class Any string Enter a class name here, or class names seperated by spaces to have them added to Search & Filter form. This allows individual styling of each Search & Filter instance.

Ommit to ignore.
submit_label Submit Any string This is the text label on the submit button.
search_placeholder Search … Any string This is the placeholder text that appears when no search term has been entered in the search field.
Name Default Value Options Additonal Information
Your Public Taxonomies

Name Label Post Types
category Categorieën post
post_tag Tags post
post_format Berichttype post
Name Label Post Types
Your Public Post Types

Note: the attachment post type is not available in this list.
Name Label
post Berichten
page Pagina’s
ccf_form Forms
ccf_submission Form Submissions
fmemailverification FM Email Verification
post_grid Post Grid
Name Label
Styling

Search & Filter uses standard inputs and selects, form elements are contained in an unordered list – styling should be easy. Please see CSS file for base styles used.
Search & Filter Prefers Clean URLs!

If any fields are submitted that have blank values they do not get added to the URL, for example, if the search box is empty when submitting, you will not find a ?s= in the URL.

In addition to this, if permalinks are enabled, when you submit a search, Search & Filter will try to remove category_name from the url and instead rewrites the URL to first obey a clean category URL with the rest of the query string following.

This url:
http://www.yourdomain.com/?s=searchterm&category_name=uncategorized&tag=shoes&customtaxonomy=customvalue

Becomes:
http://www.yourdomain.com/category/uncategorized/?s=searchterm&tag=shoes&customtaxonomy=customvalue

The built in WordPress rewrites wouldn’t normally handle this.
Links

Plugin Support Page & Discussion
Plugin Documentation
Plugin on WordPress.org
Plugin on Github

[Anonymous]

Here’s what I need

Im gonna make a “pre search form” in the home page, with only 1 or 2 field to filter.
ONce they click on “search” it goes to the “search and result” page BUT I need here to put ANOTHER search form with more fields (the complete one) and all the filter from this “complete” search form has to apply to the same result display (on same page)

How do I do this? when I create 2 search forms, the shortcode for display results are diferents. And if I only create 1 I don’t know how to hide all fields but just 1 or 2 and also I need to make diferent styles from the “pre search form” on the home that the “complete” search form on the search & result page.

Help please! thanks.

[Ross]

Hey Luca

You should add your custom CSS to the CSS file used by your theme, this is usually style.css but not always the case.

If you must find the plugin CSS, you can find it public/assets/css/search-filter.min.css – but if you change this file future plugin updates will lose your changes.

Thanks

[Anonymous]

So the plugin is calling some css&js files, and I understand it is using chosen jquery plugin to beautify the form.

But my search and filter form is not looking good at all (it’s css is the browser built-in defaults).

In fact, the only css the is implemented on my select-boxes by the plugin is this:

.searchandfilter select {
    min-width: 170px;
}

In my HTML I can indeed see calls to 3 css&js files:

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

This files are loaded OK but as I said I don’t see them making any difference on the page, making the form look any different.

How to make the form look nice (activate the “chosen” design)?

[Ross]

Hi Luca

In order to style your search form you must have some basic CSS knowledge.

Please see here the notes on how to customise:

http://www.designsandcode.com/documentation/search-filter-pro/getting-started/display-search-form/#Styling_Your_Search_Form

What you are asking for is something very specific to your site, and would require some custom coding.

I’ll give you a pointer though however, depending on your theme this may still not work – if you look at hte code you will notice the search field list item has a class for easy styling,

So the following CSS should convert S&F to a horizontal layout (depending on your theme) but then sets the search field to display block ,which means it will be on its own line.

.searchandfilter > ul > li
{
    display:inline-block;
}

.searchandfilter > ul > li.sf-field-search
{
    display:block;
}

Like I mentioned, this may not work in your setup – but its a good starting point.

Thanks

PS, please also ensure you are using S&F 2.0.2 (released 2 days ago).

[Anonymous]

Another question, is there a way to manipulate the html for the filtering itself? Or atleast target the css of the diferent search forms with an id or something so it can be styled differently from each other? Thank You.

[Anonymous]

Hi,

1. my custom post types were created by CPT UI. Each post types has it’s own taxonomies. There is an option to include them from your UI. However, it’s not showing in frontend. When I included “category” search, the only thing that showed up was WP-default categories. I am certain that I’m missing something that the doc, video did not show.

2. For tags, in dropdox mode, it displays at frontend like so:
tag1 (3)
tag2 (0)
tag3 (20)
The count is displayed beside the name of the tags. Is there an option to disable the “count” of each tag? Reason is, when I do multi-filter, the count is not good for those with “submit button” mode. For example, tag1 (3) may belong only to “post_type #1”. However, if user selects “post_type #2”, the tag1 (3) will still show as “3”, which confuses the user. I have some trouble with the Ajax and my own custom search result page (also using ajax). The autoload ajax feature only worked on first filter selection. Subsequent filter selection on same input box did not work and I’ll try to troubleshoot on my own first.

3. Your search result shortcode provides a handy way to reveal the filtered result. However, they are in a one-column picture-on-top words-below style. I wish to render filtered results using your results engine using my own style. The style should change depending on the originating S&F shortcode/id. I believe you’ve done through result.php in the plugin file. Appreciate if you could share some pointers.

Thanks

[Anonymous]

Sure, if you click this link and change a search option (like pick a beer style) then navigate to page 2 of the results, then try to change another style of other filter): http://craftstep.com/shop/

I’d also like to remove the quotations in the Search Results: “” page title if that’s at all possible.

Thanks for you quick help!

[Ross]

Hey Nina

The CSS really depends on your theme, and what styles it applies to the various elements – the above is a rough guide only – same applies here.

To target the list items for hte submit and reset, and position them next to eachother I would try something like:

.searchandfilter .sf-field-search, .searchandfilter .sf-field-reset
{
    display:inline-block;
}

Thanks