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

ca0bfe4f3dac4c2ee7275308286c23cd.png


Highlight the sticky container colour
Template: extra.less
CSS:
.structItemContainer-group--sticky {
      background-color: lightgreen;
}

Change the sticky container title text
Template: extra.less
CSS:
.structItemContainer-group--sticky .structItem-title a:link,
.structItemContainer-group--sticky .structItem-title a:visited {...

Read more about this resource...
 
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
Code:
<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}" />
</xf:foreach>
</div>
Paste this after that code
Code:
<xf:if is="{$stickyThreads}">
<hr class="stickySeparator"/>
</xf:if>

Put this in extra.less
CSS:
.stickySeparator {
  height: 12px;
  background-color: #e7e7e7;
  border-style:solid;
  border-color: #e7e7e7;
  border-bottom: none;
  border-left: none;
  border-right: none;
  margin: 0px;
}
 
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.
 
Thanks, this helped a lot. I went for a very subtle look with just some thicker borders to offset my one sticky thread:

Code:
.structItemContainer-group--sticky {
      border-bottom: 4px solid;
      border-top: 4px solid;
      color: #e7e7e7;
}

Looks like this:

screen.webp
 
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?
 
So I tweaked the code just a little more. I only needed the bottom border in this modification I am working on.

CSS:
/* 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.
 
You should be able to just set it as a blank colour so something like
color: #e7e7e7;

For text only? If you change color in the code then the bottom border changes as well.

The border should be the color you want it to be, but not change text color at the same time.
 
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.
For text only? If you change color in the code then the bottom border changes as well.

The border should be the color you want it to be, but not change text color at the same time.

Instead of "color: #e7e7e7" try "border-color: #e7e7e7".
 
This is so awesome! I just upgraded to XF2.1 and immediately all of my Sticky threads got "Lost"... so this has been awesome to find!
 
Back
Top Bottom