Forums Forums Search Search Results for 'sf-field-reset background'

Viewing 7 results - 1 through 7 (of 7 total)
  • Author
    Search Results
  • #258369

    Trevor
    Participant

    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;
    }
    #250386

    Trevor
    Participant

    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

    #249270

    In reply to: Sort on click


    Anonymous
    Inactive

    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.

    #180124

    Trevor
    Participant

    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.


    Trevor
    Participant

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

    Trevor
    Participant

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

    Trevor
    Participant

    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.

Viewing 7 results - 1 through 7 (of 7 total)