Search Results for '.searchandfilter custom css'

[Ross]

Ah yes, another use has posted about something similar.

I’m not planning on making the search forms completely customisable (as in controlling the html output) – but you can do a lot with just CSS.

However, I think maybe what you require is similar to what another user has posted here? – https://support.searchandfilter.com/forums/topic/showhide-child-categories-if-parent-checked-or-not/

Thanks

[Ross]

Hey Bill

Yeah this is just your themes CSS styling “taking over”…

So you’ll need to add some custom CSS to get it behaving a bit more like the other themes…

Here’s a start for you anyway:

.searchandfilter > ul > li
{
     padding: 10px 0;
}
.searchandfilter > ul li:before
{
    display:none;
}
.searchandfilter > ul > li input[type='checkbox'], .searchandfilter > ul > li input[type='radio'] 
{
    width:auto;
}

This should help get you started, and if you’re not seeing the changes you want try adding !important to the css rules.

Basically, the main mistake your theme is doing is setting all input to 100% width, this includes checkboxes… which it should not!

After this, there are some :before pseudo elements, which are adding the “>>” arrows to all your list items…

Thanks

[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

[Ross]

Hey Hovig!

You can completely customise the look of Search & Filter, you just need to be able to do some CSS.

In your theme’s CSS file, add the following:

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

If that does not work, add an important rule like this:

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

Here you can completely customise the spacing, border and other CSS.

Thanks

[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

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