-
AuthorSearch Results
-
May 14, 2020 at 5:17 pm #243995
In reply to: custom styles
TrevorParticipantThat requires some simple custom CSS, that used on the demo page is this:
.searchandfilter li[data-sf-field-input-type="checkbox"] ul { max-height: 180px; overflow: auto; }
We do not offer pre-made styles, as each user’s needs are often very different.
May 14, 2020 at 6:26 am #243818In reply to: Help request for plugin setting
TrevorParticipantOn the Display Results settings tab of the form, you have selected ‘Using a Shortcode’ as the method. This may be wrong. Are you using Elementor Pro to display the posts? If so, you should use the method described in this guide (and also use the extension for Elementor Pro that you can download from the top of the guide page):
https://searchandfilter.com/documentation/3rd-party/elementor/
The form we can address later, but this custom CSS normally centers the form:
.searchandfilter > ul { display: table; margin: 0 auto; }
May 13, 2020 at 4:13 pm #243765In reply to: Search form customize styling
TrevorParticipantIn search boxes, you will initially see the ‘placeholder’ text it disappears when you start typing, and the actual search term(s) you type.
For accessibility reasons, the placeholder is always faded (opacity is less than 1).
Which do you wish to change?
As to the corner ‘spots’, it is caused by this custom CSS you have:
https://www.screencast.com/t/N1YQvTHwDC
Take the background color out and instead do this:
.searchandfilter > ul > li label { background-color: blue; } .searchandfilter > ul > li input, .searchandfilter > ul > li label select { background-color: #fff; }
May 13, 2020 at 11:31 am #243725In reply to: Search form customize styling
TrevorParticipantI think this custom CSS will be closer to what you wanted:
.sandf-horizontal .searchandfilter > ul { margin: 0 auto; display: table; } .sandf-vertical .searchandfilter > ul { margin-left: 0; } .sandf-vertical .searchandfilter > ul > li label, .sandf-vertical .searchandfilter > ul > li input, .sandf-vertical .searchandfilter > ul > li label select { width: 100%; } .sandf-horizontal .searchandfilter > ul > li label, .sandf-horizontal .searchandfilter > ul > li input, .sandf-horizontal .searchandfilter > ul > li label select { min-width: 225px; } .searchandfilter > ul > li label, .searchandfilter > ul > li input, .searchandfilter > ul > li label select { font-family: Arial; color: #000; border-color: #000 !important; } .searchandfilter > ul > li.sf-field-submit input { background: #e84c3d; }
May 13, 2020 at 10:32 am #243714
TrevorParticipantTry 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 }
May 1, 2020 at 10:58 am #242296In reply to: Check Box Size
TrevorParticipantDoes his custom CSS help?
.searchandfilter[data-sf-form-id="66179"] ul { padding-left: 0 } .searchandfilter[data-sf-form-id="66179"] .sf-input-checkbox { height: 16px; width: 16px; } .searchandfilter[data-sf-form-id="66179"] li .sf-label-checkbox { vertical-align: text-top; } .searchandfilter[data-sf-form-id="66179"] li[data-sf-field-input-type="select"], .searchandfilter[data-sf-form-id="66179"] li[data-sf-field-input-type="select"] label { min-width: 100%; }
April 29, 2020 at 9:38 am #241879
TrevorParticipantIn your theme customizer, in the Custom CSS, add this:
.searchandfilter[data-sf-form-id="7184"] ul.sf_date_field > li:after { content: "\ec051"; height: 40px; width: 40px; vertical-align: middle; line-height: 40px; font-size: 20px; transform: rotateY(180deg); color: #fff; text-align: center; font-weight: 400; font-family: icomoon-the7-font; position: absolute; margin-left: -40px; background: #c00f41; }
This uses the same icon and font as the search in your theme header.
April 28, 2020 at 11:01 am #241728
TrevorParticipantIf you want me to make the CSS for you, are you able to send me a live link/URL to your search page so I can take a look?
You can only have Category, Tag or each custom taxonomy once on a form, so you would need to follow the advice in this post:
April 16, 2020 at 8:06 pm #240351In reply to: Customization with Divi
AnonymousInactiveHello Trevor, thank you very much for your help
I managed to customize it a bit but what I would like is to have the filters aligned to the left of the page as well as a border around the two classes, a bit like the blue one but that fits to the actual size of the components.
Do you know which class I should work on? Or if I forgot to spot some?Thank you !
The link to the page is: https://stryber.com/elementor-4536/
The CSS that I put in the Divi is
.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0px;
}.searchandfilter{
margin-top:0px;
padding-left: 0px;
border: 1px solid blue;}
.sf-field-search{
height:30px;
width:230px;
margin-left: 0px;
}.sf-input-text{
font-size:16px;
font-family:’Open sans’;
color:#2a3749;
}.sf-field-category{
height:30px;
width:230px;
margin:auto;}
.sf-input-select{
font-size:16px;
font-family:’Open sans’;
color:#2a3749;
}April 13, 2020 at 3:57 pm #239841In reply to: SF not working
TrevorParticipantIs this custom CSS what you need?
.searchandfilter[data-sf-form-id="2275"] > ul > li > ul > li { display: inline-block; margin-right: 15px; }
-
AuthorSearch Results