Search Results for '.searchandfilter custom css'

[Trevor]

This Custom CSS is my first hit at it:

.searchandfilter[data-sf-form-id="2703"] select.sf-input-range-select {
  border: 1px solid #aaa;
  padding: 2px 0;
  border-radius: 4px;
}
.searchandfilter[data-sf-form-id="2703"] > ul > li:first-child {
  margin-left: 0;
  padding-top: 0;
}
.searchandfilter[data-sf-form-id="2703"] li.sf-field-search h4 {
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 3px;
  padding-top: 0;
}
.searchandfilter[data-sf-form-id="2703"] h4 {
  font-size: 18px;
  font-weight:600;
}
.searchandfilter[data-sf-form-id="2703"] select,
.searchandfilter[data-sf-form-id="2703"] .select2-container .select2-results__option,
.searchandfilter[data-sf-form-id="2703"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: black;
  font-size: 14px;
}
.searchandfilter[data-sf-form-id="2703"] li.sf-field-search input,
.searchandfilter[data-sf-form-id="2703"] li.sf-field-search label,
.searchandfilter[data-sf-form-id="2703"] .select2-container {
  min-width: 100%;
}
.searchandfilter[data-sf-form-id="2703"] > ul {
  margin: 20px;
  border: 1px solid #002f60;
  padding: 15px;
}
.searchandfilter[data-sf-form-id="2703"] .meta-slider {
  max-width: calc(100% - 12px);
}
.searchandfilter[data-sf-form-id="2703"] li .sf-meta-range.sf-meta-range-slider label  {
  width: calc(50% - 9px);
}
.searchandfilter[data-sf-form-id="2703"] li .sf-meta-range.sf-meta-range-slider input {
  width: 100%;
  max-width: 100%;
}

However. The following need specifying:

font colors for each field
font sizes for each field
border colors for the form and fields

[Trevor]

I had to comment out all the custom CSS you made, so can you remove all of that?

#3 Change background color to what? Inside and outside the black boxed area? I assumed for now you wanted it white and to the whole form.

This is the CSS I made:

.searchandfilter[data-sf-form-id="289"] select.sf-input-range-select {
  border: 1px solid #aaa;
  padding: 2px 0;
  border-radius: 4px;
}
.searchandfilter[data-sf-form-id="289"] > ul > li:first-child {
  margin-left: 0;
}
.searchandfilter[data-sf-form-id="289"] > ul > li {
  margin-left: 25px;
  float:left;
}
.searchandfilter[data-sf-form-id="289"] {
  background: #fff;
  display: table;
  padding: 15px;
}
.searchandfilter[data-sf-form-id="289"] h4 {
  color: red;
  font-family: "Montserrat", Sans-serif;
  font-size: 18px
}
.searchandfilter[data-sf-form-id="289"] select,
.select2-container .select2-results__option,
.searchandfilter[data-sf-form-id="289"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: green;
  font-family: "Montserrat", Sans-serif;
  font-size: 14px;
}

[Trevor]

The page title and that searched for part are both from the theme template, and not from our plugin. The template looks like it is a modified search.php or archive.php template that are only ever designed to display the search string, whereas you filter is far more complex.

You may need to refer to the theme authors as to how to alter/set the page title. WordPress does have some functions also to do this, but whether they would work would depend on the theme in use.

To fetch the search terms, the https://searchandfilter.com/documentation/accessing-search-data/ guide is basic but you can extend the idea to grab lots of other data. If you have other filters, then it becomes a little more complex, but I can give you links. This thread might help you:

https://support.searchandfilter.com/forums/topic/accessing-field-slug-on-search-results/

… and this search will give similar threads I think:

https://support.searchandfilter.com/forums/search/sf_current_query+get_array

Note, if you are using Ajax refreshing of the results, any PHP needs to be inside the Ajax Container, or it will not update.

You also look like you need some custom CSS:

.searchandfilter > ul {
  margin-left: 0;
}

[Trevor]

I found where your theme is adding this. Your theme is adding this in part of a custom script file:

$("select").each(function(){
  if($(this).css('display') != 'none') {
    $(this).wrap( '<div class="selection-box"></div>' );
  }
});

Does your theme allow you to add a script to the page?

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxformstart", ".searchandfilter", function(){
    $(".searchandfilter select").each(function(){
      if($(this).css('display') != 'none') {
        $(this).wrap( '<div class="selection-box"></div>' );
      }
    });
}(jQuery));</script>

I am not sure that is correct.

A word of caution. This will add back in the styling, but the select box widths may well change to the content in the changing, so you may have to set up some min-width CSS rules.

[Trevor]

Thanks for that. I am investigating right now, so I will get back to you shortly, but, in the meantime, the form needs a small snippet of custom CSS adding to your theme:

.searchandfilter ul {
  padding-left: 0;
}

[Trevor]

As this is Divi you are using, and it looks like you are using the Divi Post Grid element, you need to use the addon plugin for Divi and the method described here:

https://support.searchandfilter.com/forums/topic/divi-4-templates-blog-module/#post-226630

This will require you to change a few settings in the form also.

It also looks like, in the Search & Filter Settings, you have the Combobox script set to Chosen (which is the default). Change that the Select2.

Any styling of the form must be done with Custom CSS. I have (generally) made some guides in this thread:

https://support.searchandfilter.com/forums/topic/edit-typography-and-button/

(I will be adding some more into that thread during today)

To style the Select2 controlled elements, see this thread:

https://support.searchandfilter.com/forums/topic/customise-dropdown-combobox/

[Trevor]

Our loader icon is a simple addition to the page, so you may need to use some Custom CSS, or actually hide it entirely and make your own. Please see these two posts (from the same thread);

https://support.searchandfilter.com/forums/topic/search-filter-scroll-loading-icon-positionning-in-infinite-scroll/page/2/#post-127324

https://support.searchandfilter.com/forums/topic/search-filter-scroll-loading-icon-positionning-in-infinite-scroll/page/3/#post-128735

[Trevor]

I *think* I have fixed it now. You need this custom CSS in the site Customizer:

.searchandfilter ul {
    padding-left: 0px;
}

[Trevor]

Can you try this custom CSS:

.searchandfilter li[data-sf-field-input-type=checkbox].sf-field-category > ul > li label {
  line-height: 42px;
  border-bottom: 1px solid #666;
  width: 100%;
  padding-left: 0px;
}
.searchandfilter li[data-sf-field-input-type=checkbox].sf-field-category input {
  display: none;
}
.searchandfilter ul li[data-sf-field-input-type=checkbox].sf-field-category li {
  padding: 0;
}
.searchandfilter ul li[data-sf-field-input-type=checkbox].sf-field-category {
  padding: 0;
}
.searchandfilter li[data-sf-field-input-type=checkbox].sf-field-category > ul > li.sf-option-active label {
  color: #e3051c;
}
.searchandfilter li[data-sf-field-input-type=checkbox].sf-field-category > ul > li label:hover {
  cursor: pointer;
}

[Anonymous]

Hello there,

I want to display categories on my articles page but even using documentations instructions for customizing css I seem unable to modify how my categories are displayed.

`.searchandfilter[data-sf-form-id=”2721″]
{
font-family: BatonTurboWeb-Medium;
font-size:18px;

}

Could you help me please