Search Results for '.searchandfilter custom css'

[Trevor]

I fixed that link. Can you check/confirm that you did follow the advice there?

As to the bullet points. This theme CSS file:

https://www.hifi-advice.com/blog/wp-content/themes/theblog/style.css

On line 861 has this CSS, which is causing them:

.body-content ul > li:before {
    content: "\f105";
    font-family: "FontAwesome";
    position: absolute;
    left: 0;
    top: 5px;
    line-height: 1;
}

Add this custom CSS to the theme customizer to fix this:

.body-content .searchandfilter ul > li:before {
    content: none;
}

Once I have the answer to the first part of this reply, I need to see the content of the results.php file, IF you have modified it? If you did not modify it, do you have a Related Posts plugin installed (which one), as it may be automatically adding that content after the post excerpt?

[Trevor]

I would use custom CSS like this:

.searchandfilter[data-sf-form-id="5532"] li[data-sf-field-input-type="select"] select {
    min-height: 52px;
}
.searchandfilter[data-sf-form-id="5532"] > ul > li,
.searchandfilter[data-sf-form-id="5532"] li[data-sf-field-input-type="select"] select,
.searchandfilter[data-sf-form-id="5532"] li.sf-field-search input {
    min-width: 270px;
}
.searchandfilter[data-sf-form-id="5532"] > ul > li {
    padding: 0 5px 0 0;
}
.searchandfilter[data-sf-form-id="5532"] > ul > li:last-child {
    padding: 0;
}
.searchandfilter[data-sf-form-id="5532"] > ul {
    display: table;
    margin: 0 auto 10px;
}

[Trevor]

There is no way to add a scroll to a select field other than to have lots of entries (as our demo does). What you could do is to make it a combobox in the field settings. This would the apply the Select2 jQuery script to it, and style it much better.

At the moment you are hiding if empty. But you want to show them, see here:

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

Some custom CSS is needed for the date to be in 2 columns:

.searchandfilter[data-sf-form-id="14110"] li.sf-field-post_date input {
    width: 100px;
    min-width: auto;
    display: inline-block;
}
.searchandfilter[data-sf-form-id="14110"] li.sf-field-post_date li {
    display: inline-block;
}
.searchandfilter[data-sf-form-id="14110"] li.sf-field-post_date li:first-child {
    margin-right: 20px;
}

[Trevor]

If you are applying the Select2 yourself, you would need to apply options yourself. Once Slect2 has been applied, you cannot go back and change. You have to remove it and start again. Whilst this is not within the scope of our support, I will try to help where I can, but it may not always be possible.

For example, this will apply Select2 without the search box:

<script>
(function ( $ ) {
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('select.sf-input-select').select2({minimumResultsForSearch: -1});
  });
}(jQuery));
jQuery(document).ready(function($){
  $('select.sf-input-select').select2({minimumResultsForSearch: -1});
});
</script>

This post shows the current CSS applies to Select2, and how to override it (in general):

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

[Trevor]

Are you wanting to ONLY ever have this form search inside that ‘Real Weddings’ category?

BTW, I think you might want to use this custom CSS:

.searchandfilter[data-sf-form-id="63885"] li[data-sf-field-input-type="checkbox"] ul li {
    display: inline-block;
    margin-right: 20px;
}

[Trevor]

Ah. So, I would be on a page that has the search form, and a list of posts. In those posts are the authors. You want to be able to click the author, and instead of going to the author page, you want to trigger the search and add that author?

So, the author field would need to be in the form. Would you want to show it or hide it? If you want to hide it, use some custom CSS to do that, but, if you hide it, how does the user remove it from the search if they want to?

The Author term would have to be a link that triggers some custom JavaScript to run.

That would fetch the term from the link, set that in the form field, and then trigger a submit, using

$('.searchandfilter').submit()

[Trevor]

Yes, but it would require custom CSS, depending on what you need. If you are using select dropdown fields, I would suggest using comboboxes.

You may need to make some changes.

Go to wp-admin -> Search & Filter -> Settings -> Combobox Script

Change this from Chosen to Select2 – we’re dropping support for Chosen in v3, because it has too many issues on mobile.

Next, in the form field settings, select the combobox option for each.

There is an alternate way of doing this, but this is the easiest. Now you can style the resulting select as it is not a select!

You may you may need to hire a third party coder to help you. This search will give some code snippets to help that coder:

https://support.searchandfilter.com/forums/search/data-sf-form-id+.searchandfilter/

[Trevor]

It would be possible, but using some very custom CSS, I am unsure whether the ticks and crosses can be done.

This forum search will give you some example snippets:

https://support.searchandfilter.com/forums/search/.searchandfilter+checkbox+sf-input-checkbox+sf-label-checkbox/

You may need to employ the services of a third party coder to help you. If you get close, feel free to come back, show me what you have made, and let me look at it for you.

[Trevor]

Because you have caching and/or minifying on the site, I cannot see where it is coming from, but it is being caused by this custom CSS (made by you or your developer?):

.searchandfilter>ul>li[data-sf-combobox="1"] label {
    display: block;
}

[Trevor]

Can you fist change this custom CSS:

li.sf-field-submit input {
    border: 0px !important;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    color: #2B255D !important;
    background-color: #FFD618 !important;
}
li.sf-field-submit input:hover {
    background-color: #2B255D !important;
    color: #FFD618 !important;
}

to this (no !importants):

.searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input {
    border: 0px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    color: #2B255D;
    background-color: #FFD618;
}
.searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input:hover {
    background-color: #2B255D;
    color: #FFD618;
}
.searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input.disabled,
.searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input.disabled:hover {
    color: #aaa;
    background-color: #ddd;
    cursor: default;
}

So the code becomes:

<script>(function ( $ ) {
 "use strict";
 $(document).on("sf:ajaxformstart", ".searchandfilter", function(){
	$('.searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input').addClass('disabled');
 });
 $(document).on("sf:ajaxformfinish", ".searchandfilter", function(){
	$('.searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input').removeClass('disabled');
 });
}(jQuery));</script>

I think. If it doesn’t work, then check if the script is actually on the page. How did you add it to the page?