Forums › Forums › Search & Filter Pro › Alphabetical Filters
- This topic has 10 replies, 2 voices, and was last updated 4 years, 5 months ago by Trevor.
-
Anonymous(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.
Trevor(Private) June 15, 2020 at 11:41 am #248757You 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(Private) June 15, 2020 at 3:49 pm #248848Hi 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(Private) June 15, 2020 at 4:59 pm #248900This 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; }
-
AuthorPosts