Search Results for '.searchandfilter custom css'

[Trevor]

There are many threads about adding custom CSS, such as this one (note that the form ID may need changing to match the ID of your form):

https://support.searchandfilter.com/forums/topic/sf-horizontal-the-final-solution/

[Anonymous]

Ah, nevermind. its inline block. Should anyone ever have the same question, stick this in your custom CSS:

.searchandfilter li[data-sf-field-input-type=checkbox] label {padding-right:10px;padding-left:0px}
.searchandfilter ul li{list-style:none;display:inline-block;padding-left:0px;padding:0px 0;margin:0}
.searchandfilter ul li li{padding:0px 0}

Am a bit surprised about these differences. Why keep a different layout as standard in free and pro? For me, I got the pro because I liked the free, and ended up having to stick my nose in the code. The point of getting pro quite often is to just pay instead of go through the misery of finding the right lines of code.
Happy with the plugin, but this was surprising

[Trevor]

Initial look gives something like this as Custom CSS:

.searchandfilter ul li {
  display: inline-block !important;
  padding: 10px !important;
}

The issue with horizontal forms is the amount of room you have available, otherwise it wraps to a second row 🙁

[Trevor]

Custom CSS:

@media only screen and (max-width: 767px) {
  .searchandfilter > ul > li {
    margin-bottom: 30px;
  }
  .searchandfilter > ul > li select, .searchandfilter > ul > li input {
    width: 193px;
  }
  .searchandfilter > ul label {
    display: block !important;
  }
}

[Trevor]

Hi

Your reply came back via the no-reply email box, but I have it now. That might have added a bit of a delay, sorry for that. If you can reply here on the forum itself that will speed up my replies 😉

OK, the issue is the way that browsers render select boxes, and constraining the width is hard. For you, some custom CSS will fix it, but remember that this code will ONLY work where the search form is vertical (for ths reason I have restricted the code to your form ID:

#search-filter-form-6905 .sf-field-tag label {display: block !important;}

If you don’t want it to quiet fill the column, you might want to also have something like this:

#search-filter-form-6905 .searchandfilter select.sf-input-select {max-width: 95%;}

Let me know how you get on with this.

[Trevor]

Hi

I can see the search form on the link you gave. Are you trying to remove the arrow image from the side of each item? That has been added by your theme. If you access to Custom CSS for the theme, or use a Custom CSS plugin, I think that this would remove them:

.widget .searchandfilter ul li {
  background: none !important;
}

I cannot see what you mean on the other issue as it is not possible to upload images to the forum. Instead you must use an image or file sharing site, upload your screenshot or image to that, and then share that as a link here. If you can show me that?

[Ross]

Hey Marina

Nice, I like what you’ve done 🙂

There is no inherent way to do this, its going to be some custom work,

What you will need to do is, have your search form on the page, but hidden with CSS – it must be present in order to update the results.

Then on the same page you would have the results.

You can then create buttons, that when clicked, update the date fields on the search form and then submit the search form – $('.searchandfilter').submit()

Its not too difficult, but you’d need to be comfortable with jQuery to implement something like this.

Thanks

[Ross]

Hey Kania

Really you are looking to use CSS to style your buttons – there is nothing built in.

In the demos, I didn’t add a single line of code for the styling of the buttons, however, the buttons were styled by the themes built in stylesheet.

To add your own CSS styles you would just need to target like:

.searchandfilter input[type=submit]
{
    background-color:#666666;
    color:#fff;
    padding:10px;
}

Of course, adding in any styles you want to apply.

You should probably add the above code to your themes style.css in the theme folder (at the bottom of the file), however, some themes prefer to add custom CSS in different way – refer to your theme for instructions on how to add custom CSS.

Thanks

[Ross]

You would need to use CSS:

.searchandfilter input[type=checkbox]
{
    background-color:#f00;
}

S&F also support some more advanced CSS customisations, using the label as this is directly after the checkbox, eg:

http://stackoverflow.com/questions/5275857/highlight-label-if-checkbox-is-checked

and

https://css-tricks.com/the-checkbox-hack/

Thanks

[Ross]

Hey there

Ok, so if you have come from the free version, and you would like to use a template from your them to display the results, first you must follow the instuctions here:

https://www.designsandcode.com/documentation/search-filter-pro/search-results/as-an-archive/

You want to display results as archive (much like the original S&F)

To answer your questions:

1) This is not an option, however S&F uses the class .searchandfilter on the form, so you can use this instead in your CSS

2) These fields can all be created using “post meta” fields, but first you must add the data to your search form. Check the docs here on how to add this custom type of data to your posts:

https://www.designsandcode.com/documentation/search-filter-pro/getting-started/adding-new-fields/#Adding_Post_Meta_Custom_Fields

3) I’m hoping this will no longer be an issue if you use the first link I sent you and setup as archive

4) I’m not sure I follow this, lets first fix the othe rthings and we can go from there.

Thanks