# Adding visited class to topic-details instead of just topic-title

**URL:** https://meta.discourse.org/t/adding-visited-class-to-topic-details-instead-of-just-topic-title/47850
**Category:** Development
**Created:** [27.Июль.2016 05:34:14 UTC](https://meta.discourse.org/t/adding-visited-class-to-topic-details-instead-of-just-topic-title/47850 "2016-07-27T05:34:14Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![andrewroth](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andrewroth/32/115142_2.png) [@andrewroth](https://meta.discourse.org/u/andrewroth)
#### Post date: [27.Июль.2016 05:34:14 UTC](https://meta.discourse.org/t/adding-visited-class-to-topic-details-instead-of-just-topic-title/47850/1 "2016-07-27T05:34:14Z")

</div>

Hi all,

The team I’m working with is using the topic previews plugin, and we want to make the plugin text the same as the title’s visited style if the topic has been visited. I quickly found out that that plugin caches all the topic previews, so putting the visited class directly on the preview is out of the question.

The general structure I see is

```
<div class="topic-details">
    <div class="topic-title"><a class="title visited">LINK</a></div></div>
    <div class="topic-excerpt" style="max-height: 80px;">EXCERPT</div>
</div>

```

So I want to put the visited class on the topic-details instead of the topic-title. Then I can use css on a parent .topic-details.visible to hit the .topic-except.

```
<div class="topic-details visited">
    <div class="topic-title"><a class="title visited">LINK</a></div></div>
    <div class="topic-excerpt" style="max-height: 80px;">EXCERPT</div>
</div>

```

When I tried to do this, I traced the code to discourse/routes/build-topic-route ` this.render('discovery/topics', { controller: 'discovery/topics', outlet: 'list-container' });` and then to `jsapp/templates/discovery/topics.hbs` which has `{{topic-list ... }}`.

Past that, I’m totally stuck figuring out where topic-list is rendered from. Can anyone help? And does this seem like a logical and useful addition? I think other plugins that add content in the topic list would also benefit.

On another note (and maybe this needs its own thread), coming from rails, I feel totally overwhelmed in trying to figure out which file defines which method/helper/controller/template. Add to that the fact that you can’t step through templates in javascript like you can in rails, and it’s really hard to track down where exactly things I see on the page are coming from. I’ve also tried the ember chrome plugin, but their view explorer stops drilling down far too early to be useful. The ember js tutorials/explanations are helpful but discourse truly seems order of magnitude more complex. Any suggestions on how to approach this would be very welcome. Thanks!

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [27.Июль.2016 05:52:53 UTC](https://meta.discourse.org/t/adding-visited-class-to-topic-details-instead-of-just-topic-title/47850/2 "2016-07-27T05:52:53Z")

</div>

> [@andrewroth](#):
>
> So I want to put the visited class on the topic-details instead of the topic-title.

All of this stuff is being injected via the plugin in a rather hacky way (I guess @angus only had the alternative of totally rewriting the template)

> <https://github.com/merefield/discourse-topic-previews-sidecar/blob/74bd386ea980a27f755b9bfbf275043fe8649a27/assets/javascripts/discourse/initializers/preview-edits.js.es6#L90-L92>

I found it by searching for the particular string in the plugin

---

<div class="post-metadata">

### Author: ![andrewroth](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andrewroth/32/115142_2.png) [@andrewroth](https://meta.discourse.org/u/andrewroth)
#### Post date: [27.Июль.2016 06:05:01 UTC](https://meta.discourse.org/t/adding-visited-class-to-topic-details-instead-of-just-topic-title/47850/3 "2016-07-27T06:05:01Z")

</div>

Ah, I was mistaken in thinking topic-details was coming from discourse core. I didn’t notice the wrapAll’s in the plugin. My mistake.. thanks for the pointer. I’ll take discussion back into the topic previews plugin.

I would still be curious as to where {{topic-list ..}} [discourse/app/assets/javascripts/discourse/templates/discovery/topics.hbs at c58123b421938f8d56469ec737480efc39fc6fdb · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/c58123b421938f8d56469ec737480efc39fc6fdb/app/assets/javascripts/discourse/templates/discovery/topics.hbs#L35) goes to – seems to be a helper but I can’t find where it’s defined.

Thanks again.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [27.Июль.2016 06:11:12 UTC](https://meta.discourse.org/t/adding-visited-class-to-topic-details-instead-of-just-topic-title/47850/4 "2016-07-27T06:11:12Z")

</div>

The topic list is all in “raw” handlebars templates.

We have 3 rendering systems at the moment (and may unify a couple of them)

- Ember rendering, which is used in most places, it works great but is not particularly fast.

- Raw handlebars rendering, `.raw.hbs` files. A completely unbound rendering engine used in topic lists which is designed for raw speed.

- Widgets system. A vdom based approach (similar to what react offers) that we use for perf critical areas such as showing topics or headers. The widget system does not have backing handlebars files the HTML structure is defined in code.

---

<div class="post-metadata">

### Author: ![andrewroth](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andrewroth/32/115142_2.png) [@andrewroth](https://meta.discourse.org/u/andrewroth)
#### Post date: [27.Июль.2016 06:28:33 UTC](https://meta.discourse.org/t/adding-visited-class-to-topic-details-instead-of-just-topic-title/47850/5 "2016-07-27T06:28:33Z")

</div>

Ah I see. Interesting way to do things.

A forum like this with people who can explain things definitely helps in learning what’s going on 🙂

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [27.Июль.2016 15:27:31 UTC](https://meta.discourse.org/t/adding-visited-class-to-topic-details-instead-of-just-topic-title/47850/6 "2016-07-27T15:27:31Z")

</div>

> [@andrewroth](#):
>
> Any suggestions on how to approach this would be very welcome. Thanks!

I wrote a brief overview for this purpose. Thanks for your PR for Topic List Previews, I’ll review it later today.

> [@Learn how to start building stuff for Discourse if you're newbie (like myself)](https://meta.discourse.org/t/how-to-start-building-stuff-for-discourse-if-youre-newbie-like-myself/45954):
>
> There are a few ‘how to start’ guides for working with Discourse already and a wealth of useful info on meta, but I thought it might help to give an insight to the mental processes of starting from little, if any, prior coding experience to building substantial Discourse plugins. Discourse is written by experienced developers and has a large codebase. This can feel intimidating. This intimidation factor can be a significant barrier for novice developers. This is a kind of ‘psychological primer’…
