Highlight pinned topic?

Support

AI-generated summary

Highlighting Pinned Topic Titles

The discussion revolves around highlighting the title of pinned threads in a forum. SidV initially asked for advice on how to achieve this, sharing an example image of the desired outcome.

Mittineague suggested targeting the icon using div.topic-statuses span.topic-status i.fa.fa-thu mb-tack and possibly using JavaScript. simon proposed using .has-excerpt to get the parent row.

simon provided a CSS code snippet to add to the admin>customize>css/html area, which SidV later modified to achieve the desired result.

The modified CSS code is:

.list-container .has-excerpt .title {
    background: rgba(255,230,0,0.5);
    padding: 0px 5px !important;
    margin: -3px 0px;
    line-height: 1.7;
    border-radius: 20px;
    display:inline-block;
}

However, Json_Blob encountered an issue with adding the code, as the current design doesn’t have a CSS/HTML area in the customize menu. cpradio suggested adding it as a component, but Json_Blob remains unsure about the process.

1

Hello my friends, how could I highlight the title of pinned thread?

I mean:

Pasted image313Ă—107 12.2 KB

I need something like that (of course thats an image to example)

Thank for your advices.
Regards

2

I was going to suggest you use your browser’s developer tools to capture the CSS class but I did not find anything that screams “pinned” when I checked it for myself.

3

I’ve used this to target the icon
div.topic-statuses span.topic-status i.fa.fa-thumb-tack
But as CSS doesn’t have “parentNode” I think you may need to use JavaScript

4

Maybe .has-excerpt will work to get the parent row.

5

Excuse my ignorance but my knowledge of CSS are limited, how could highlight the text from there?

Could you tell me an example please? :blush:

6

I think, but I’m not sure, that the only items in the topic list that have the class .has-excerpt are the pinned topics. You could try adding this to the admin>customize>css/html area

.list-container .has-excerpt .title {
    display: inline-block; // makes it easier to position
    background: yellow; // gives the title a yellow background
}
// gives the pin icon a yellow background and pads it out to match the title
.has-excerpt .topic-status {
    display: inline-block;
    background: yellow;
    padding: 15px;
}

If you figure out how to use the developer tools in your web browser you can play around with it until it works.

7

I just tried this

tr.has-excerpt td.main-link a { 
  background-color: #FF0; 
}

which seems close, but not quite

pin-hilite.png314Ă—137 2.6 KB

8

Thanks very much.

Now we’ve got this:

Pasted image506Ă—134 12 KB

Css code:

.list-container .has-excerpt .title {
    background: rgba(255,230,0,0.5);
    padding: 0px 5px !important;
    margin: -3px 0px;
    line-height: 1.7;
    border-radius: 20px;
    display:inline-block;
}

Thanks again !

9

Is this added as a component in current design? The current design doesn’t have a CSS/HTML area in the customize menu of the admin section so i’m not sure where I should plop the code chunk above.

10

Yes, you can add it as a component so long as your component is included in your current theme.

11

Hrm, not sure what I’m missing here in the translation. can you take a peek at this?

Capture
Capture879Ă—501 19.4 KB

What do I need to do from here? I see the “Make theme” button, is that what I want? The warning message had me a little worried to click on it