Creating an effect behind a thread title

[ffs]

Hey, Scott, as requested - how did you create the special effect behind your New Year's thread title on the Support forum?

[Scott]

ffs - here you go:


The following codes for this can go in the Global Header, however I put it in the header for the board where the thread resides. On this particular forum we have a lot of header/footer codes so it makes it easier to keep track of.


This is the first part:
<script>
   $(document).ready(function() {
       $('#thread-123').addClass('nyfw');
   });        
</script>

1. AFTER you create the thread you need to get the ID number of the thread you are targeting and substitute "123" as shown above with the ID number of your thread. (If you click into the thread and then look at the browser's address bar, you will see the ID in the URL.)
   
   
2. The next part is adding a unique class name so that the CSS changes targets just that thread. In this example I had used nyfw (which for me means 'new year fire works') - but any unique name or combination of alphanumerics works. Substitute my nyfw with your unique class name.

Also in the same header along with the script code add this styling code:

<style>
   .nyfw, .nyfw.state-hover {
    background-image: url('https://storage.proboards.com/6322676/images/YcgPJNMLiSEfuHhPIzRU.gif');
     color:#fff !important;
   }
   a.js-thread__link.thread-link.thread-123 {
   color: white;
       font-weight: 600;
   }
   a:hover.js-thread__title-link.thread-link.thread-123 {
   color: white;
       font-weight: 600;
   }
   .nyfw a.thread-participants {
       color: white!important;
   }
   .nyfw abbr.o-timestamp.modified_time.time {
       color: white;
   }
   .nyfw abbr.o-timestamp.time.recent_time {
       color: white;
   }
   #thread-123.item.thread.nyfw.state-hover .thread-link {
       color: white;
       font-weight: 600;
   }
   #thread-123.item.thread.nyfw a.o-user-link.js-user-link.user-link {
       color: white!important;
   }
</style>

1. Using the style code shown above, replace the nyfw with your chosen unique class name that you used in the script code. Also replace the 123 with the same thread ID you used in the script code.
   
   
2. Update the background image URL with the URL of the image you wish to use. It can be a static image like a jpg or png, or a gif.  (I used an image that was 592px wide by 54px high.  You may notice that mine image repeats horizontally, which is fine. You can make it longer or shorter. Adding more height will not change the height of the thread container and will just be cut off. And using a larger height just adds more unnecessary data to load.
   
   
3. The rest of the style code modifies the color of the text for that thread row. Because my image was dark, I made the text white.  Wherever you see "color" listed you can change the white to another web-safe color name or use a hex color.
   
   
4. The font-weight: 600 adds a bold to the thread title so it is more visible against the animated gif and dark background. You can remove that line if you don't need the bold title.

And that's it.

[ffs]

Thanks, Scott! If you don't mind me using the same image, I'll use that.

Is there a way to hide the thread until it's all done? OK, only a minute or so will be needed to find the thread ID and change that reference, but if I can just post it as a finished product that would be better.

[Lynx]

Dec 31, 2021 8:55:18 GMT -8 ffs said:

Is there a way to hide the thread until it's all done? OK, only a minute or so will be needed to find the thread ID and change that reference, but if I can just post it as a finished product that would be better.

You should be able to create the thread in a Staff-Only board so you can get the thread ID. Once done, you can then move the thread to where you want it. However, doing it by this method, you're better off putting Scott's codes in the Global Header rather than the Board Header. Otherwise, the codes won't take effect in any board except the board(s) where the codes were placed. The thread ID shouldn't change by moving the thread.

[ffs]

I managed in less than a minute to change the thread ID once I'd posted it, but someone had commented within that minute so missed the effect.

[svenhirsch786]

Dec 31, 2021 11:59:00 GMT -8 ffs said:

I managed in less than a minute to change the thread ID once I'd posted it codepro zone , but someone had commented within that minute so missed the effect.

Thanks! If you don't mind me using the same image, I'll use that.

[hodgepodgecollage]

Thank you so much, Scott! That’s perfect!

Quick question to the second part of my query. Can I have two threads with different backgrounds simultaneously? If so, how might I go about doing that. Thanks again!

[Scott]

hodgepodgecollage -

Yes you can.


This is the code that adds a unique class to the thread so you only target the one desired thread:
<script>
$(document).ready(function() {
$('#thread-123').addClass('nyfw');
});
</script>
You would need to add the following line to the above:
$('#thread-456').addClass('tpic2');
Change the 456 to the correct thread ID. Notice the unique class of tpic2 is added.  (I am using tpic2 to denote "thread pic 2" but you can give it any unique class name.)

The script should now look like:
<script>
$(document).ready(function() {
$('#thread-123').addClass('nyfw');
$('#thread-456').addClass('tpic2');
});
</script>

To style the second thread the easiest way is to duplicate the associated CSS (style) and update with the second thread ID, image URL, and class name.  Depending on the background image used, you made need to adjust the text color.

<style>
.tpic2, .tpic2.state-hover {
background-image: url('https://storage.proboards.com/7283714/images/bcdHPlDcXpWZhYDRKIGf.gif');
       color:#fff !important;
       }
a.js-thread__link.thread-link.thread-456 {
color: white!important;
   font-weight: 600;
}
   a:hover.js-thread__title-link.thread-link.thread-456 {
color: white;
       font-weight: 600;
   }
.tpic2 a.thread-participants {
color: white!important;
}
.tpic2 abbr.o-timestamp.modified_time.time {
color: white;
}
.tpic2 abbr.o-timestamp.time.recent_time {
color: white;
}
.tpic2 abbr.o-timestamp.time {
color: white;
}
#thread-456.item.thread.tpic2.state-hover .thread-link {
color: white;
   font-weight: 600;
}
#thread-456.item.thread.tpic2 a.o-user-link.js-user-link.user-link {
color: white!important;
}
</style>

1. Use can use the code above, but make sure to replace the 456 with the same thread ID you used in the script code.
   
   
2. Update the background image URL with the URL of the image you wish to use. It can be a static image like a jpg or png, or a gif. (I used an image that was 592px wide by 54px high. You may notice that mine image repeats horizontally, which is fine. You can make it longer or shorter. Adding more height will not change the height of the thread container and will just be cut off. And using a larger height just adds more unnecessary data to load.
   
   
3. The rest of the style code modifies the color of the text for that thread row. Because my image was dark, I made the text white. Wherever you see "color" listed you can change the white to another web-safe color name or use a hex color.
   
   
4. The font-weight: 600 adds a bold to the thread title so it is more visible against the animated gif and dark background. You can remove that line if you don't need the bold title.