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

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

I think you need something like this:

.searchandfilter[data-sf-form-id="18"] .sf-field-search input {
  font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif;
  color: #000;
  padding: 5px 10px;
  background: #eee;
  font-size: 13px;
}
.searchandfilter[data-sf-form-id="18"] .sf-field-submit input  {
  font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif;
  color: #fff;
  padding: 5px 10px;
  border: 0px solid #B6008A;
  background: #B6008A
}

That should give you the idea anyway.

[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

[Trevor]

I would do something like this (but it might need to be inside a medai query to keep it applying to desktop only:

.searchandfilter[data-sf-form-id="13517"] {
  margin: 0 65px;
}
.searchandfilter[data-sf-form-id="13517"]  > ul > li {
  min-width: 300px;
}
.searchandfilter[data-sf-form-id="13517"]  > ul > li > label {
  min-width: 260px;
}

300px is the smallest you can use for them to be the same width, with the data terms you have inside the fields, and font size.

[Trevor]

.searchandfilter .sf-field-category h4 {
  display: inline-block;
  font-size: 18px;
}
.searchandfilter[data-sf-form-id="262"] .sf-field-category > ul {
  display: inline-block;
  margin-left: 10px;
}

[Anonymous]

The one in WPForms makes a shortcode [wpforms id=”5093″] but I am not sure how to include it in:

.searchandfilter[data-sf-form-id=”1428″]
{
//do stuff with this particular search form
}

[Anonymous]

Trevor,

I added a few snippets of CSS:

.searchandfilter[data-sf-form-id=”11564″]
{
font-size: 2em;
width: 600px !important;
}

I think I also tried:

.searchandfilter li.sf-field-search label,
.searchandfilter li.sf-field-search input {
width: 100%;
}

The CSS was a guess, but I couldn’t get it to work.

I also tried adjusting various elements with the Inspect tool with Chrome to no avail. Any ideas?

I’m using the Avada theme, which seems to interact with S&F unusually at times…

cheers,
JB

[Anonymous]

Hey there,
I just purchased the pliugin. I tried your custom css in both these 2 versions but it doesn’t work (also adding the !important attribute), any reason why?

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

.searchandfilter[data-sf-form-id=”9707″] > ul > li {
display: inline-block !important;
vertical-align: top;
padding: 0 20px;
}

This is the test page I built Test page

Thanks!

[Trevor]

I haven’t checked this, but there are a couple of errors:

.searchandfilter[data-sf-form-id=”1216″] > ul
{
display: flex !important;
}

.sf-field-search {
flex-grow: 1 !important;
}

.sf-field-category,
.sf-field-tag,
.sf-field-reset {
flex-grow: 0 !important;
}

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

important was spelled wrong, and it is the ul inside the form that needs to be display: flex, not the form itself.

[Trevor]

Like this:

body.mybodytag .searchandfilter[data-sf-form-id="###"]  > ul > li {
display: inline-block;
margin-right: 20px;
}
body.mybodytag .searchandfilter > ul > li:last-child {
margin-right: 0;
}