Search Results for 'data-sf-form-id'

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

[Trevor]

This would need to be inside some responsive media query so it only applies to desktop?

.entry-content .searchandfilter[data-sf-form-id="598"] li.sf-field-taxonomy-download_tag > ul {
    columns: 3;
}
.entry-content .searchandfilter[data-sf-form-id="598"] li.sf-field-taxonomy-download_tag > ul > li {
    margin-bottom: 0;
}

[Trevor]

Can you remove these blocks that I gave you:

.searchandfilter[data-sf-form-id="169924"] > ul > li > ul > li > ul > li {
    margin-left: 10px;
}
.searchandfilter[data-sf-form-id="169924"] > ul > li > ul > li > ul > li:first-child {
    margin-left: 0;
}

and replace with this:

.searchandfilter[data-sf-form-id="169924"] ul > li[data-sf-field-input-type=checkbox] > ul > li > label {
    padding-left: 0;
}
.searchandfilter[data-sf-form-id="169924"] li.sf-field-taxonomy-mars_category > ul > li {
    padding: 10px 0 10px 10px;
}
.searchandfilter[data-sf-form-id="169924"] > ul > li > ul > li > ul > li {
    display: inline-block;
}
.searchandfilter[data-sf-form-id="169924"] > ul > li > ul > li > ul > li {
    margin-right: 10px;
}

[Trevor]

I will take the first post:

Your theme has this CSS:

.traveltour-body h4 {
    color: #383838;
    font-size: 28px;
    font-family: "Poppins", sans-serif;
    margin-top: 0px;
    margin-bottom: 20px;
    line-height: 1.2;
    font-weight: 700;
}

To control this, you need custom CSS like this:

`.traveltour-body .searchandfilter[data-sf-form-id=”22″] h4 {
/* CSS rules */
}

To the second question:

I am not sure if that date will be a problem in that format. Maybe, maybe not. You would need to test. Ideally, it should be 20200918 for example. It should not matter that it is not datetime.

At the moment, you need to use both From and To. The To field can be hidden, and you can use JavaScript to fill it with a long away date when the page opens. We will change/enhance the form field date match/range options in V3, due in a few months.

[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="4693"] .sf-input-select:not(.nice-select) {
    display: inline-block !important;
}
.searchandfilter[data-sf-form-id="4693"] .sf-input-select.nice-select {
    display: none;
}

[Trevor]

This custom CSS should get you started for desktop:

@media (min-width: 768px) {
  .searchandfilter[data-sf-form-id="4680"] > ul {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding-top: 20px
  }
  .searchandfilter[data-sf-form-id="4680"] ul,
  .searchandfilter[data-sf-form-id="4680"] > ul > li:first-child {
    margin-left: 0;
  }
  .searchandfilter[data-sf-form-id="4680"] > ul > li {
    display: inline-flex;
    margin-left: 20px;
    padding: 0;
  }
  body[data-fancy-form-rcs="1"] .searchandfilter[data-sf-form-id="4680"] .fancy-select-wrap {
    padding-top: 0;
  }
}

[Trevor]

OK. You already have many CSS rules added for the form. You need to remove all of what you have (especially the !important ones). It might not be perfect, but it will get you there for desktop view:

.searchandfilter[data-sf-form-id="4617"] > ul {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 30px;
}
.searchandfilter[data-sf-form-id="4617"] > ul > li {
  float: left;
}
.searchandfilter[data-sf-form-id="4617"] ul {
  margin-left: 0px;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-submit {
  clear: both;
}
.searchandfilter[data-sf-form-id="4617"] h4 {
  font-size: 1.9rem;
  display: inline-block;
  min-width: 160px;
  flex-grow: 0;
}
.searchandfilter[data-sf-form-id="4617"]  .sf-field-search h4 {
  padding-top: 10px;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-taxonomy-audience h4,
.searchandfilter[data-sf-form-id="4617"] .sf-field-taxonomy-resource_type h4 {
  min-width: 200px;
}
.searchandfilter[data-sf-form-id="4617"] {
  border: 1px solid #cccbcb;
}
.searchandfilter[data-sf-form-id="4617"] ul li.sf-field-reset > input[type=submit],
.searchandfilter[data-sf-form-id="4617"] ul li.sf-field-submit > input[type=submit] {
  background-color: #312d7a;
  color: #fff;
}
.searchandfilter[data-sf-form-id="4617"] > ul > li {
  flex-grow: 1;
}
.searchandfilter[data-sf-form-id="4617"] p {
  display: inline-block;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-search p {
  flex-grow: 1;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-search label {
  width: 75%;
}
.searchandfilter[data-sf-form-id="4617"] .sf-input-text {
  border-radius: 1.75rem;
}
.searchandfilter[data-sf-form-id="4617"] .sf-input-text {
  width: 100%;
}
.searchandfilter[data-sf-form-id="4617"] > ul > li > p > label br {
  display: none;
}
.searchandfilter[data-sf-form-id="4617"] > ul > li.sf-field-reset,
.searchandfilter[data-sf-form-id="4617"] > ul > li.sf-field-submit {
  flex-grow: 0;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-reset {
  padding-left: 10px;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-search {
  flex: 0 0 100%;
  display: flex;
}
.searchandfilter[data-sf-form-id="4617"] select.sf-input-select {
  min-width: 300px;
  width: auto;
}

[Trevor]

You have this:

.sf-field-search input, .sf-field-search label {
    display: block !important;
    width: 100% !important;
    border-radius: 30px;
}

You should use this:

.searchandfilter[data-sf-form-id="15236"] .sf-field-search input, .sf-field-search label {
    display: block;
    width: 100%;
    border-radius: 30px;
}
.searchandfilter[data-sf-form-id="15236"] li[data-sf-field-input-type="select"] select,
.searchandfilter[data-sf-form-id="15236"] .sf-field-submit input {
    border-radius: 30px;
}

Please note that we are now closed for the day as it is gone 5PM here in the UK. For any further replies, I will be back on again tomorrow.

[Trevor]

This search of our forum should give some snippets of how to style the form, but your theme might be overriding the CSS, in which case are you able to send me a live link/URL to your search page so I can take a look? Let me know which elements are resisting styling, and what CSS you had tried that did not work.

The search:

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

[Trevor]

You would need to make sure the specificity is correct. This is our standard slider CSS for that color (I believe):

.searchandfilter .noUi-connect {
    background-color: #526E91;
}

So you would need custom CSS, something like:

.searchandfilter[data-sf-form-id="1234"] .noUi-connect {
    background-color: #ccc;
}

Where you would change the ID to match that of your form, and the color to what you want it to be.