Apply CSS styling to sticky / pinned threads

Apply CSS styling to sticky / pinned threads

AzzidReign

Well-known member
I'm trying to do this for locked threads...I have this and it isn't working:
Code:
.discussionListItem.visible.locked,
.discussionListItem.visible.locked .posterAvatar,
.discussionListItem.visible.locked .stats {
background: #E8E8E8;
font-style: italic;
}
 

Travis

Active member
Sorry to bump an old thread, but since you referred me here @Brogan. I have added
Code:
.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
Screen Shot 2014-09-21 at 5.32.58 AM.png
 

Brogan

XenForo moderator
Staff member
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:
upload_2014-9-20_22-40-10.png

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

Travis

Active member
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

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

But it did nothing?
 

Brogan

XenForo moderator
Staff member
Something like .node58 .discussionListItem.locked

Change the node ID to suit and also apply the other classes as required.
 
Well that would make since lol. I literally just found the answer on another forum for XF 2.2.
Code:
/* Sticky thread background color */
.structItemContainer-group--sticky,{
background-color: #ECF0F1 !important;
font-style: italic;
}
 
Top