Forums Forums Search & Filter Pro Alphabetical Filters

Viewing 10 posts - 1 through 10 (of 11 total)
  • Anonymous
    #248664

    Hello. I was wondering if it’s possible to create an alphabetical sort that appears as a horizontal list of letters at top of my posts. I have already created an alphabetical sort using a dropdown and custom post types, but now I would like to have all the letters appear in a horizontal line. Can I do that using Custom CSS? Link below.

    https://plplightingsocal.wpcomstaging.com/line-card/

    Trevor
    #248757

    You would need a custom field with the one letter in it. Have a look at these two threads (the private posts are not relevant):

    https://support.searchandfilter.com/forums/topic/a-to-z-filter/

    https://support.searchandfilter.com/forums/topic/a-to-z-filter-2/

    Anonymous
    #248848

    Hi Trevor,

    Thank you for the quick response. I do an alphabetical sort already that is using custom taxonomies. Right now, I have it set up as a dropdown, and it works perfectly. However, I was asked to make it a horizontal list. I was hoping you might have a little advice on what the custom CSS might be to make it appear horizontally?

    Thanks

    Trevor
    #248852

    Are you able to send me a live link/URL to your search page so I can take a look?

    Anonymous
    #248894
    Trevor
    #248896

    Would you prefer these as buttons and for the checkbox to disappear, so clicking on the letters to select them?

    Anonymous
    #248898

    Yes, exactly. It would be great if I could hide the checkbox, and just have the letters appear horizontally.

    Trevor
    #248900

    This CSS should get you started:

    .searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical input {
      display: none;
    }
    .searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical label {
      text-align: center;
      width: 2.2em;
      line-height: 1.4em;
      border: 2px solid #666;
      padding: 3px;
      text-indent: 0;
      border-radius: 5px;
    }
    .searchandfilter[data-sf-form-id="1052"] ul {
      padding-left: 0;
    }
    .searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical > ul > li {
      display: inline-block;
      margin-right: 10px;
    }
    .searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical {
      display: block;
    }
    .searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical label:hover {
      cursor: pointer;
    }
    .searchandfilter[data-sf-form-id="1052"] .sf-input-checkbox:checked + .sf-label-checkbox {
      color: #fff;
      background: #666;
    }
    Anonymous
    #248902

    That worked great! Thank you! However, now when i click one of the letters, it goes back to a vertical list of letters with no formatting. Is it possible to keep this formatting after a filter is applied?

    Anonymous
    #248904

    Sorry, disregard my last message. I think it hadn’t fully updated when i previewed the page. This works perfectly now! Thank you!

Viewing 10 posts - 1 through 10 (of 11 total)