Search Results for 'filter style'

[mcguffin]

How do you style the dropdowns to look the same. Currently the category dropdown is styled differently than the other filter dropdowns (date, title, etc.).

Thanks

Add New Note to this Reply

[Ross]

Ok cool, well it looks like the search form is pretty messed up because of some CSS conflicts – I think some of your other styles are loading after the S&F ones and causing some pretty major issues.

For this you could try 2 things…

1) Make S&F CSS load after (it seems the plugin x-shortcodes loads its CSS after, and is being too general with the styling so is affecting this plugin).. for this you would need to edit a S&F file..:

wp-content/plugins/search-filter-pro/public/class-search-filter.php

Then head to line 66 and change

add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_styles') );
to
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_styles', 11 ) );

Change the “11” for an even lower number like 100 if it doesn’t work, this basically tells it to load later and after other CSS… Let me know if this works and I’ll look at including it in a future update.

Alternatively you could try adding the following CSS to your site (I have just been editing your CSS in my browser to see if I could get your search form looking better)

.searchandfilter > ul, .widget_text .textwidget  .searchandfilter > li
{
  padding:0 !important;
  margin:0 !important;
}
.widget_text .textwidget .searchandfilter > ul > li
{
  margin-bottom:10px !important;
}
ul.chosen-results
{
  border:0 !important;
}
.widget_text .textwidget .searchandfilter > ul
{
  margin: 0 !important;
  border: 0 !important;
  list-style: none !important;
}

.widget_text .textwidget .searchandfilter ul.chosen-results > li
{
  list-style:none !important;
}

.widget_text .textwidget .searchandfilter ul.chosen-choices
{
  margin:0 !important;
}

.widget_text .textwidget .searchandfilter ul.chosen-results
{
  margin:0 !important;
  padding-left:0 !important;
}
.widget_text .textwidget .searchandfilter ul.chosen-results li
{
  padding-left:5px !important;
}

.widget .chosen-drop ul li, .widget .chosen-drop ol li
{
  border:0 !important;
}
#text-4
{
  margin-top:20px !important;
}

About the ” ” – when you enable “hierarchical” in the admin, S&F adds the space to child elements so that they look like children in the dropdown, unfortunately, when you select them, this space is kept… This is technically a bug, but it may be a limitation of the combobox (a script dependency called chosen.js).. You’re best bet is to loose hierarchical in this case for now.

Right now I’m looking at your Ajax but hope that will help for now! 🙂

Add New Note to this Reply

[Ross]

Hey highfilter – it is strange – I didn’t manage to recreate the problem – is this on safari on a Mac?

From what I can see are you only adding CSS styling to the form? If so, I think there will be a better way to do all this, using CSS only – I can help you with too.. for example all your styles under
.search-custom-class you can just make a rule in your own CSS and add like this:

.searchandfilter ul li
{
    border:1px solid #f00;
    background-color:#0f0;
}

(Horrible choice of colours I know)

And if you are not seeing the styles being applied, then you could try adding important rules:

.searchandfilter ul li
{
    border:1px solid #f00 !important;
    background-color:#0f0 !important;
}

Let me know

Add New Note to this Reply

[david jolly]

Hello,

It’s possible in functions.php but it seems there’s no handle when you enqueued your styles and scripts :

wp_enqueue_style( $this->plugin_slug . '-chosen-styles', plugins_url( 'assets/css/chosen.min.css', __FILE__ ), array(), self::VERSION );
		wp_enqueue_style( $this->plugin_slug . '-plugin-styles', plugins_url( 'assets/css/search-filter.css', __FILE__ ), array($this->plugin_slug . '-chosen-styles'), self::VERSION );

Regards

Add New Note to this Reply

[Highfilter]

I have a Search & Filter Pro search form using AJAX, and use custom JS to style some of the dropdowns on page load. I also have checks to re-enable the scripts on sf:ajaxstart and sf:ajaxfinish events, which works – but the issue seems to be when you first visit the page using Safari as a browser, the search form instantly reloads and my custom JS doesn’t get fired again.

