The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Add a message to thanked posts

3 posters

Go down

Tutorial Add a message to thanked posts

Post 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.

Add a message to thanked posts Captur59

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

Add a message to thanked posts 09615110 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.

#fa_thanks_message img { vertical-align:middle }
#fa_thanks_message {
  border:1px solid #BDB;
You're free to modify the CSS to fit the style of your forum. Smile

Add a message to thanked posts 09615110 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
$(function() {
  var message = function(child, parent) {
        var pseudo = $(child, parent).text(),
            icon = '<img src="" 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 ? '' : ''),
      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.');
  } = '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
 = post[i];
          node.firstChild.className = post[i].firstChild.className;
          post[i].parentNode.insertBefore(node, post[i].nextSibling);
        case 1 : // phpbb3
          post[i].firstChild.insertBefore(node, post[i].firstChild.lastChild.previousSibling);
        case 2 : // punbb
          node.className = 'postfoot';
 = '0';
        case 3 : // invision
          node.className = 'post-footer';
 = post[i].style.backgroundColor;
      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

Question If the message is not displaying, please open a topic into the script and coding problems forum, and our staff will assist you.

Ange Tuteur
Ange Tuteur

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

TonnyKamper likes this post

Back to top Go down

Tutorial Re: Add a message to thanked posts

Post by SLGray April 16th 2016, 9:02 pm

The JavaScript has been updated.

Add a message to thanked posts Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

Male Posts : 51477
Reputation : 3519
Language : English
Location : United States

TonnyKamper likes this post

Back to top Go down

Tutorial Re: Add a message to thanked posts

Post by skouliki March 13th 2022, 1:57 pm

This code was updated to fit in with the new HTTPS address

updated 13.03.2022 by skouliki

Female Posts : 15114
Reputation : 1696
Language : English,Greek
Location : Greece

EmmaSP and TonnyKamper like this post

Back to top Go down

Back to top

- Similar topics

Permissions in this forum:
You cannot reply to topics in this forum