Adaugarea unei bare de reputatie

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Adaugarea unei bare de reputatie

Mesaj Scris de Typlo la data de Vin 2 Mai - 17:52

Adaugarea unei bare de reputatie


Salutare tuturor,

Acest tutorial va ajuta sa adaugati o bara de reputatie pe forumul dumneavoastra. Aceasta bara va creste in functie de reputatia pe care o acumuleaza membrul.


Bara de reputatie functioneaza pe toate versiunile, atat timp cat template-ul viewtopic_body de la versiunile phpbb2 si punbb nu este personalizat.


1. Activarea sistemului de reputatie

Panou de Administrare Module Puncte de reputatie Reputatie

Activati sistemul de reputatie si salvati.



2. Adaugarea codului CSS

Panou de Administrare Afisare Imagini si culori Culori Foaie de stil CSS

Adaugam urmatorul cod:

Cod:
#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;
}

Explicatii:
height:8px; / width:8px; Dimensiunea totala a blocului.
background:#0A0; Da blocului culoare verde.
border:1px solid #080; Ofera un contur de culoare verde inchis la dimensiunea de 1 pixel.
border-radius:2px; Face blocul usor rotund.
box-shadow:0 3px 3px #0C0 inset; Stabileste o umbra de culoare verde deschis la text.
display:inline-block; Afisarea elementului ca un bloc de linie.
margin:0 0.5px; Adauga un spatiu de 0.5 pixeli intre blocuri.



3. Adaugarea codului JavaScript

Panou de Administrare Module HTML& & JAVASCRIPT Gestionarea codurilor JavaScript Creati un nou cod JavaScript

Titlu: Bara de reputatie
Amplasare: Topicuri
Cod JavaScript:
Cod:
$(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 + ')');
      });
    }
});

Modificarea scriptului
Script-ul functioneaza insa exista unele lucruri pe care trebuie sa le modificati mai intai.

var version = 'phpbb3' : Trebuie sa modificati phpbb3 in versiunea forumului. Acesta poate fi : phpbb2, phpbb3, punbb, sau invision.

repName : 'Reputation' : Trebuie sa modificati Reputation la numele campului rep. Daca la dvs. Reputation este numit Likes schimbati repName : 'Reputation' in repName : 'Likes'

repStyle : 'block' : Editand acest lucru, puteti schimba stilul de bloc (patratul verde) al imaginii din block la o imagine.
block : Afiseaza stilurile bloc din CSS. exemplu
image : Afiseaza o imagine, implicit o stea. exemplu

repImage : 'http://i57.servimg.com/u/f57/18/21/41/30/star12.png' : Aceasta este imaginea afisata daca alegeti imaginea ca stil de bloc. Puteti inlocui http://i57.servimg.com/u/f57/18/21/41/30/star12.png cu orice al URL al imagini pe care o doriti.

lv1 : 1, lv2 : 2, lv3 : 3.. : Aceasta este suma de reputatie, este nevoie de un nou nivel pentru a o atinge. Daca doriti ca level 2 sa fie atins la 10 puncte de reputatie, schimbati lv2 : 2 in lv2 : 10

Nota : Acest script functioneaza si la mesaje si puncte. Cu toate acestea, acest sistem a fost creat special pentru cel de reputatie.


Tutorial scris de Ange Tuteur, tradus in limba romana de Tecko

Copyright ˆ Forumgratuit.ro Nici o parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.

Typlo
Membru onorific
Membru onorific

masculin

Mesaje : 1784
Varsta : 18
Localizare : Alba Iulia
Data de inscriere : 08/01/2013
Multumiri : 69
Niciun avertisment

http://help.forumgratuit.ro/forum

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum