Highlight pinned topic?


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

I mean:

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

Thank for your advices.

(⛰️) #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.

(Mittineague) #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

(Simon Cossar) #4

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


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:

(Simon Cossar) #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.

(Mittineague) #7

I just tried this

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

which seems close, but not quite


Thanks very much.

Now we’ve got this:

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;

Thanks again !