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

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

[Trevor]

This should start you on your way:

.searchandfilter[data-sf-form-id="971"] li.sf-field-search input {
  padding: 1.5px 10px;
}
.searchandfilter[data-sf-form-id="971"] > ul > li,
.searchandfilter[data-sf-form-id="971"] li.sf-field-search input,
.searchandfilter[data-sf-form-id="971"] li.sf-field-search label,
.searchandfilter[data-sf-form-id="971"] .select2-container {
  min-width: 245px;
  float: left;
}
.searchandfilter[data-sf-form-id="971"] > ul {
  display: table;
}
.searchandfilter[data-sf-form-id="971"] li.sf-field-submit {
    clear: both;
}

Note that you have some CSS you already made:

input.sf-input-text {
    background-color: white;
    border: 1px solid #aaa !important;
    margin-top: 3px;
    font-size: 14px;
}

The font-size and margin-top in that block may need to be removed. It may also be that you need to place the CSS in a media query to apply only to desktop, but this should get you started. This is really outside the scope of our normal support, so if you need more doing, you may need to hire a third party coder to help you.