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

1 Like

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.

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

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:

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.

2 Likes

I just tried this

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

which seems close, but not quite

2 Likes

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 !

7 Likes

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.

1 Like

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

2 Likes

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

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