Add a message to thanked posts

by Ange Tuteur August 3rd 2015, 10:58 am

Add a message to thanked posts

This tutorial will help you add a small message below posts that have been thanked by the topic starter using the "thanks" button, such as in the example below.

This modification is for any version so long as you meet the following conditions :

Your templates are not heavily modified
- You can contact the support for help with modifying the script for your templates if it does not work
The thanks system is enabled
- Administration Panel > Modules > Reputation > Activate "Thanks" button
You have a thanks color selected
- Administration Panel > Display > Colors > Thanked message background color

If you meet all the above conditions then you should have no problems with this tutorial. Wink

Installing the CSS

Firstly you will need to add some CSS to your stylesheet for the thanked message display properly. Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following codes.

Code:: #fa_thanks_message img { vertical-align:middle } #fa_thanks_message { color:#280; font-size:16px; font-weight:bold; text-align:center; background-color:#DFD; border:1px solid #BDB; border-radius:6px; padding:6px; margin:6px; }

You're free to modify the CSS to fit the style of your forum. Smile

Installing the JavaScript

Next to install this plugin go to Administration Panel > Modules > JavaScript codes management and create a script with the following settings.

Title : Thank you message
Placement : In the topics

Code:: $(function() { var message = function(child, parent) { var pseudo = $(child, parent).text(), icon = '<img src="https://i18.servimg.com/u/f18/18/21/60/73/fa_sta10.png" alt=""/>'; return '<div id="fa_thanks_message">' + icon + ' The topic starter has thanked ' + pseudo + ' ! ' + icon + '</div>'; }, version = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : 'badapple', // version check node = document.createElement(version ? 'DIV' : 'TR'), post = $(version ? 'div.post' : 'tr.post'), j = post.length, i = 0; if (version == 'badapple') { if (window.console) console.error('This plugin is not optimized for your forum version. Please contact the support for further assistance.'); return; } node.id = 'fa_thanks'; // id for style modifications if (!version) node.innerHTML = '<td colspan="2"></td>'; // phpbb2 must have a cell as the child node for (; i < j; i++) { if ((version ? post[i] : post[i].firstChild).style.backgroundColor) { // thanked posts have the backgroundColor style property post[i].className += ' thanked'; // mark the thanked post with a class (version ? node : node.firstChild).innerHTML = message(['.name', 'dl > dt > strong', '.username', '.popmenubutton'][version], post[i]); // thanks message switch (version) { case 0 : // phpbb2 node.firstChild.style.backgroundColor = post[i].firstChild.style.backgroundColor; node.firstChild.className = post[i].firstChild.className; post[i].parentNode.insertBefore(node, post[i].nextSibling); break; case 1 : // phpbb3 post[i].firstChild.insertBefore(node, post[i].firstChild.lastChild.previousSibling); break; case 2 : // punbb node.className = 'postfoot'; node.style.margin = '0'; post[i].appendChild(node); break; case 3 : // invision node.className = 'post-footer'; node.style.backgroundColor = post[i].style.backgroundColor; post[i].appendChild(node); break; } break; // break out of the for loop when the thanked post is found } } });

Modifications :

If you want to change the structure of the thank you message, feel free to modify the message function at the top of the script. Inside this function are three parts you can modify :

1. pseudo is a variable which contains the name of the user who was thanked. You can modify the contents to be something else, or leave it as is.

2. icon is a variable which contains the image element of the star, which displays on both sides of the thank you message. If you want to change this, feel free to replace the URL in the src attribute, or change it to something completely different such as a font awesome icon.

3. Lastly is the return value which is the message itself. If you want to change around the wording or move some of the variables around, you can do this here. Just make sure not to delete the return keyword, otherwise the message will not display.

Remember to save the script, once you've done what you wanted. After this, find a thanked post and there should now be a message underneath it. thumleft