Search Results for 'sf-field-reset background'

[Iñigo Flores]

This reply has been marked as private.

Add New Note to this Reply

[Cristina Morbidoni]

This reply has been marked as private.

Add New Note to this Reply

[Trevor]

OK. 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;
}

Add New Note to this Reply

[Trevor]

With 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:

https://support.searchandfilter.com/forums/topic/change-styling-of-reset-and-submit-buttons/#post-180124

Add New Note to this Reply

[Elena Politi]

Hi 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.

Add New Note to this Reply

[Trevor]

I 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.

Add New Note to this Reply

[Trevor]

Fixed 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;
}

Add New Note to this Reply

[Trevor]

oooh. 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;
}

Add New Note to this Reply

[Trevor]

For 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.

Add New Note to this Reply