"New" icon code problem

Hello, i used the below code but it is not working at all. I cannot find the error indeed. Here you see


To add this you must go to HTML & JAVASCRIPT -> Javascript codes management Create a new javascript and add this script

Placement: In all the pages

Code:

$(function() {
  $('.forabg dl[style*="https://i.servimg.com/u/f88/20/00/67/44/forum_11.gif"]').find('a.forumtitle').append('<span class="new-post">NEW</span>');
});

Then we must style it with css code

Code:

.new-post {
  background: #84c754;
  font-size: 12px;
  margin-left: 10px;
  border-radius: 3px;
  color: #fff;
  padding: 1px 5px;
}

Remember to replace your Forum - New icons with yours this part <span style="color: #aa6709;background: #fff4e5;border: 1px solid #f9c479;padding: 0px .35em;border-radius: 2px;">[style*="https://i.servimg.com/u/f88/20/00/67/44/forum_11.gif"]</span>


Link to the post of problem below
https://forumservice.forumotion.com/t118-new-post-indicator

Hello

Which tutorial is this ?

I think it was about new post indicator when someone post new message then it shows "New" after the forums

No i meant where did you find that code ?
Not all codes are for all versions

i dont know but @mati know it may be.

then it is better to ask him about the code

Yeah but @mati is busy right now. So i posted here for help about this issue. We have many coding experts here so that i can get help from them too

i do not understand
you mean you posted this also to Mati's forum and because he is busy you posted also here ?

Yeah

Why are you not just using the default system for the new icon?

Default system for new icon? What you meant please @Slgray

Good afternoon!

AP - Display - Templates - General - topics_list_box

At the end of the template, insert the code

Code:

<script>
  $(document).ready(function() {
  let listOfTopics = $('div.forumbg.announcement div.inner ul.topiclist.topics.bg_none li dl dd[title="New posts"]');
     for (let i = 0; i <= listOfTopics.length; i++) {
     listOfTopics[i].querySelector('div').insertAdjacentHTML('afterend','<span class="new-post">NEW</span>');
   };
});
</script>

Save. Publish.

Your CSS code has not been changed

Result:

Dear @rezor12345

Will i remove my previous java script and css code?

You can remove only JS code

Dear @razor12345 i did everything you said but nothing changed

I thought this script was for topics in the forums.
Remove the code above.
For the forums themselves:

AP - Display - Templates - General - index_box

Insert the code at the end of the template:

Code:

<script>
  $(document).ready(function() {
  let listOfForums = $('div.forabg div.inner ul.topiclist.forums li dl[style*="https://2img.net/i/fa/prosilver/forum_unread.gif"]');
  for (let i = 0; i <= listOfForums.length; i++) {
    listOfForums[i].querySelector('dd.dterm').insertAdjacentHTML('beforeend','<span class="new-post">NEW</span>');
  };
  });
</script>

Save. Publish.

Please note!

Code:

[style*="https://2img.net/i/fa/prosilver/forum_unread.gif"]

This uses a link to the forum image when there is a new post. Change it to your own.

2) AP - Display - Colors&CSS - CSS Stylesheet

Code:

.new-post {
  background: #84c754;
  font-size: 12px;
  border-radius: 3px;
  margin-left: 30%;
  color: #fff;
  padding: 1px 5px;
}

Save.

To move the icon to the left or right, change this item to your liking:

Code:

margin-left: 30%;

Result:

Still not showing up. Could you please use my admin access to see the error?

Hello @Dipener (and @Razor12345),

You are using a custom template so you only need to replace

Code: [style*="https://2img.net/i/fa/prosilver/forum_unread.gif"]

to

Code: [data-icon-transform$="_unread.gif"]

Wow @pedxz, you just wow! Beside, @razor12345 also wow! Thanks, solved