Apply CSS styling to sticky / pinned threads

AzzidReign

Well-known member

• Aug 27, 2012

• %22 data-success="Embed code HTML copied to clipboard." class="">
• #41

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

• Sep 20, 2014

• %22 data-success="Embed code HTML copied to clipboard." class="">
• #42

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

 

P

Paul B

XenForo moderator

Staff member

• Sep 20, 2014

• %22 data-success="Embed code HTML copied to clipboard." class="">
• #43

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

Active member

• Sep 20, 2014

• %22 data-success="Embed code HTML copied to clipboard." class="">
• #44

Brogan said:

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.

Click to expand...

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

Code:

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

But it did nothing?

 

A

Amaury

Well-known member

• Sep 20, 2014

• %22 data-success="Embed code HTML copied to clipboard." class="">
• #45

Travis said:

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

Code:

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

But it did nothing?

Click to expand...

Try adding an !important; declaration.

 

Travis

Active member

• Sep 20, 2014

• %22 data-success="Embed code HTML copied to clipboard." class="">
• #46

Maru said:

Try adding an !important; declaration.

Click to expand...

Nope nothing

 

maszd

Well-known member

• Oct 10, 2014

• %22 data-success="Embed code HTML copied to clipboard." class="">
• #47

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

 

Joe Link

Well-known member

• Nov 21, 2014

• %22 data-success="Embed code HTML copied to clipboard." class="">
• #48

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

 

P

Paul B

XenForo moderator

Staff member

• Nov 21, 2014

• %22 data-success="Embed code HTML copied to clipboard." class="">
• #49

Something like .node58 .discussionListItem.locked

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

 

Joe Link

Well-known member

• Nov 21, 2014

• %22 data-success="Embed code HTML copied to clipboard." class="">
• #50

Thanks!

 

rafass

Well-known member

• Jan 5, 2015

• %22 data-success="Embed code HTML copied to clipboard." class="">
• #51

Great small customisation! thanks Brogan!

 

D

Deleted member 241496

Guest

• Nov 16, 2021

• %22 data-success="Embed code HTML copied to clipboard." class="">
• #52

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

 

P

Paul B

XenForo moderator

Staff member

• Nov 16, 2021

• %22 data-success="Embed code HTML copied to clipboard." class="">
• #53

This is an XF1 resource.

 

D

Deleted member 241496

Guest

• Nov 16, 2021

• %22 data-success="Embed code HTML copied to clipboard." class="">
• #54

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;
}