Add a bar for Reputation

The forum of the forums :: About Forumotion ::   :: Tips & Tricks

Go down

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

Add a bar for Reputation Rep10

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 :
Add a bar for Reputation Captu439


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 = 'modernbb';
                
                  var settings = {
                      repName : 'Reputation',
                      repStyle : 'block',
                      repImage : 'https://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,
                      lv9 : 9,
                      lv10 : 10
                    };
                
                  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', modernbb : version.toLowerCase() == 'modernbb' };
                    var reg = new RegExp('.*'+settings.repName+'\\s+:\\s+(\\d+).*');
                
                  if (ver.phpbb3 || ver.punbb || ver.invision || ver.modernbb) {
                      if (ver.phpbb3 || ver.invision || ver.modernbb) { 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 = rep + '/' + repLv.lv9 }
                          if (rep >= repLv.lv9) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv10 }
                          if (rep >= repLv.lv10) { $(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 = rep + '/' + repLv.lv9  }
                          if (rep >= repLv.lv9) { $(this).parent().find('#repu').append(repBlock); var next = rep + '/' + repLv.lv10  }
                          if (rep >= repLv.lv10) { $(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, ModernBB, 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 : 'https://i.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 https://i.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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13225
Reputation : 2963
Language : EN, JA, FR
Location : Macungie, PA

View user profile

Back to top Go down

Tutorial Re: Add a bar for Reputation

Post by SLGray on July 3rd 2017, 9:01 pm

The tutorial has been updated to include ModernBB.


Add a bar for Reputation Slgray10
Add a bar for Reputation Ssshfm13

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

Male Posts : 47342
Reputation : 3312
Language : English
Location : United States

View user profile https://help.forumotion.com/

Back to top Go down

Tutorial Re: Add a bar for Reputation

Post by skouliki on February 13th 2020, 8:38 am

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

updated 13.02.2020 by skouliki
skouliki
skouliki
Manager
Manager

Female Posts : 8257
Reputation : 1093
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

Back to top Go down

Back to top

The forum of the forums :: About Forumotion ::   :: Tips & Tricks

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