Advertisement:

Author Topic: Make new posts stand out in threads  (Read 2215 times)

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,505
  • Master of BBC Abuse
Make new posts stand out in threads
« on: September 09, 2020, 08:56:40 PM »
This is an adjustment of an idea they threw into Elk at some point. What it does is make the default #new anchor into a visible divider between the first new post and the previous post. You can also (optionally) change the background of the first new post.

For default Curve:
Code: (Add to index.css) [Select]
/* Height sets the visible gap above the divider line. */
/* This ensures the divider is never flush with the top of the viewport. */
/* Left and right margins adjust the lateral inset of the divider. */
/* Adjust bottom margin to suit your preferred pointer size. */
/* The bottom border is the visible divider line. */
#forumposts #new {
display: block;
height: 12px;
margin: 0 8px 14px;
border-bottom: 2px solid #99a;
}
/* This is the pointer to the first new post. */
/* Adjust top to align the pointer with the divider line. */
/* Adjust border-width to customise the size and shape of the pointer. */
/* Last figure (bottom border width) should always be zero. */
#forumposts #new::after {
position: relative;
top: 12px;
display: block;
width: 0;
height: 0;
margin: 0 auto;
content: '';
border: solid transparent;
border-width: 11px 16px 0;
border-top-color: #99a;
}
/* Use this if you want to customise the background of the first new post. */
#forumposts #new + div {
background: #DAE2EF;
border-radius: 7px;
}
/* Hides the default spans, to make customising easier. */
#forumposts #new + div > .topslice, #forumposts #new + div > .botslice {
visibility: hidden;
}

For the dark version of Curve linked in my sig, this works well:
Code: (Add to Stylus/Stylem) [Select]
/* Height sets the visible gap above the divider line. */
/* This ensures the divider is never flush with the top of the viewport. */
/* Left and right margins adjust the lateral inset of the divider. */
/* Adjust bottom margin to suit your preferred pointer size. */
/* The bottom border is the visible divider line. */
#forumposts #new {
display: block;
height: 12px;
margin: 0 8px 14px;
border-bottom: 2px solid #4d4030;
}
/* This is the pointer to the first new post. */
/* Adjust top to align the pointer with the divider line. */
/* Adjust border-width to customise the size and shape of the pointer. */
/* Last figure (bottom border width) should always be zero. */
#forumposts #new::after {
position: relative;
top: 12px;
display: block;
width: 0;
height: 0;
margin: 0 auto;
content: '';
border: solid transparent;
border-width: 11px 16px 0;
border-top-color: #4d4030;
}
/* Use this if you want to customise the background of the first new post. */
#forumposts #new + div {
background: #12151B;
}

Looks like the screenshots. :)

Offline sima002

  • Newbie
  • *
  • Posts: 2
Re: Make new posts stand out in threads
« Reply #1 on: October 05, 2020, 05:20:05 AM »
The dark version is great!!!