Address /latest differently then /new etc via CSS

Support
1

I’d like to have a different style on our homepage (which is /latest) then on /new, /unread etc. Is this possible via CSS at the moment? Thanks!

1 Like
2

We don’t add any classes based on the current filter. What are you trying to do?

2 Likes
3

We use the topic list preview plugin to show teaser images and would like to have them on the homepage only: https://1e9.community/

1 Like
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
5

Thanks so much! Great help!

2 Likes
9

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