Highlight and Separate Sticky Threads 2017-12-04

[Koala_Steamed]

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

 

[Wildcat Media]

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.

 

[Koala_Steamed]

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}" />
</xf:foreach>
</div>

Paste this after that code

<xf:if is="{$stickyThreads}">
<hr class="stickySeparator"/>
</xf:if>

Put this in extra.less

.stickySeparator {
  height: 12px;
  background-color: #e7e7e7;
  border-style:solid;
  border-color: #e7e7e7;
  border-bottom: none;
  border-left: none;
  border-right: none;
  margin: 0px;
}

 

[Wildcat Media]

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]

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:

 

[Wildcat Media]

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?

 

[Amin Sabet]

All of them appear between the two borders. Like this:

 

[Wildcat Media]

Perfect!

 

[Wildcat Media]

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.

 

[Koala_Steamed]

Nice didn't know you could do that, added the code to the original post

 

[Gator]

Hi Koala_Steamed,

I would like to add a modified version of this to my "Shades of Dark" style if you don't mind.

 

[Koala_Steamed]

Hi Koala_Steamed,

I would like to add a modified version of this to my "Shades of Dark" style if you don't mind.

Yeah sure use any of it

 

[Gator]

Yeah sure use any of it

Thank you.

 

[kaieivindm]

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.

 

[Koala_Steamed]

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;

 

[kaieivindm]

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.

 

[Koala_Steamed]

Still not too sure what is going on, what code are you using? Can you send a screenshot of the text colour

 

[Broe]

Awesome, works perfectly! Thank you for sharing!

 

[samh004]

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".

 

[Jim Fox]

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!