Introduce a "highlight topic" feature

[tachibanalolo]

For those great topic, it seems there is no way to give them an encourage such as highlight their post.

@tachibanalolo

Something like that. Color and bold the topic title and with a star… just a sample, so that user can know that this topic is highlighted and featrued.

[Falco]

To highlight a topic in the topic list you can pin the topic to the top to the list. This is a native Discourse feature.

[tachibanalolo]

I know that, however in my opinion pin is for rules of this category or something like that. For me I prefer there is a way to highlight some of the topic in list or not pin them.

[Falco]

Can you share a mock-up of how you envision that working?

[tachibanalolo]

Something like that. Color and bold the topic title and with a star… just a sample, so that user can know that this topic is highlighted and featrued.

[Falco]

Oh cool! You can easily accomplish that with a small theme component. First create a staff tag to denote this “highlight” state, let’s say it’s “highlight”. Then you tag the topics you want to highlight with this tag.

On the theme code you need to style it as you want let’s say:

tr.tag-highlight {
    background-color: blue;
    font-weight: bold;
    border: 3px dotted pink;
}

Then it looks like this:

[tachibanalolo]

I know how to do it in css, that sample is actually working on my discourse. I just want to know is that possible to build in this function in official? I think highlight is a pretty useful function.

[pfaffman (Jay Pfaffman)]

This is very cool and works to highlight topics in topic lists, but I also want to highlight the topic itself. It seems that the tag exists on a topic page only for the tag itself.

I tried doing this, which seems like might work, but I’m probably doing it wrong.

.title-wrapper div.has-highlight {
  /* Styles for the <h1> with the class */
  color: blue !important;
  font-weight: bold;
}

[Falco]

@pfaffman

but I also want to highlight the topic itself.

What is “the topic itself” in this context?

[pfaffman (Jay Pfaffman)]

On the topic page for topics with the tag, I want to style the topic a different color (or whatever) so that it shows as special not only in the topic lists, but also when you visit the topic page.

[Falco]

Oh you mean the first post in a topic, the OP right?

body.tag-highlight article#post_1 {
    background-color: blue;
    font-weight: bold;
    border: 3px dotted pink;
}

[pfaffman (Jay Pfaffman)]

That’s great! Now how do I target the TITLE of the topic?

// this targets the tag itself
a[data-tag-name="extra-special-topic"] {
    color: yellow !important;
}

// this changes the title on topic-lists
.tag-extra-special-topic  .raw-topic-link {
    color: blue !important;
}

// This targets the background/body of the OP
body.tag-extra-special-topic article#post_1 {
    background-color: blue;
    font-weight: bold;
    border: 3px dotted pink;
}

[manuel (Manuel Kostka)]

.tag-extra-special-topic #topic-title .fancy-title {
  color: papayawhip;
}

[shawa]

My dear friend, have you attempted the approach they suggested? I must confess, their explanation eluded my comprehension.

[Kartoon]

@shawa

My dear friend, have you attempted the approach they suggested? I must confess, their explanation eluded my comprehension.

Which part? You just open your theme editor and edit the CSS

@pfaffman

Summary

// this targets the tag itself
a[data-tag-name="extra-special-topic"] {
    color: yellow !important;
}

// this changes the title on topic-lists
.tag-extra-special-topic  .raw-topic-link {
    color: blue !important;
}

// This targets the background/body of the OP
body.tag-extra-special-topic article#post_1 {
    background-color: blue;
    font-weight: bold;
    border: 3px dotted pink;
}

This did something weird for me, when I’m in the highlighted topic it then applies to other topics at the bottom in the " New & Unread Topics" list

But if I’m NOT in the topic only the highlighted one is highlighted (as you’d expect)

What’s up with that ?