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 bar for Reputation

View previous topic View next topic Go down

Add a bar for Reputation

Post by Ange Tuteur on April 14th 2014, 1:09 pm


Add a bar for Reputation



This tutorial will help you add a bar for the Reputation system of your Forumotion forum. This bar will increase in size depending on the amount of Reputation a member has accumulated.


The reputation bar will work for all versions, so long as the viewtopic_body template for phpbb2 and punbb are not heavily modified.


Activating the reputation system

For this system to work you must have the reputation system activated. Go to Administration Panel ► Modules ► Points and reputation ► Reputation.

Activate the reputation system and save :


Adding the CSS

Go to Administration panel ► Display ► Colors ► CSS stylesheet. So the default blocks of the reputation system have style, add the following codes to your sheet :
Code:
#repu { margin:2px 0; }
.repuBlock {
  height:8px;
  width:8px;
  background:#0A0;
  border:1px solid #080;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
  -webkit-box-shadow:0 3px 3px #0C0 inset;
  -moz-box-shadow:0 3px 3px #0C0 inset;
  box-shadow:0 3px 3px #0C0 inset;
  display:inline-block;
  margin:0 0.5px;
}

Explanation :
height:8px; / width:8px; The overall size of the blocks.
background:#0A0; Gives the blocks their green color.
border:1px solid #080; Gives the blocks a dark green border of 1 pixel.
border-radius:2px; Makes the blocks appear slightly rounded.
box-shadow:0 3px 3px #0C0 inset; Sets a light green shadow inside the blocks to appear glossy.
display:inline-block; Displays the element as an inline block.
margin:0 0.5px; Adds a 0.5 pixel spacing between the blocks.


Adding the javascript

Go to Administration panel ► Modules ► Javascript codes management ► Create a new script.

Title : Reputation Bars
Placement : In the topics
Paste the code below and submit :
Code:
$(document).ready(function() {
 
var version = 'phpbb3';
 
var settings = {
  repName : 'Reputation',
  repStyle : 'block',
  repImage : 'http://i57.servimg.com/u/f57/18/21/41/30/star12.png'
  };
 
var repLv = {
  lv1 : 1,
  lv2 : 2,
  lv3 : 3,
  lv4 : 4,
  lv5 : 5,
  lv6 : 6,
  lv7 : 7,
  lv8 : 8
  };
 
if (settings.repStyle.toLowerCase() == 'block') { var repBlock = '<span id="rLv" class="repuBlock">' }
  else if (settings.repStyle.toLowerCase() == 'image') { var repBlock = '<img id="rLv" src="'+settings.repImage+'"/>' }
  else { var repBlock = '<span id="rLv" class="repuBlock">' }
  var ver = { phpbb2 : version.toLowerCase() == 'phpbb2', phpbb3 : version.toLowerCase() == 'phpbb3', punbb : version.toLowerCase() == 'punbb', invision : version.toLowerCase() == 'invision' };
  var reg = new RegExp('.*'+settings.repName+':\\s+(\\d+).*');

  if (ver.phpbb3 || ver.punbb || ver.invision) {
  if (ver.phpbb3 || ver.invision) { var profSel = '.postprofile'; var addRepu = $(this).find('dt').append('<div id="repu">'); }
  else if (ver.punbb) { var profSel = '.user'; var addRepu = $(this).find('.user-ident').prepend('<div id="repu">'); }
  $(profSel).each(function() {
  var rep = Number($(this).text().replace(reg,'$1'));
  addRepu;
  if (rep >= repLv.lv1) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv2 }
  if (rep >= repLv.lv2) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv3 }
  if (rep >= repLv.lv3) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv4 }
  if (rep >= repLv.lv4) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv5 }
  if (rep >= repLv.lv5) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv6 }
  if (rep >= repLv.lv6) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv7 }
  if (rep >= repLv.lv7) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv8 }
  if (rep >= repLv.lv8) { $(this).find('#repu').append(repBlock); var next = 'MAX' }
  $(this).find('#repu').attr('title','Reputation level ' + $(this).find('#rLv').length + '\nNext : (' + next + ')');
  });
  }
  else if (ver.phpbb2) {
  $('td .postdetails.poster-profile').each(function() {
  var rep = Number($(this).text().replace(reg,'$1'));
  $(this).parent().find('.name').next().after('<div id="repu">');
  if (rep >= repLv.lv1) { $(this).parent().find('#repu').append(repBlock); var next = rep + '/' + repLv.lv2 }
  if (rep >= repLv.lv2) { $(this).parent().find('#repu').append(repBlock); var next = rep + '/' + repLv.lv3 }
  if (rep >= repLv.lv3) { $(this).parent().find('#repu').append(repBlock); var next = rep + '/' + repLv.lv4 }
  if (rep >= repLv.lv4) { $(this).parent().find('#repu').append(repBlock); var next = rep + '/' + repLv.lv5 }
  if (rep >= repLv.lv5) { $(this).parent().find('#repu').append(repBlock); var next = rep + '/' + repLv.lv6 }
  if (rep >= repLv.lv6) { $(this).parent().find('#repu').append(repBlock); var next = rep + '/' + repLv.lv7 }
  if (rep >= repLv.lv7) { $(this).parent().find('#repu').append(repBlock); var next = rep + '/' + repLv.lv8 }
  if (rep >= repLv.lv8) { $(this).parent().find('#repu').append(repBlock); var next = 'MAX' }
  $(this).parent().find('#repu').attr('title','Reputation level ' + $(this).parent().find('#rLv').length + '\nNext : (' + next + ')');
  });
  }
});

Modifying the script :
So the script works for you, there are some things you must first modify.

var version = 'phpbb3' : You must change phpbb3 to the version of your forum. That is : phpbb2, phpbb3, punbb, or invision.

repName : 'Reputation' : You must change Reputation to the name of your rep field. So if your Reputation field is named Likes change repName : 'Reputation' to repName : 'Likes'

repStyle : 'block' : Editing this, you can change the rep block style from a block to an image.
block : Displays the CSS style rep blocks. example
image : Displays an image, the default is a star. example

repImage : 'http://i57.servimg.com/u/f57/18/21/41/30/star12.png' : This is the image displayed if you choose image as the rep block style. You can replace http://i57.servimg.com/u/f57/18/21/41/30/star12.png with any image URL you want.

lv1 : 1, lv2 : 2, lv3 : 3.. : This is the amount of rep it takes to achieve a new level. Each level achieved adds a new block to the reputation bar. So if you want lv2 to be achieved at 10 reputation points, change lv2 : 2, to lv2 : 10,

Note : This script can work for any number field; posts, points.. However, this system was mainly developed for Reputation.


This tutorial was written by Ange Tuteur.

To submit a tutorial, please read the following topic : How to submit a tutorial


Ange Tuteur
Forumaster

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

http://fmdesign.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