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

[Trevor]

I think it would be like this:

.searchandfilter[data-sf-form-id="13155"] .sf-field-taxonomy-partysize .select2-container {
  max-width: 150px;
}

Add New Note to this Reply

[Trevor]

If these are what are known as category term archive pages, such as:

mywesbite.com/category/cat1/ or mywesbite.com/cat1/ (depending on how your permalinks are setup)

Then set the Display Results method to ‘Post Type Archive’, place the category field in the form, and then use custom CSS to hide it, maybe (where the ID number changes to match that of your form):

.searchandfilter[data-sf-form-id="1428"] .sf-field-category {
  display: none;
}

And then, on the General Settings tab, enable Auto Count (both settings) and also Auto Detect for Tags, Categories and Taxonomies.

Then, in the custom field and tag fields, set these to Hide Empty.

This assumes that you theme uses fairly standard PHP archive templates.

This method would mean you use one form that will change/adapt depending on the page it is on.

Add New Note to this Reply

[Trevor]

If there is no other place to add custom CSS in your theme, then Customize – Additional CSS will suffice.

I think this is it then:

.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: 24px;
  font-weight: 400;
  letter-spacing: 3px;
  padding-top: 0;
}
.searchandfilter[data-sf-form-id="2703"] h4 {
  font-size: 16px;
  font-weight:600;
  color: #02213d;
}
.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 #02213d;
  padding: 15px;
  background: #f3f3f3;
}
.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%;
  font-size: 14px;
  color: #000;
  border-color: #02213d;
}
.searchandfilter[data-sf-form-id="2703"] .select2-container .select2-selection,
.select2-container--open .select2-dropdown--above {
  border-color: #02213d;
}
.searchandfilter[data-sf-form-id="2703"] .select2-container, .select2-container--open {
  font-size: 14px;
  color: #000;
}
.select2-container--open .select2-search--dropdown .select2-search__field {
  border-color: #02213d;
}

Add New Note to this Reply

[Trevor]

With a Select Multiple box, 4 is the default that will show. You could use CSS to set the height of the select, but this can give variable results across browsers, but is easy to do, for example:

.searchandfilter[data-sf-form-id="1255"] .sf-field-category select {
    height: 200px;
}

The more difficult method is to use JavaScript to add a ‘size’ attribute to the select, where the number is the number of rows wanted.

Be aware that, if the actual number of terms available is insufficient, the control may have empty space.

Add New Note to this Reply

[Trevor]

I am not sure if this works for you, as Custom CSS:

.searchandfilter[data-sf-form-id="2062"] li.sf-field-search label::after {
  font-family: FontAwesome;
  font-size: 24px;
  font-weight: normal;
  font-style: normal;
  content: "\f002";
  display: inline-block;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #fff;
  background: #000;
  position: relative;
  top: 3px;
  cursor: pointer;
 }

Add New Note to this Reply

[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

Add New Note to this Reply

[Trevor]

Change it to this:

/*------formularios busqueda adsforchange en linea y centrado------*/
.searchandfilter[data-sf-form-id="10033"] select,
.searchandfilter[data-sf-form-id="10033"] .sf-field-search input {
  min-width: 240px;
}
.searchandfilter[data-sf-form-id="10033"] > ul {
  padding-left: 0;
}

@media only screen and (min-width: 1025px) 
{.searchandfilter[data-sf-form-id="10033"] > ul > li:first-child {
  margin-left: 0px;
}
.searchandfilter[data-sf-form-id="10033"] > ul > li {
  margin-left: 10px;
  float: left;
}
.searchandfilter[data-sf-form-id="10033"] {
  float: left;
  width: 100%;
}
.searchandfilter[data-sf-form-id="10033"] select,
.searchandfilter[data-sf-form-id="10033"] .sf-field-search input {
  min-width: 240px;
}
.searchandfilter[data-sf-form-id="10033"] > ul {
  display: table;
  margin: 0 auto;
}
}
@media only screen and (max-width: 1024px) {
.searchandfilter[data-sf-form-id="10033"] .sf-field-submit input {
display: table;
margin: 0 auto;
padding-left: 2;
}
.searchandfilter[data-sf-form-id="10033"] .sf-field-submit input  {
-webkit-appearance: none;
-webkit-border-radius: 0;
color: #fff;
height: 40px;
font-family: "Raleway", Sans-serif;
background: #1890ff;
font-size: 16px;
box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.3)
}
}

This moves the padding-left: 0; that was inside the media query to outside it, so it also applies to mobile.

Add New Note to this Reply

[Carlos Miguel]

Ei Trevor!!
It worked to focus on the mobile and match the size of the fields.
To cancel the “ios” button I used this:

