Can thread icons be changed on if it has been read or not?

[rblxlite]

Hi, i'd like to ask if it's possible to change the "NEW" text at thread names to dissapear and the thread icon to be replaced with an new image to mark if it's read or not?

What i mean by "NEW":



i want this "NEW" text to be removed and the folder icon, left from the text, to get a different icon when/if there's something unread in said thread.



Is there a way to do this?



Below a mockup of what it'd look like.





There'd be a new icon for the folder/thread icon; i "replaced" it with a icon with the letter N on it.

I'm not the greatest at coding, especially on proboards, so any help would be appreciated!

-RBLXLite

[Kami]

It's possible! In my opinion, the easiest way to do this is through layout templates; however, some people are not comfortable with editing the layout templates and/or would prefer to use javascript as they don't want to have to do it manually for every theme.

i can't personally help if you want to go the javascript route, but I can if you want to go the layout templates route (with the caveat that if you have more than one theme, you'd have to individually edit them).

[rblxlite]

i'm fine with invidual editing

[Eton Bones]

If Kami doesn't mind, I'd like to offer a third option using pure CSS which can be either placed in the theme stylesheet to affect a single theme, in global header to affect every theme or in a specially created plugin with an added CSS component to affect only certain themes as well as take advantage of file caching

<style>
/* Replace Thread Icons when NEW */
.item.thread{
--icon-size: 32px;
--icon-size-small: 16px;
}

.item.thread.new .icon img/*:not([alt*=Sticky],[alt*=Announcement])*/ {    
   box-sizing: border-box;
   width: var(--icon-size);
   height: var(--icon-size);
background:  url(//via.placeholder.com/32/f0f0f0/0000ff/?text=NEW) no-repeat;    
   padding-left: var(--icon-size);
}
.item.thread.new /*.icon:not(:has([alt*=Sticky],[alt*=Announcement]))+.checkbox+.main*/ .control-icons .new-icon {
   display:none;
}


/* (requires support for drafts.csswg.org/css-values-4/) */
@support ( attr(src url) ){
.item.thread.new .icon img:where([alt*=Sticky],[alt*=Announcement]):after {
content: '';
width: var(--icon-size-small);
height: var(--icon-size-small);
background: attr(src url) no-repeat cover;

}
}
</style>

Notes:

1. If you wish to retain the icons for announcement and pinned threads then remove the block comment (/* and */) from around the parts of the selector that further qualifies it to ignore those icons making sure to retain the spacing img:not() would not be the same as img :not()
   

   
   

   • .item.thread.new .icon img/*:not([alt*=Sticky],[alt*=Announcement])*/ {
     
   • .item.thread.new /*.icon:not(:has([alt*=Sticky],[alt*=Announcement]))+.checkbox+.main*/ .control-icons .new-icon {

   
   

   
   
2. preview:
   
   
   SPOILER: Click to show
   

[Kami]

the above works just fine! alternatively, though:

1. upload the images to the theme itself (admin > theme manager > hover over theme you want > click images button; scroll to the very bottom of the page and upload under the "custom theme images" section). IMPORTANT: Make sure you name the image something recogniseable, like "new_thread_icon".

2. Admin > Themes > Layout Templates. Make sure the theme you want is selected in the upper left. Select the BOARD LIST page, then click the THREAD LIST tab on the subsequent page.

3. Find this line, around line 3: <td class="icon">$[thread.icon]</td> 
Change that to: <td class="icon">{if $[thread.is_new]}{else}$[thread.icon]{/if}</td>

4. Click between }{ so your cursor is between them.

5. On the right-hand side of the screen should be a list of stuff in the "loops and variables" box. Scroll all the way down until you find the one that says THEME, and drop down the options. Find your image (if you used my example in step one, it should read "new_thread_icon").

6. click on the image you uploaded's name to make sure it's highlighted. On the bottom left of the loop and variables box, there's a button that says < Insert. With your image name still highlighted, click that button. What should happen is that the custom variable for you image should then populate where your cursor was, leading to something that looks like this:
<td class="icon">{if $[thread.is_new]}$[theme.image.new_thread_icon]{else}$[thread.icon]{/if}</td>

7. Find this line, around line 8: <td>$[thread.icons]</td>
Change to this: <td>{if !$[thread.is_new]}$[thread.icons]{/if}</td>
(made the ! bold and red to make sure you get that in there, as this tells the template "not", as in if the thread is NOT new)

8. Save changes. Should look something like this now:



Personally, I prefer this method over using CSS or Javascript since it's a bit faster in my opinion. It's technically only 3 line changes + uploading an image, the steps are just broken down to be as easy as possible to follow along if you're not familiar.