Support Forums

The forums are closed and will be removed when we launch our new site.

Looking for support? You can access the support system via your account.

Forums › Forums › Search & Filter Pro › Alphabetical Filters

Viewing 10 posts - 1 through 10 (of 11 total)
1 2
  • Zachary Kulpinski
    (Private)  June 12, 2020 at 10:57 pm #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 Moderator
    (Private)  June 15, 2020 at 11:41 am #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/

    Zachary Kulpinski
    (Private)  June 15, 2020 at 3:49 pm #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 Moderator
    (Private)  June 15, 2020 at 3:53 pm #248852

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

    Zachary Kulpinski
    (Private)  June 15, 2020 at 4:31 pm #248894

    Sure, no problem. See below.

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

    Trevor Moderator
    (Private)  June 15, 2020 at 4:40 pm #248896

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

    Zachary Kulpinski
    (Private)  June 15, 2020 at 4:46 pm #248898

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

    Trevor Moderator
    (Private)  June 15, 2020 at 4:59 pm #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;
}
    Zachary Kulpinski
    (Private)  June 15, 2020 at 5:04 pm #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?

    Zachary Kulpinski
    (Private)  June 15, 2020 at 5:05 pm #248904

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

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 11 total)
1 2

The topic ‘Alphabetical Filters’ is closed to new replies.