The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Add a message to thanked posts

View previous topic View next topic Go down

Add a message to thanked posts

Post by Ange Tuteur on 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="http://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

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
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: Add a message to thanked posts

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

The JavaScript has been updated.


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


SLGray
Administrator
Administrator

Male Posts : 35672
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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