• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 2.0 Change CSS background of sticky

LPH

Well-known member
#1
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:

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

LPH

Well-known member
#4

Russ

Well-known member
#5
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

Well-known member
#7
This appears to work.

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

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

Russ

Well-known member
#8
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.

Code:
.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:

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