-
AuthorSearch Results
-
September 3, 2020 at 12:27 pm #258369
In reply to: How to display filter form horizontally
TrevorParticipantOK. You already have many CSS rules added for the form. You need to remove all of what you have (especially the
!important
ones). It might not be perfect, but it will get you there for desktop view:.searchandfilter[data-sf-form-id="4617"] > ul { display: flex; flex-wrap: wrap; padding: 10px 30px; } .searchandfilter[data-sf-form-id="4617"] > ul > li { float: left; } .searchandfilter[data-sf-form-id="4617"] ul { margin-left: 0px; } .searchandfilter[data-sf-form-id="4617"] .sf-field-submit { clear: both; } .searchandfilter[data-sf-form-id="4617"] h4 { font-size: 1.9rem; display: inline-block; min-width: 160px; flex-grow: 0; } .searchandfilter[data-sf-form-id="4617"] .sf-field-search h4 { padding-top: 10px; } .searchandfilter[data-sf-form-id="4617"] .sf-field-taxonomy-audience h4, .searchandfilter[data-sf-form-id="4617"] .sf-field-taxonomy-resource_type h4 { min-width: 200px; } .searchandfilter[data-sf-form-id="4617"] { border: 1px solid #cccbcb; } .searchandfilter[data-sf-form-id="4617"] ul li.sf-field-reset > input[type=submit], .searchandfilter[data-sf-form-id="4617"] ul li.sf-field-submit > input[type=submit] { background-color: #312d7a; color: #fff; } .searchandfilter[data-sf-form-id="4617"] > ul > li { flex-grow: 1; } .searchandfilter[data-sf-form-id="4617"] p { display: inline-block; } .searchandfilter[data-sf-form-id="4617"] .sf-field-search p { flex-grow: 1; } .searchandfilter[data-sf-form-id="4617"] .sf-field-search label { width: 75%; } .searchandfilter[data-sf-form-id="4617"] .sf-input-text { border-radius: 1.75rem; } .searchandfilter[data-sf-form-id="4617"] .sf-input-text { width: 100%; } .searchandfilter[data-sf-form-id="4617"] > ul > li > p > label br { display: none; } .searchandfilter[data-sf-form-id="4617"] > ul > li.sf-field-reset, .searchandfilter[data-sf-form-id="4617"] > ul > li.sf-field-submit { flex-grow: 0; } .searchandfilter[data-sf-form-id="4617"] .sf-field-reset { padding-left: 10px; } .searchandfilter[data-sf-form-id="4617"] .sf-field-search { flex: 0 0 100%; display: flex; } .searchandfilter[data-sf-form-id="4617"] select.sf-input-select { min-width: 300px; width: auto; }
June 29, 2020 at 10:23 am #250386In reply to: Global “reset” for all filters active on page
TrevorParticipantWith the current version of the plugin, the reset link must be in the form, and not elsewhere on the page. This will change in V3 (due in a few months), when you will be able to move it. You can style the link, using Custom CSS. A search of the forum may reveal some snippets already posted:
https://support.searchandfilter.com/forums/search/sf-field-reset+background/
Such as this post:
June 18, 2020 at 8:16 am #249270In reply to: Sort on click
AnonymousInactiveHi Trevor, thanks very much. The example you can see online has the following CSS
/*============================================================================================*/ /*SEARCH AND FILTER COUSTOM FORM AND WIDGET */ /* Style for the basic form and as it appears in the widget */ /*============================================================================================*/ form#search-filter-form-243.searchandfilter { margin-top:0px; } #top select { font-family:'AvenirNextCondensedRegular', sans-serif; padding-top:0px; } a.search-filter-reset { font-family:'AvenirNextCondensedRegular', sans-serif; } #search-filter-form-243 .searchandfilter label { font-size: 23px; } .searchandfilter ul li:first-child { padding-top:0px; } .searchandfilter ul li.sf-field-reset { padding-top:18px; } .searchandfilter a.search-filter-reset { margin-left:9px!important; } #top .entry-content-wrapper select { background:none; border-radius: 0px; } #top #search-filter-form-243 select { border: none; background-color: transparent!important; margin-bottom: 5px!important; padding-left:0px!important; } #top select { font: 1em 'AvenirNextCondensedRegular', sans-serif!important; } @media only screen and (max-width: 767px) { .searchandfilter ul li { display: inline; } .widget #search-filter-form-243 li{ font-size: 18px!important; } .searchandfilter select.sf-input-select { min-width:120px; } }
I don’t find the way to take off the border-radius from the options container (I mean when you click on a select the dropdown container has a border with a radius which I don’t want). Also the font inside this container is not the one I chose (AvenirNextCondensedRegular) but it’s an Helvetica. There is no way to change it. Can you help me? Thanks!
For the rest, I will wait for V3.
June 11, 2018 at 5:43 am #180124In reply to: Change styling of Reset and Submit buttons
TrevorParticipantI think you need something like this:
.searchandfilter ul li.sf-field-reset input, .searchandfilter ul li.sf-field-submit input { width: 75px; background: #666; color: #fff; }
Or any other CSS attributes that you want to change you can add.
May 12, 2018 at 9:44 am #177199
TrevorParticipantFixed with this:
.wpt_widget_content .tab-content .searchandfilter ul li.sf-field-reset, .wptp_widget_content .tab-content .searchandfilter ul li.sf-field-reset { width: 75px; display: inline-block; margin-right: 50px; } .wpt_widget_content .tab-content .searchandfilter ul li.sf-field-submit, .wptp_widget_content .tab-content .searchandfilter ul li.sf-field-submit { width: 75px; display: inline-block; } .wpt_widget_content .tab-content .searchandfilter ul li.sf-field-reset input, .wpt_widget_content .tab-content .searchandfilter ul li.sf-field-submit input, .wptp_widget_content .tab-content .searchandfilter ul li.sf-field-reset input, .wptp_widget_content .tab-content .searchandfilter ul li.sf-field-submit input { width: 75px; background: #666; color: #fff; } .searchandfilter > ul > li select { width: 200px; } /* the next is 200px-(2*12px padding) - (2*1px border) */ .searchandfilter ul li.sf-field-search input { width: 174px; }
May 12, 2018 at 8:46 am #177189
TrevorParticipantoooh. That plugin has some badly (not very targetted) CSS. I have fixed the Custom CSS I wrote to this:
.wpt_widget_content .tab-content .searchandfilter ul li.sf-field-reset { width: 75px; display: inline-block; margin-right: 50px; } .wpt_widget_content .tab-content .searchandfilter ul li.sf-field-submit { width: 75px; display: inline-block; } .wpt_widget_content .tab-content .searchandfilter ul li.sf-field-reset input, .wpt_widget_content .tab-content .searchandfilter ul li.sf-field-submit input { width: 75px; background: #666; color: #fff; } .searchandfilter > ul > li select { width: 200px; } /* the next is 200px-(2*12px padding) - (2*1px border) */ .searchandfilter ul li.sf-field-search input { width: 174px; }
May 12, 2018 at 7:44 am #177170
TrevorParticipantFor the form, the Custom CSS you are looking for would be this:
.searchandfilter ul li.sf-field-reset { display: inline-block; margin-right: 50px; } .searchandfilter ul li.sf-field-submit { display: inline-block; } .searchandfilter ul li.sf-field-reset input, .searchandfilter ul li.sf-field-submit input { width: 75px; background: #666; color: #fff; } .searchandfilter > ul > li select { width: 200px; } /* the next is 200px-(2*12px padding) - (2*1px border) */ .searchandfilter ul li.sf-field-search input { width: 174px; }
I already added that in the WordPress Customiser for you.
-
AuthorSearch Results
-
Search Results