Add an icon in front of wikis in the topic list?

Dev
1

There is no specific CSS class in the topic list.
Is it possible by editing the topic list template?

3 Likes
2

If you only want to add a class to the topic list item component, you can do that without modifying the template. You can use something like this.

const discourseComputed = require("discourse-common/utils/decorators").default;

api.modifyClass("component:topic-list-item", {
  pluginId: "add-views-class",
  @discourseComputed()
  unboundClassNames() {
    // log the topic properties to see what you have to work with
    console.log(this.topic);
    // inherit the default classes from core and plugins
    let classList = this._super(...arguments);
    // add your new classes based on a property
    if (this.topic.views > 100) {
      classList += " has-many-views";
    }
    // return the modified classList
    return classList;
  }
});

Then a bit of CSS

.has-many-views {
  background: red;
}

Unfortunately, wiki is a post-level, not a topic-level property. So, It’s not added to the topic list item model. You can use a tag or create a feature request for Discourse to add that class.

6 Likes
3

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