Topic-specific css/script


(Paul) #1

We hold a weekly trivia competition and have a single topic page to display the results.

I want to add some decoration/confetti animation to this topic which would need a few lines of CSS and Javascript. I tried encapsulating this within [data-topic-id=“117”] {} but it still showed up on every page.

Is there a way to specify in the head for CSS or body for javascript, a particular topic that it applies to?


(Sam Saffron) #2

A data-topic-id selector should work here, there is no reason why not, what is the exact CSS you are trying to add?


(Dakota) #3

I had this same issue too. I’m not sure what causes it but you can use getModel() instead. Try something like this:

<script type="text/discourse-plugin" version="0.8.18">
api.decorateWidget('post-avatar:after', dec => {
  $(function() {
    if ($('[data-topic-id]').length) {
      var poster = dec.getModel();

      if (poster.topic_id === 117) {
        // your code here
      }
    }
  });
});
</script>

for CSS just use jQuery inside the commented area to add a class that contains whatever customizations you want


(Biscuit) #4

This didn’t work for me.

I put your code under: Common: </head>

I changed the topic_ID to match the topic number listed in the URL. And just typed some text in the commented line, to keep it simple, but it didn’t appear when that topic was opened.


(Paul) #5

Will give that a try… Am trying to use the javascript/css from this code