Filterable Index displaying all posts, not just the first category (Ethos)

Support
#1

Hi! I’m using Ethos with the filterable index on for posts. Every post is labeled with a category to group it into the appropriate topics. When I click on the Posts page (“News”), the only thing that displays are the posts within the category that comes first (“Energy & Bioproducts”). I’d like this to display all posts, instead of automatically opening to just the post in that first category.

The workaround I’m using now is adding all posts to a category called “All” and since that’s first alphabetically, it displays all posts when the News page is first opened. However, there are a couple problems this workaround causes. First, there are now two categories called All in the filterable index (on is the category All and one is the default setting to display all posts).

Second, a button displays at the end of the page that says “Show all all posts.” This would normally be something like “Show all energy & bioproducts posts” or something like that with another category.

So how do I get the “News” page to display all of the most recent posts, not just the most recent posts in the category that comes first alphabetically, without having to do this workaround?

Sorry for the long message. And thanks for a great product!! Cheers.

#2

Hi There,

Yes, that is how it works by default. The first filter is the first category. For the work around, let’s just hide the default all filter with the following custom CSS so category all that was added is what we will need to display all post at once:
ul.x-index-filters-menu.unstyled li:first-child { display: none; }

Try that and then check again

#3

Thanks! That worked perfectly! Is there a way to address the “See All All Posts” button issue at the bottom of the page (screenshot attached)?

#4

Hi There,

Please navigate to your Custom CSS (X > Launch > Theme Options > CSS) and look for this block:

.x-btn {
  color: rgb(141,181,53) !important;
  border-color: rgb(141,181,53) !important;
  font-weight: bold !important;
  display: inline-block !important;
  text-align: center !important;
  margin: 0 auto !important;
}

Remove the line display: inline-block !important;

Hope it helps,
Cheers!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.