Hide all "about the x category" topics

I’m aware these are all always visible to admins by default. But let’s say I don’t want to see them on my personal site I’m building on Discourse, even as an admin.

How could I hide all of these topics in all categories?

You can unlist them but then you’ll still see them because you are an admin. :thinking: Though you could mute the topics.

Maybe this is possible with CSS?

I’m not sure they have a dedicated class?

I think I’d try the ‘tag them all and mute the tag’ approach as it seems like the most minimum effort. (But unlist them for everyone else’s benefit)

Out of curiosity, why do you want to hide them from yourself?

1 Like

Out of curiosity, why do you want to hide them from yourself?

Honestly? I just don’t like seeing them. If I go to my blog…I just want to see my blog too :slight_smile:

I found a solution. This obviously isn’t a scalable solution, and may even not be technically optimal (not sure how this would be handled on larger sites with lots of page loads, etc.), but It is one that works for me since I just have one category for my blog:

ChatGPT gave me this and it worked first try. Just targeting this very specific topic ID and hiding it:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var element = document.querySelector('[data-topic-id="10"]'); //replace 10 with your topic ID
    if (element) {
      element.style.display = 'none';
    }
  });
</script>

Viola!

1 Like

If you’re curious on the enterprise take (because I know I posted/you responded about this many moons ago), it’s just an inconsistent administrative experience to have a Discourse topic utilized as a category setting, while no other category settings are represented as a Discourse topic. It’s very disjointed (though still very clever!). I also see these About topics renamed, utilized as getting started guides (I do this myself, though only because I’m forced to keep it), etc.

I do understand why and the initial value of utilizing a topic as an existing place to house the topic description. I also see the potential in that same ability, like the discourse-category-sidebars theme component text being housed by a topic.

But from a UX and administrative perspective, I would expect that all of my category settings are simply in one place. Discourse already stores text as a setting within the category, with markdown and all, for the category template. It would be great to see consistency brought to the category in this way.

I hope this gives a bit more insight!


EDIT: If I’m missing value somewhere though that I haven’t seen, point me to it! :rocket:

Also, EDIT:

Bummer. It looks like the script I linked to above only works the first time the webpage is loaded in the browser. If you navigate around the site and come back, those elements return. With my limited (read: absolutely zero) web dev knowledge, I assume it’s because DOMContentLoaded isn’t running again after the site is loaded in.

The search continues…

I think if you’re looking to hide just one topic then you can probably do that with CSS. My CSS is poor, but I can see the data-topic-id in there, so it can likely be targeted?

Ah, there’s a gotcha! in there. If you repurpose it then that one doesn’t show up in some topic lists or fire notifications when people reply, etc. I think the best thing to do with them, as is, is just to leave them as category descriptions and close them off (and unlist them if you didn’t want them visible to most people). Dev tweaks aside, obviously, if you can swing it. :slight_smile:

Storing the category description in topics has cropped up as an internal discussion, as well as the way we handle ToS and Guidelines, etc. No immediate plans to change the format though, but I think there’s definitely a conversation in there to be had.

There is a feature topic about changing the default

2 Likes

This is an update that works perfectly for my use case.

If you want to hide a particular topic via CSS, on page load and henceforth, this will do it. Just add your topic IDs to the list of topic IDs:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var topicIdsToHide = ["10", "20", "30"]; // Add your topic IDs here

    function hideElementsByDataTopicIds() {
      topicIdsToHide.forEach(function(id) {
        var element = document.querySelector('[data-topic-id="' + id + '"]');
        if (element) {
          element.style.display = 'none';
        }
      });
    }

    // Run the function initially
    hideElementsByDataTopicIds();

    // Create a mutation observer to monitor DOM changes
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        hideElementsByDataTopicIds();
      });
    });

    // Observe the entire document
    observer.observe(document.body, { childList: true, subtree: true });
  });
</script>