Forums Forums Search Search Results for '.searchandfilter custom css'

Viewing 10 results - 81 through 90 (of 286 total)
  • Author
    Search Results
  • #243995

    In reply to: custom styles


    Trevor
    Participant

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

    #243818

    Trevor
    Participant

    On 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;
    }
    #243765

    Trevor
    Participant

    In 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;
    }
    #243725

    Trevor
    Participant

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

    Trevor
    Participant

    Try 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
    }
    #242296

    In reply to: Check Box Size


    Trevor
    Participant

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

    Trevor
    Participant

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


    Trevor
    Participant

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

    https://support.searchandfilter.com/forums/topic/elementor-filter-not-working-showing-all-results/#post-221562

    #240351

    Anonymous
    Inactive

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

    #239841

    In reply to: SF not working


    Trevor
    Participant

    Is this custom CSS what you need?

    .searchandfilter[data-sf-form-id="2275"] > ul > li > ul > li {
        display: inline-block;
        margin-right: 15px;
    }
Viewing 10 results - 81 through 90 (of 286 total)