Restrict topics from only one category in the Latest homepage zone


(Frank) #1

Hi all! I am having fun with discourse so far. It’s really user oriented and nice for the eyes :slight_smile:

I choosed the hybrid homepage (Category/latest). But i want to restric the topics appearing in Lastest zone to one category only.

The option called “Suppress this category from the homepage.” is doing too much. It also hide the category from the homepage (left zone)… which is not want I want at all. :wink: I only want to filter the latest topics zone to one category.

How can I achieve that?


(Frank) #2

Did anyone have achieved that?


(Mittineague) #3

I haven’t tried it, and depending on where the class values are it might not be possible, but have you tried using CSS to eg. display none them yet?


(Frank) #4

No. You mean put a display none to all the categories class I dont want?


(Frank) #5

Could you explain it more in details?


(Mittineague) #6

The way I usually start is to use my browser’s dev tools to “inspect” the page element of interest. Determining the correct selector to use can be tricky sometimes, but by looking at tag type, and class and id values, and at times other attributes and values, of the element, it’s ancestors and sometimes it’s siblings, a selector can usually be determined. If all that sounds foreign to you, this might help


(Frank) #7

Yup. I did look into css code. But i did’nt found selectors to use for categories filtering.


(Mittineague) #8

Which ones did you try and what effect if any did they have?


(Frank) #9

Problem is that the id are unique for each post/topic. Discourse don’t seem to generate id that are specific to a category. See here, each DIV is a topics appearing in the Latest column of the frontpage. They are from the same category.


(Mittineague) #10

Ah, I was thinking you meant the Latest page where the CSS is easy. You’re talking the Category “hybrid” page.

Indeed, because there is no such thing as an “ancestor” selector this can not be done with CSS. The first occurrence of “category name” is deeper than what would need to be targeted.

<div class="latest-topic-list-item visited ember-view"> 
  <div class="topic-poster"></div> 
  <div class="main-link"> 
    <div class="top-row"></div> 
    <div class="bottom-row"> 
      <a href="category-name"> 
        <span></span>
        <span> 
          <span>category-name</span> 
        </span> 
      </a>
    </div>
  </div>
  <div class="topic-stats">
    <div class="num posts-map posts heatmap-"></div>
    <div class="topic-last-activity"></div>
  </div>
</div> 

If the category name (or id number) were in the container div it would be easy. Otherwise JavaScript could be used to “parentNode” to it.


(Frank) #11

Yep… can 't be done by now. I am sure I am not the only one looking for it.

This should be added to features.


(Joe) #12

Maybe something like this?

<script type="text/discourse-plugin" version="0.8.16">
    api.onPageChange(() => {
      	$('.categories-and-latest a[href="/c/CATEGORY_NAME"]') // <~ change CATEGORY_NAME as needed
		.closest(".latest-topic-list-item")
		.hide();
    });
</script>

Disallow topics from some categories from showing up on the /latest homepage while still showing the category itself on the front page
(Frank) #13

Ohh nice! Works fine. :ok_hand:

How could I add more than one category to hide?


(Joe) #14

You repeat the selector with a different category name like so:

<script type="text/discourse-plugin" version="0.8.16">
    api.onPageChange(() => {
      	$('.categories-and-latest a[href="/c/CATEGORY_A_NAME"], .categories-and-latest a[href="/c/CATEGORY_B_NAME"]') // <~ change CATEGORY_A_NAME and CATEGORY_B_NAME  as needed
		.closest(".latest-topic-list-item")
		.hide();
    });
</script>