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.
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.
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;
}
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;
}
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;
}
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;
}
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;
}
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.
This reply has been marked as private.
This reply has been marked as private.
