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. 
 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. 
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. 
 If the message is not displaying, please open a topic into the script and coding problems forum, and our staff will assist you.
|
Hitskin.com
by Ange Tuteur August 3rd 2015, 10:58 am
Facebook
Twitter
Pinterest
Youtube
