Highlight pinned topic?


#1

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.
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.


(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.


#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:


(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


#8

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;
    display:inline-block;
}

Thanks again !