Apply CSS styling to sticky / pinned threads

[AzzidReign]

I'm trying to do this for locked threads...I have this and it isn't working:

.discussionListItem.visible.locked,
.discussionListItem.visible.locked .posterAvatar,
.discussionListItem.visible.locked .stats {
background: #E8E8E8;
font-style: italic;
}

 

[Travis]

Sorry to bump an old thread, but since you referred me here @Brogan. I have added

.discussionListItem.visible.sticky,
.discussionListItem.visible.sticky .posterAvatar,
.discussionListItem.visible.sticky .stats {
background: @inlineMod;
font-style: italic;
}
.discussionListItem.visible.sticky .title a:link,
.discussionListItem.visible.sticky .title a:visited {
color: ##090808;
}
.discussionListItem.visible.sticky .lastPostInfo .username {
color: ##090808;
}

And it works fine. What I need to change the color of is the Thread Starter Name, Time, Replies - Views Text - see selected read images in the attached image

 

[Paul B]

The easiest thing to do is to use a browser inspection tool - most of them have them as standard now.

If you use Chrome, right click on the element you want to check and select Inspect element.
Then you will see something like this in the console window:


That then gives you the class names to be able to apply styling following the examples.

 

[Travis]

The easiest thing to do is to use a browser inspection tool - most of them have them as standard now.

If you use Chrome, right click on the element you want to check and select Inspect element.
Then you will see something like this in the console window:
View attachment 84539

That then gives you the class names to be able to apply styling following the examples.

Sorry, I'm useless at this stuff. I added

.discussionListItem.visible.sticky .posterDate muted {
color: red;
}

But it did nothing?

 

[Amaury]

Sorry, I'm useless at this stuff. I added

.discussionListItem.visible.sticky .posterDate muted {
color: red;
}

But it did nothing?

Try adding an !important; declaration.

 

[Travis]

Try adding an !important; declaration.

Nope nothing

 

[maszd]

thanks @Brogan very usefull for my forum, work fine on 1.4.1

 

[Joe Link]

@Brogan how can I modify this to also gray out locked threads, in specific nodes?

 

[Paul B]

Something like .node58 .discussionListItem.locked

Change the node ID to suit and also apply the other classes as required.

 

[Joe Link]

Thanks!

 

[rafass]

Great small customisation! thanks Brogan!

 

[Deleted member 241496]

This isn't working....any idea if it still works in 2.2?

 

[Paul B]

This is an XF1 resource.

 

[Deleted member 241496]

Well that would make since lol. I literally just found the answer on another forum for XF 2.2.

/* Sticky thread background color */
.structItemContainer-group--sticky,{
background-color: #ECF0F1 !important;
font-style: italic;
}