Address /latest differently then /new etc via CSS

Support
4

You can add this to the header tab of your theme and it will add the classes to the <body> tag as you navigate

<script type="text/discourse-plugin" version="0.8">
api.modifyClass("component:d-navigation", {
  didInsertElement() {
    document.body.classList.add(`filter-mode-${this.filterType}`);
  },

  willDestroyElement() {
    document.body.classList.remove(`filter-mode-${this.filterType}`);
  }
});
</script>

It will add filter-mode-FILTERMODE as a class like so

filter-mode-top
filter-mode-new
filter-mode-latest

You can then combine that with the navigation-topics class to make your CSS specific like so

.navigation-topics.filter-mode-new {
  // do stuff
}

Do note that using CSS to hide images will not prevent the browser from downloading them. You won’t get any bandwidth savings from this, only visual changes.

Also, nice site :+1:

5 Likes