Border change color then there's new post

Hello.
I want to do that border-top color will change, then the new post appeared, or then the new post in categories.

css code:

Code:

.lastpost {
    width: 150px;
    padding: 15px;
    background: #F7F7F7;
    text-align: center;
    font: 700 8px/120% Montserrat, sans-serif;
    text-transform: uppercase;
    color: #777;
    display: block;
    overflow: hidden;
    margin-left: 160px;
    border-top: 10px solid;
    border-top-color: #000000; /* Pradinė spalva (juoda) */
    transition: border-top-color 0.5s ease; /* Pritaikyti spalvos pakeitimui animaciją */
}

.lastpost.new {
    border-top-color: #ff0000; /* Naujo pranešimo spalva (raudona) */
}

javacript code:

Code:

function addNewPost() {
    var lastpostElement = document.querySelector('.lastpost');
    lastpostElement.style.borderTopColor = '#ff0000';
}

//  addNewPost() after time
setTimeout(addNewPost, 2000);

it only work on one categorie, and its working even there is no new posts.

Dear @unownus

can you provide your forum URL and your forum version? (phpBB3, phpBB2, Invision, PunBB, AwesomeBB, ModernBB)

Thanks a lot

also, are we talking about this part? the last column?

oh sorry, i forgot
forum: https://afterdark.forumlt.com/
version: phpBB2
and yes, im talking about the last column

Are you sure it is not phpBB3? because some parts in the code are from phpBB3 and not phpBB2

In the meantime, go to your CSS stylesheet from the ACP and add this - to add the border

Code:

.lastpost {
    border-top: 6px solid black;
}

.lastpost.new {
    border-top: 6px solid red!important;
}

Good afternoon!

Is your request complete?
if your request is complete, please mark it as Solved.

Niko wrote:Are you sure it is not phpBB3? because some parts in the code are from phpBB3 and not phpBB2

In the meantime, go to your CSS stylesheet from the ACP and add this - to add the border

Code:

.lastpost {
    border-top: 6px solid black;
}

.lastpost.new {
    border-top: 6px solid red!important;
}

yes, im sure it's phpBB2
it can be some codes from phpBB3, because im new in coding, so i dont know everything

but it's still not working somehow..
i think the problem can be in javascript

@unownus and can you confirm that you added this code in ACP > Display > Images & Colors > Colors > CSS Stylesheet and then saved?

Code:

.lastpost {
    width: 150px;
    padding: 15px;
    background: #F7F7F7;
    text-align: center;
    font: 700 8px/120% Montserrat, sans-serif;
    text-transform: uppercase;
    color: #777;
    display: block;
    overflow: hidden;
    margin-left: 160px;
    border-top: 10px solid #000000!important;
    transition: border-top-color 0.5s ease;
}
 
.lastpost.new {
    border-top-color: #ff0000!important
}

because the code works for me

no, it's still doesn't work..

@unownus checking your CSS code, the code I mentioned above is not present
can you keep it installed?

Good afternoon!

You've changed the phpbb2 templates quite a bit. This template is unrecognizable.

Unfortunately, I was never able to register on your forum, so I worked with what is available as a guest.

Since you don't use forum icons, there is another way to check for new messages - the image-link to the last post ( https://2img.net/i.postimg.cc/PJKCr4Rs/OLD.png ). I don't know the link to the image responsible for the unread new message on your forum.

If there are new posts in the forum section, the border will be red, but if the user read the last post in the section and there are more new posts in it, the border will still change color to black.

AP - Display - Templates - General - index_box

At the end of the template, insert the code:

Code:

<script>
 
  window.addEventListener('load', function() {
     
     let newMes = document.querySelectorAll('img[src="LINK TO UNREAD MESSAGE ICON"]');
        let noNewMes =document.querySelectorAll('img[src="https://2img.net/i.postimg.cc/PJKCr4Rs/OLD.png"]');
     newMes.forEach(item => {
          item.closest('.lastpost').style.borderTopColor = 'red';
            item.closest('.lastpost').style.borderTopWidth = '5px';
           item.closest('.lastpost').style.borderTopStyle = 'solid';
     });
        noNewMes.forEach(item => {
          item.closest('.lastpost').style.borderTopColor = 'black';
            item.closest('.lastpost').style.borderTopWidth = '5px';
           item.closest('.lastpost').style.borderTopStyle = 'solid';
  });
  });
</script>

Save. Publish.

Result:



Pay attention to this line. This is where the link to the image should be inserted.

Code:

let newMes = document.querySelectorAll('img[src="LINK TO UNREAD MESSAGE ICON"]');

thank you, now it's working  

You are welcome!

Problem solved & topic archived. Please read our forum rules: ESF General Rules