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

[Trevor]

It is this CSS doing that:

.searchandfilter[data-sf-form-id="2839"] .sf-field-submit::before {
    content: "";
    display: block;
    height: 43px;
    width: 25px;
}
.searchandfilter[data-sf-form-id="2839"] .sf-field-reset::before {
    content: "";
    display: block;
    height: 43px;
    width: 25px;
}

You need to make that CSS conditional so it applies only to the horizontal form. For example, you could add a class to the Element in the Elementor widget settings and precede it with that on the horizontal version, so it then will not apply to the vertical version.

[Trevor]

Slide color and form ‘beauty’:

.searchandfilter[data-sf-form-id="1313"] .noUi-connect {
  background-color: #edd100;
}
.searchandfilter[data-sf-form-id="1313"] > ul > li.sf-field-search input.sf-input-text,
.searchandfilter[data-sf-form-id="1313"] > ul > li.sf-field-post-meta-selling_price input,
.searchandfilter[data-sf-form-id="1313"] > ul > li.sf-field-category select {
  border: none;
  border:solid 1px #ccc;
  border-radius: 4px;
}
.searchandfilter[data-sf-form-id="1313"] > ul > li.sf-field-search input.sf-input-text {
  padding: 4px;
}
.searchandfilter[data-sf-form-id="1313"] > ul > li.sf-field-post-meta-selling_price input,
.searchandfilter[data-sf-form-id="1313"] > ul > li.sf-field-category select {
  padding: 6px;
}

As to content, I think that you have to edit the Post Grid, go to edit the Layout:

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

And change the Post Excerpt source to Post Content:

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

I think. You might need to increase the word limit also.

[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 something like:

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

[Trevor]

More custom CSS for you:

.page-id-1309 #primary {
  width: 100%;
}
.page-id-1309 #secondary {
  display: none;
}
.searchandfilter[data-sf-form-id="1313"] h4 {
  font-weight: 700;
}

[Trevor]

So, looking at the page right now, I am not sure what you need? Maybe you can make an annotated sketch/image for me to visualize it? You cannot upload images here, so use a file sharing site and send me a link to the image.

This custom CSS will make the Submit button align better:

.searchandfilter[data-sf-form-id="2829"] .sf-field-submit::before{
  content: "";
  display: block;
  height: 43px;
  width: 25px;
}

[Trevor]

It took quite a while to make, but try this custom CSS:

.searchandfilter[data-sf-form-id="1628"] ul {
  margin-left: 0;
}
.searchandfilter[data-sf-form-id="1628"] > ul {
  padding: 0 10px;
  width: 100%;
}
.searchandfilter[data-sf-form-id="1628"] > ul > li,
.searchandfilter[data-sf-form-id="1628"] > ul > li label,
.searchandfilter[data-sf-form-id="1628"] > ul > li label input,
.searchandfilter[data-sf-form-id="1628"] > ul > li label select.sf-input-select {
  width: 100%;
}
.searchandfilter[data-sf-form-id="1628"] > ul > li[data-sf-field-input-type="range-slider"] label,
.searchandfilter[data-sf-form-id="1628"] > ul > li[data-sf-field-input-type="checkbox"] li label {
  width: auto;
}
.searchandfilter[data-sf-form-id="1628"] .meta-slider,
.searchandfilter[data-sf-form-id="1628"] > ul > li label select.sf-input-select {
  max-width: none;
}

[Trevor]

This will give you some ideas I think:

.searchandfilter[data-sf-form-id="6198"] select.sf-input-range-select {
  border: 1px solid #aaa;
  padding: 2px 0;
  border-radius: 4px;
}
.searchandfilter[data-sf-form-id="6198"] .sf-field-post-meta-cloud-standort input {
  display: none;
}
.searchandfilter[data-sf-form-id="6198"] .sf-field-post-meta-cloud-standort label {
  text-align: center;
  line-height: 1.4em;
  border: 1px solid #666;
  border-radius: 3px;
  padding: 3px 5px !important;
  text-indent: 0;
}
.searchandfilter[data-sf-form-id="6198"] .sf-field-post-meta-cloud-standort label:hover {
  cursor: pointer;
}
.searchandfilter[data-sf-form-id="6198"] .sf-field-post-meta-cloud-standort > ul > li {
  display: inline-block;
  margin-left: 5px;
  margin-bottom: 10px;
}
.searchandfilter[data-sf-form-id="6198"] .sf-field-post-meta-cloud-standort > ul {
  margin-left: -5px;
}
.searchandfilter[data-sf-form-id="6198"] .sf-field-post-meta-cloud-standort > ul > li.sf-option-active label {
  background-color: #7DA85B;
  color: #fff;
}

[Anonymous]

Hi,

My filtering form has some CSS problem. Please check the below link:
https://www.lightemsystems.com/telecom-datacom-systems/industrial-switch/

Post per page i.e. View dropdown is not same as other dropdown design.
CSS code I used:

.searchandfilter > ul > li {
display: inline-block;
margin-right: 15px;
float: left;
}
.searchandfilter[data-sf-form-id=”10523″] select,
.select2-container .select2-results__option,
.searchandfilter[data-sf-form-id=”10523″] .select2-container–default .select2-selection–single .select2-selection__rendered {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: grey;
border-color: grey;
}
.searchandfilter >ul > li input[type=submit] {
background-color: #1569ae; /* Blue */
border: 4px;
color: white;
padding: 4px 8px;
text-align: center;
text-decoration: none;
font-size: 12px;
}

Please help me.

[Trevor]

Is this an example of what you made?

.sf-input-select {
    font-family: Gill Sans;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 15px 20px;
    border-radius: 0px;
    background-color: #ffffff;
}

See how, in the inspector, there is a selector above it?

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

That has greater specificity.

It would suggest this might work (but it won’t quite):

.searchandfilter select.sf-input-select {
    font-family: Gill Sans;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 15px 20px;
    border-radius: 0px;
    background-color: #ffffff;
}

But THIS would work:

.searchandfilter[data-sf-form-id="244"] select.sf-input-select {
    font-family: Gill Sans;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 15px 20px;
    border-radius: 0px;
    background-color: #ffffff;
}

Does that help?

[Trevor]

Try this Custom CSS (hopefully it may give you some ideas too):

.searchandfilter[data-sf-form-id="1104"] > ul > li {
  display: inline-block;
  vertical-align: top;
  padding-left: 20px;
}
.searchandfilter[data-sf-form-id="1104"] > ul > li:first-child {
  padding-left: 0;
}
.searchandfilter[data-sf-form-id="1104"] ul {
  padding: 0;
}
.searchandfilter[data-sf-form-id="1104"] > ul > li select {
  font-size: 16px;
  padding: 5px
}