-webkit-appearance: none;
-webkit-border-radius: 0;

So my code has been like this:

/*------formularios busqueda adsforchange en linea y centrado------*/
.searchandfilter[data-sf-form-id="10033"] select,
.searchandfilter[data-sf-form-id="10033"] .sf-field-search input {
  min-width: 240px;
}
@media only screen and (min-width: 1025px) 
{.searchandfilter[data-sf-form-id="10033"] > ul > li:first-child {
  margin-left: 0px;
}
.searchandfilter[data-sf-form-id="10033"] > ul > li {
  margin-left: 10px;
  float: left;
}
.searchandfilter[data-sf-form-id="10033"] {
  float: left;
  width: 100%;
}
.searchandfilter[data-sf-form-id="10033"] select,
.searchandfilter[data-sf-form-id="10033"] .sf-field-search input {
  min-width: 240px;
}
.searchandfilter[data-sf-form-id="10033"] > ul {
  display: table;
  margin: 0 auto;
  padding-left: 0;
}
}
@media only screen and (max-width: 1024px) {
.searchandfilter[data-sf-form-id="10033"] .sf-field-submit input {
display: table;
margin: 0 auto;
padding-left: 2;
}
.searchandfilter[data-sf-form-id="10033"] .sf-field-submit input  {
-webkit-appearance: none;
-webkit-border-radius: 0;
color: #fff;
height: 40px;
font-family: "Raleway", Sans-serif;
background: #1890ff;
font-size: 16px;
box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.3)
}
}

I only have one thing left …
As you can see on mobile devices, it is not completely centered, but has a margin to the left.
I’ve tried everything, but I can’t keep it completely focused. Do you recommend something to me? I have to turn to you.

Thanks a million for your time.

Add New Note to this Reply

[Trevor]

Does this work?

.searchandfilter[data-sf-form-id="10033"] select,
.searchandfilter[data-sf-form-id="10033"] .sf-field-search input {
  min-width: 240px;
}
@media only screen and (min-width: 1025px) {
  .searchandfilter[data-sf-form-id="10033"] > ul > li: first-child {
    margin-left: 0px;
  }
  .searchandfilter[data-sf-form-id="10033"] > ul > li {
    margin-left: 10px;
    float: left;
  }
  .searchandfilter[data-sf-form-id="10033"] {
    float: left;
    width: 100%;
  }
  .searchandfilter[data-sf-form-id="10033"] > ul {
    display: table;
    margin: 0 auto;
    padding-left: 0;
  }
}
@media only screen and (max-width: 1024px) {
  .searchandfilter[data-sf-form-id="10033"] .sf-field-submit input {
    margin: 0 auto;
    display: table;
  }
}

Note, the iPhone takes over control of the button, so I am unsure how to change that.

Add New Note to this Reply

[Carlos Miguel]

ohhh!!! just do it Trevor, only Just need to justify the mobile versions, and “color submit”in ios.

I have divided it.
1. justification

/ * ------ online and focused adsforchange search forms ------ * /
@media only screen and (min-width: 1025px) {
  .searchandfilter[data-sf-form-id="10033"] > ul > li: first-child {
    margin-left: 0px;
  }
  .searchandfilter[data-sf-form-id="10033"] > ul > li {
    margin-left: 10px;
    float: left;
  }
  .searchandfilter[data-sf-form-id="10033"] {
    float: left;
    width: 100%;
  }
  .searchandfilter[data-sf-form-id="10033"] select,
  .searchandfilter[data-sf-form-id="10033"] .sf-field-search input {
    min-width: 240px;
  }
  .searchandfilter[data-sf-form-id="10033"] > ul {
    display: table;
    margin: 0 auto;
    padding-left: 0;
  }
}

So I managed not to lose the color design of the fields.

2. Design:

/ * ------ forms search adsforchange color ------ * /
.searchandfilter[data-sf-form-id = "10033"] .sf-field-search input {
  color: # 000;
  height: 40px;
  font-family: "Raleway", Sans-serif;
  background: #eee;
  font-size: 16px;
  border-radius: 4px;
}
.searchandfilter[data-sf-form-id = "10033"] select {
  color: black;
  font-family: "Raleway", Sans-serif;
  font-size: 16px;
  background: #eee;
  border-radius: 4px;
  height: 40px;
}
.searchandfilter[data-sf-form-id = "10033"] .sf-field-submit input {
  color: #fff;
  height: 40px;
  font-family: "Raleway", Sans-serif;
  background: #1890ff;
  font-size: 16px;
  box-shadow: 0 12px 18px -6px rgba (0, 0, 0, 0.3)! important;
}

Add New Note to this Reply