Is there a way to style the "Latest" page and "Top" page separately?

support
4

Yes, @nolo’s solution is a good approach for achieving things quite simply. Using window.location.href you may run into issues with getting the correct url due to Ember’s runloop anyways.

To adjust what your doing into the more “Ember” approach would be to do something like this:

<script type="text/discourse-plugin" version="1.1.0">
  api.onPageChange(() => {
    const router = api.container.lookup('service:router');

    if (router.currentRoute.name === 'discovery.top') {
      document.querySelectorAll('#main-title')[0].style.display = 'none';
    } 
  });
</script>

However, its probably best if you simply add a body class and style that class, which will also allow you to make more complex style changes.

<script type="text/discourse-plugin" version="1.1.0">
  api.onPageChange(() => {
    const router = api.container.lookup('service:router');

    if (router.currentRoute.name === 'discovery.top') {
      document.body.classList.add('route-discovery-top');
    } else {
      document.body.classList.remove('route-discovery-top');
    }
  });
</script>

.route-discovery-top #main-title {
    display: none;
}
3 Likes