Introduce a "highlight topic" feature

Feature
1

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

2

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.

1 Like
3

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.

4

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

5

IMG_20211106_231817
IMG_20211106_2318171440Ă—3200 206 KB

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.

6

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:

image
image1136Ă—255 21.6 KB

6 Likes
7

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.

3 Likes
8

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;
}
1 Like
9

What is “the topic itself” in this context?

10

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.

11

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;
}
1 Like
12

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;
}
13 
.tag-extra-special-topic #topic-title .fancy-title {
  color: papayawhip;
}
14

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

15

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

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

Screenshot 2024-07-04 075937

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

Screenshot 2024-07-04 075913

What’s up with that :lol:?