Search Results for 'filter style'

[Ross]

Hey Paula

You can find the frontend CSS file here: plugins\search-filter-pro\public\assets\css\search-filter.css

However I do not recommend you update this, I would add any custom CSS in your themes style.css.

A very basic rule would look like:

.searchandfilter
{
    border:1px solid #f00;
}

Thanks

[Anonymous]

Script which needs to be connected

<link rel='stylesheet' id='fancybox-css'  href='http://test.pandoragroup.ru/wp-content/themes/Boutique/epanel/page_templates/js/fancybox/jquery.fancybox-1.3.4.css?ver=1.3.4' type='text/css' media='screen' />

[Anonymous]

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

[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! 🙂

[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

[Anonymous]

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

[Anonymous]

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.

[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.

[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.

🙂

[Anonymous]

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

Thanks