XF 2.0 Change CSS background of sticky

[LPH]

What is the best method to use so that sticky threads are lightyellow?

I'm assuming this in the extra.less; however, I didn't know if there is a property:

.structItemContainer-group.structItemContainer-group--sticky {
    background:lightyellow;
}

 

[DL6]

.structItemContainer-group--sticky .structItem {
    background: #ffffd4;
}

 

[Mr Lucky]

See here (also how to add a title)

https://xenforo.com/community/resources/sticky-thread-simple-styling.5794/updates

 

[LPH]

.structItemContainer-group--sticky .structItem {
    background: #ffffd4;
}

Yes. You are using a different element. But is there a better method instead of using the extra.less?

See here:

https://xenforo.com/community/resources/sticky-thread-simple-styling.5794/

Thank you. I know of that resource but want to know if using extra is the best method or whether there is a property. I should have been more clear

 

[Russ]

Yes. You are using a different element. But is there a better method instead of using the extra.less?



Thank you. I know of that resource but want to know if using extra is the best method or whether there is a property. I should have been more clear

No property for it.

 

[LPH]

No property for it.

Thank you for clarifying. My next concern is getting a bottom red line for the last sticky. If there are two sticky threads then only the last one has the bottom red line.

 

[LPH]

This appears to work.

.structItemContainer-group--sticky .structItem {
    background:lightyellow;
    
}

.structItemContainer-group.structItemContainer-group--sticky {
    border-bottom: solid 1px red;
}

 

[Russ]

Thank you for clarifying. My next concern is getting a bottom red line for the last sticky. If there are two sticky threads then only the last one has the bottom red line.

Something like this will make it so a border-bottom is always applied even if there's 1 sticky.

.structItemContainer-group--sticky .structItem
{
    background: lightyellow;
    &:last-child
    {
    border-bottom: 2px solid red;
    }
}

If you want the line to only appear with more than 1 sticky, you could do like a work-around:

.structItemContainer-group--sticky .structItem
{
    background: lightyellow;
    &:last-child
    {
    border-bottom: 2px solid red;
    }
    &:first-child
    {
    border-bottom-width: 0;
    }
}