Search Results for '.searchandfilter custom css'

[Trevor]

You will need to use custom CSS, such as:

.searchandfilter[data-sf-form-id="8759"] ul {
  padding: 0;
}
.searchandfilter[data-sf-form-id="8759"] > ul {
  padding: 20px;
}
.searchandfilter[data-sf-form-id="8759"] .sf-date-prefix {
  min-width: 45px;
}
.searchandfilter[data-sf-form-id="8759"] h4 {
  color: green;
  /* font-size: 24px; */
  /* font-weight: 700; */
}

I have commented out two lines, to show how to change font size and weight. You could also change font here. This will give you some ideas I think, but if you need more help, can you tell me what specifically needs to change and to what?

The fonts are all inherited from your theme.

[Trevor]

Remove this custom CSS you already used:

.searchandfilter > ul > li {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
}

Replace that with this custom CSS:

@media (min-width: 768px) {
  .searchandfilter[data-sf-form-id="36"] .sf-field-reset:before {
    content: "";
    display: block;
    height: 12px;
  }
  .searchandfilter[data-sf-form-id="36"] > ul > li {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px 0 0;
  }
  .searchandfilter[data-sf-form-id="36"] > ul > li:last-child {
    padding: 0;
  }
}
@media (max-width: 768px) {
  .searchandfilter[data-sf-form-id="36"] li {
    text-align: center;
  }
  .searchandfilter[data-sf-form-id="36"] > ul > li {
    padding: 0;
  }
  .searchandfilter[data-sf-form-id="36"] .sf-field-reset {
    padding-top: 11px;
  }
}

You may need to adjust the numbers slightly to meet your needs.

[Trevor]

The only option we can offer, using custom CSS, is as the Genres field in our demo shows:

https://demo.searchandfilter.com/movies/

That is made using this Custom CSS:

.searchandfilter li[data-sf-field-input-type="checkbox"] ul {
    max-height: 180px;
    overflow: auto;
}

We do not have an accordion option, and I do not have any code snippets to share with you that you might be able to use.

Beware of adding/changing the HTML structure of the form and fields as this may break functionality of the plugin, which relies to some extent on the existing HTML structure of the form and fields.

[Anonymous]

Hi Travis, I’am working on it (excuse me the delay). First of all, following your previous link, I added to my functions.php the following script

	  function Select2Custom(){
	
		if (is_page(204)){?>
			<script>
				(function ( $ ) {
					$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
						$('select.sf-input-select').select2();
					});
				}(jQuery));
				jQuery(document).ready(function($){
				$('select.sf-input-select').select2();
				});
			</script>
			<?php
		}
	  }
	  add_action('wp_head', 'Select2Custom');

But the select dropdown still shows a search input field which I don’t want. Secondly, the css rules I try to overwrite are not accepted. Do you have any suggestion? Thanks

[Trevor]

The titles of filters are optionally added by you the designer. It is this setting (which you should leave blank, and, by default, it is blank):

https://www.screencast.com/t/W8BjhumkF

You might find the filters better styled if you add the select2 script to them, as described here:

https://support.searchandfilter.com/forums/topic/configure-harvesthq-in-elementor-pro/#post-238775

The only other thing I notice is that the fields are all the same width, for which you would need custom and responsive CSS. This search on our forum should give you some snippets to look at:

https://support.searchandfilter.com/forums/search/.select2-container/

[Trevor]

Try adding this to the customizer Addtional CSS (Appearance -> Customize):

.searchandfilter[data-sf-form-id="7246"] > ul > li > label > select {
  visibility: hidden;
}

[Trevor]

OK, so this post might be of interest then:

https://support.searchandfilter.com/forums/topic/custom-css-2/page/2/#post-244518

[Trevor]

I can see that something is applying ‘Nice Select’ javascript to our select box (maybe your theme), which is hiding our field and showing a different field, but it is not copying across the terms. That you would need to talk with the theme author about (probably best to stop it from doing that). Some custom CSS could hide the nice select version of the field and reveal our field. For example:

.searchandfilter[data-sf-form-id="5562"] .sf-input-select:not(.nice-select) {
    display: inline-block !important;
}
.searchandfilter[data-sf-form-id="5562"] .sf-input-select.nice-select {
    display: none;
}

[Trevor]

The left margin issue can be resolved with this custom CSS:

.searchandfilter ul {
  margin-left: 0;
}

However, you can’t have two forms on the same page. I see that you have one for mobile, and one for desktop, but they will conflict with each other. Can you remove the mobile version from the page? That will then mean your filter boxes need to be made wider.

[Trevor]

Rather than editing our CSS file, you should add custom CSS to your site (if necessary, using the theme customizer in WordPress, where there is an Additional CSS section).

I can’t be specific to what you would need, but the CSS in this post might point you in the right direction:

https://support.searchandfilter.com/forums/topic/css-styling-problem/#post-228483