• Welcome to Simple Machines Community Forum. Please login or sign up.

Make new posts stand out in threads

Started by Antechinus, September 09, 2020, 08:56:40 PM

Previous topic - Next topic

Antechinus

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

sima002


Antechinus

Note that, due to a markup change, this idea will not work for SMF 2.1. Something similar can be done on 2.1 markup, but not quite the same.

Or, for a custom theme, simply revert the markup to put the #new anchor back outside the relevant .windowbg (would require a minor edit to Display.template.php). This would have advantages anyway, since the posts are really better done with display: flex; these days instead of the default floats.

Mick.

Ya dude, I dig it. Especially when I tinker with windowbg backgrounds at #fff or transparent. I used 3 dots centered to divide the posts in my site's old theme.....And yes, display.template.php had to be modified in 2.1 although I did too for 2.0

Antechinus

Got 2.1 versions of this idea. These are done on default markup.

Due to the markup change in 2.1, with a#new now being inside the .windowbg parent for each post, it's probably not possible to put these indicators outside the posts (2.0 had #new just above the .windowbg).

It would be easy to move #new back to where it was for a custom theme, but these examples are running live on this site with default 2.1 RC4 markup.

Code (2.1 Light) Select
/* ------------------------------- */
/* Divider & pointer to new posts. */
#forumposts #new {
    position: relative;
    top: -12px;
display: block;
margin: -12px -17px 0;
    border-bottom: 4px solid #96a2bb;
}
#forumposts #new::after {
position: relative;
top: 12px;
display: block;
width: 0;
height: 0;
margin-left: 216px;
content: '';
border: solid transparent;
border-width: 11px 16px 0;
border-top-color: #96a2bb;
}

Code (2.1 Dark) Select
/* ------------------------------- */
/* Divider & pointer to new posts. */
#forumposts #new {
    position: relative;
display: block;
    height: 9px;
margin: 0 -6px 16px;
    background: #685c4a;
    border-bottom: 3px solid #96856e;
    border-radius: 0 0 6px 6px;
    box-shadow: inset 0 -1px 1px #0006;
}
#forumposts #new::after {
position: absolute;
top: 9px;
display: block;
width: 0;
height: 0;
margin-left: 182px;
content: '';
border: solid transparent;
border-width: 11px 16px 0;
border-top-color: #96856e;
}

Antechinus

I've been playing with this a bit more, and it seems you can get the divider to appear as though it is outside the .windowbg on SMF 2.1. It don't have finished code for this. So far I've just done a quick mess around in FF dev tools.

It is going to depend on exactly what presentation you are using for posts, but basically you can use a combination of styles on the divider so that it fakes (as required) the background between posts, and/or the styling of the top of the post. IOW, add some more CSS to make the divider do two jobs in terms of presentation. The ::before pseudo can be useful here (the code shown above only makes use of the ::after pseudo).

Advertisement: