• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Highlight and Separate Sticky Threads

Highlight and Separate Sticky Threads 2017-12-04

No permission to download
#1
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
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...
 

Rudy

Well-known member
#2
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. ;)
 
#3
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;
}
 

Rudy

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

Rudy

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

Rudy

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