<script type="text/discourse-plugin" version="0.8">
var addedElement;
api.onPageChange(() =>{
addedElement = false;
//window.onload = lastPostFix();
});
async function lastPostFix()
{
var elements = document.getElementsByClassName('topic-post-visited');
var newElement = document.createElement("div");
newElement.classList.add('small-action');
while(elements.length > 0 && !addedElement)
{
elements[0].parentNode.insertBefore(newElement, elements[0].nextSibling);
addedElement = true;
}
}
</script>
However, when you scroll up or down, there are a bunch of issues this seems to cause, from posts simply refusing to load to massive blank spaces to whatever the heck is going on in the third pic:
While that does make it thinner, that’s not really the issue here - the example I gave as our ideal was done with me editing the CSS, which is basically trivial - the issue is that our post background coloring is done via an nth-child selector and the .small-action.topic-post-visited element counts as a child and therefore toggles nth-child when we don’t want it to.
So we also get some fun behavior when you scroll far enough for the bar to unload - the posts all flash colors back and forth as the site re-decides what should be colored as what when the “last visited” bar disappears.
That’s incredibly unideal and considering the alternating colors is worth more to us than the last-visit indicator we’d very much like some way to either deal with this properly or just disable the feature entirely.
Yeah that is not going to work with :nth-child or :nth-of-type. These are just counting the child elements so not class specific and there is no way to filter with class.
What you’ll actually need is :nth-child(2n of .topic-post) but this is only supported by Safari yet.
But you can try something like this.
Header
It will add this class .every-second to every second post exclude small actions so only topic posts. Then you can easily target it with css.
It is possible to accomplish the same effect using just CSS but it’s kinda hacky and it will work only in the post stream. It won’t work in the topics list. There Javascript will be needed since only Safary selects the :nth-child( of <selector> syntax) and as far I can tell there aren’t any attributes that can be targeted to apply the effect.
@orangeandblack5, you have to target the article element inside the posts. Note that the id attribute follows the pattern id=post_N where N is the number of the post in the stream.
So you can target only the even ones with something like the CSS below:
Fun fact - not all small actions are created equally!
I figured I’d give the pure CSS idea a go, and unfortunately while some small actions (such as locking, unlocking, or pinning a thread) count as a full post and get their own unique ID we could use to color them by, not all of them do.
Note that this also affects the JS fix given by @Don - I’ll see if I can figure out a way around this, but my JS knowledge is much rougher than CSS.