Highlight and Separate Sticky Threads

Highlight and Separate Sticky Threads 2017-12-04

No permission to download
Koala_Steamed submitted a new resource:

Highlight and Modify Sticky Threads - Simple modification to edit the sticky thread container

Simple modification to highlight sticky threads and edit the css

Highlight the sticky container colour
Template: extra.less
.structItemContainer-group--sticky {
      background-color: lightgreen;
Change the sticky container title text
Template: extra.less
.structItemContainer-group--sticky .structItem-title a:link,
.structItemContainer-group--sticky .structItem-title a:visited {...
Read more about this resource...


Well-known member
I might use this instead of using an add-on. All I really want is a bit of a divider between sticky and normal (as I used to do it in vBulletin). But changing the background color of the cells seems like it might be a good substitute.

For the colors, I would probably use the XF palette color names, so it changes with each theme. ;)
Good idea added that in :)

You can create a separator with a modification, although I think you have to modify the forum_view template which could get overridden if something gets updated. So better off using an add-on for that.

This was posted a few days ago by Xon (I think) but has now been made into an add-on
Find this in forum_view template
<div class="structItemContainer-group structItemContainer-group--sticky">
<xf:foreach loop="$stickyThreads" value="$thread">
<xf:macro template="thread_list_macros" name="item" arg-thread="{$thread}" arg-forum="{$forum}" />
Paste this after that code
<xf:if is="{$stickyThreads}">
<hr class="stickySeparator"/>
Put this in extra.less
.stickySeparator {
  height: 12px;
  background-color: #e7e7e7;
  border-color: #e7e7e7;
  border-bottom: none;
  border-left: none;
  border-right: none;
  margin: 0px;


Well-known member
You can create a separator with a modification, although I think you have to modify the forum_view template which could get overridden if something gets updated.
When updating, the installer will catch any modified templates, and give you the opportunity to merge your changes into the new template.

I try to make as few template edits as possible, though. I would write my own one-off add-ons, but my coding days (and concentration...and patience for that matter) have long since passed me by.

Amin Sabet

Well-known member
Thanks, this helped a lot. I went for a very subtle look with just some thicker borders to offset my one sticky thread:

.structItemContainer-group--sticky {
      border-bottom: 4px solid;
      border-top: 4px solid;
      color: #e7e7e7;
Looks like this:



Well-known member
If there is more than one sticky, do the thicker borders surround each sticky post, or do all of the sticky posts appear between the two borders?


Well-known member
So I tweaked the code just a little more. I only needed the bottom border in this modification I am working on.

/* Border between sticky/normal threads */

.structItemContainer-group--sticky {
      border-bottom: 6px solid;
      color: xf-diminish(@xf-borderColor, 6%);
The color is XF template-speak for the existing border color, which in turn is based on the palette color Neutral 1. This matches the border color between the cells in the thread listing, and will also change on any child themes where a variation in colors are used. So, there will not be a need to edit this color manually in extra.less in the templates with each child theme.
How can I still have black text color on the X nr of posts for the sticky threads? A bit annoying it changes accordingly after the border color.