Is there an initialization event I can run my custom JS on as well as the on start and finish? It only seems to be an issue when viewing the page in Safari, all other browsers just load the custom JS and it works. The on start and finish events work properly in Safari, but only after interacting with the form, not when the page initially loads up.

Add New Note to this Reply

[Ross]

Hey onlinedude

1) Search & filter provides very little styling so that you (and theme developers) can do this yourself – so you need to be familiar with CSS… If you are happy to add styling via css then my recommendation would be to add your styles to the “style.css” in your theme…

Then you can target the Search & Filter form quite easily:

.searchandfilter li
{
    background-color:#f00;
}

Also if you inspect the HTML generated, nearly all fields are wrapped in a class that is related to the field name – ie = .sf-category if you had a category field in there…

2) Unfortunately the plugin does not allow for “upto $500” for example – I hope to add this in the future.

If your data is stored as post meta, then you would select a post meta field, and choose a number range option – then your users can do a search with a from - to range.

Add New Note to this Reply

[Ross]

Hey Paula

You need to be able to do some css in order to modify the look.

The best place is to modify your style.css in your theme folder.

Then you can in rules for the search form:

.searchandfilter input
{
background-color:#ccc;
}

For example, to see the CSS from the plugin though, just go in the plugin folder:

search-filter-pro\public\assets\css\search-filter.css

But when you update the plugin you will lose your changes, so best to stick to the theme style.

🙂

Add New Note to this Reply

[Paula Klaman]

What is the name of the file from the plugin where we can change the style of the search and filter form?

Thanks

Add New Note to this Reply

[Max Waterman]

NB, I have the whole site under git, so I can always revert mistakes – my own and if someone accidentally updates the plugin/etc. My safety-net 🙂

Ok, so my changes…let me check git diff with the first version to remind me…

1) I added a new widget called ‘multiselect2’, so I have a new file called ‘multiselect2.js’ that implements the widget’s functionality (mostly click handlers).
2) in of-taxonomy-walker.php, I added multiselect2 by duplicating multiselect and modifying; so I have another else in function start_el() that produces the html I want for each option – basically just a label followed by a checkbox (with appropriate classes/etc)
3) in search-filter.php I:
3.1) added an action for my js script,
3.2) in get_search_filter_form() I added a ‘multiSelect2Submit’ class to the submit element (when it’s a multiSelect2 element)
3.3) in build_taxonomy_element() I added some complexity to the h4 element when it’s a multiSelect2
3.4) also added another else for multiselect2 to call generate_wp_multiselect2()
3.5) added generate_wp_multiselect2() to produce different html (not select, but a simple div wrapper)
4) style.css has a bunch more styles to make multiselect2 look how I want (including a couple of animations).

Thanks about it, really.

What do you think?

Max.

Add New Note to this Reply

[Ross]

Hey Pamella

Thanks, always nice to hear positive feedback 🙂

RE your issues… basically customising the results page is as you mention to do with template development which is slightly out of the ‘realm’ of support for this plugin but I can point you in the right direction.

Basically, the results template works the same as a post archive page, which means that is uses the main loop to display your posts – therfore some of those plugin for sure won’t be compatible, because they run their own queries to get results so bear this in mind when going forward.

RE the post content displaying, take a look at the WordPress documentation about the loop – you can use all the functions/template tags from here (http://codex.wordpress.org/The_Loop) so to display an excerpt rather than the full content replace the_content() with the_excerpt() – just check the docs.

To display results in a grid like fashion I think these tutorials will help:
http://www.wpbeginner.com/wp-themes/how-to-create-a-grid-display-of-post-thumbnails-in-wordpress-themes/

http://www.transformationpowertools.com/wordpress/posts-in-columns-a-new-twist-on-an-old-problem or http://www.transformationpowertools.com/wordpress/playing-with-columns-stacking-posts-grid-style

What I’m sure would be even better would be using a masonry style layout, but this is more difficult and requires more work, so depends on how comfortable you are coding – there are plenty of tutorials out there if you just google “display posts as masonry” – and look for tutorial not plugins which will often not use the main loop.

Thanks

Add New Note to this Reply