Προσθέστε μπάρα για το πεδίο Φήμης

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω

Προσθέστε μπάρα για το πεδίο Φήμης

Δημοσίευση από Luffy Την / Το Τετ Δεκ 24, 2014 1:22 pm

Προσθέστε μπάρα για το πεδίο Φήμης


Με αυτό τον οδηγό θα μάθετε πως να κάνετε το πεδίο Φήμης σε μια μπάρα με αυξανόμενες εικόνες κουτιών ή αστεριών ανάλογα με τον αριθμό φήμης που έχουν τα μέλη στο φόρουμ σας.


Η μπάρα φήμης θα δουλέψει για όλες τις μορφές φόρουμ φτάνει το πρότυπο viewtopic_body να μην είναι αλλαγμένο σε μεγάλο βαθμό.



Ενεργοποίηση πεδίου Φήμης

Για να δουλέψει ο οδηγός αυτός πρέπει πρώτα να ενεργοποιήσετε το σύστημα. Πάτε: Πίνακας Διαχείρισης > Λειτουργικές Μονάδες > Πόντοι και φήμη > Φήμη
και ενεργοποιείτε το σύστημα και το αποθηκεύετε:



Μορφοποίηση CSS

Πάτε: Πίνακας Διαχείρισης > Εμφάνιση > Εικόνες και χρώματα > Χρώματα > CSS Stylesheet. Άρα, οι εικόνες αυτές (τα κουτιά και τα αστέρια) έχουν ένα συγκεκριμένο στυλ. Προσθέστε τον εξής κώδικα στο CSS σας:
Κώδικας:
#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;
}
Εξηγήσεις:
height:8px; / width:8px; Το μέγεθος των εικόνων σε ύψος και πλάτος αντίστοιχα.
background:#0A0; Δίνει στα κουτιά το πράσινο χρώμα.
border:1px solid #080; Δίνει στα κουτιά το έντονο πράσινο χρώμα στο περίγραμμα 1 pixel.
border-radius:2px; Κάνει τις γωνίες των κουτιών ελαφρώς κυκλικές.
box-shadow:0 3px 3px #0C0 inset; Δίνει στα κουτιά μια ελαφριά πράσινη σκιά για να φαίνονται πιο λαμπερά.
display:inline-block; Ορίζει τις εικόνες να είναι σε μια σειρά.
margin:0 0.5px; Ορίζει ένα 0.5 pixel κενό μεταξύ των εικόνων.


Javascript

Πάμε: Πίνακας Διαχείρισης > Λειτουργικές Μονάδες > HTML & JAVASCRIPT > Διαχείριση κωδικών Javascript και συμπληρώνουμε τα πεδία αναλόγως με βάση τα παρακάτω:

Title : Reputation Bars
Placement : In the topics
Javascript Code : αντιγραφή / επικόλληση του παρακάτω κώδικα
Κώδικας:
$(document).ready(function() {
 
  var version = 'phpbb3';
 
  var settings = {
      repName : 'Φήμη',
      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 + ')');
      });
    }
});
Αλλαγές που πρέπει να γίνουν στο Javascript:
Για να δουλέψει το Javascript αυτό πρέπει πρώτα να κάνετε κάποιες αλλαγές προσεκτικά.

var version = 'phpbb3' : Πρέπει να αλλάξετε το phpbb3 με την μορφή του φόρουμ σας. Οι μορφές είναι: phpbb2, phpbb3, punbb ή invision.
repName : 'Φήμη' : Αλλάξετε το Φήμη με την λέξη που θέλετε να έχει το πεδίο φήμης σας.
repStyle : 'block' : Σε αυτό το κομμάτι αλλάξετε το block ανάλογα με το είδος της εικόνας που θέλετε να έχετε.
Αν θέλετε κουτάκια θα βάλετε: block (παρουσίαση)
Αν θέλετε αστεράκια θα βάλετε: image (παρουσίαση)
repImage : 'http://i57.servimg.com/u/f57/18/21/41/30/star12.png' : Αυτή είναι η εικόνα για τα αστεράκια αν θέσετε στο πεδίο repStyle : 'image'. Αντικαθιστάτε τον ενεργό σύνδεσμο link της εικόνας http://i57.servimg.com/u/f57/18/21/41/30/star12.png με έναν άλλο ενεργό σύνδεσμο link μιας εικόνας που θέλετε να έχετε.
lv1 : 1, lv2 : 2, lv3 : 3.. : Αυτά είναι τα επίπεδα και τα ποσοστά φήμης για το κάθε επίπεδο. Εσείς πρέπει να ορίσετε πόση φήμη απαιτεί το κάθε επίπεδο για να λάβετε το επόμενο κουτί / αστέρι. Για παράδειγμα αν θέλετε για το επίπεδο 2 να έχει το μέλος 10 πόντους φήμης για να πάρει το δεύτερο κουτάκι / αστεράκι πρέπει να αλλάξετε στο lv2 : 2 το 2 με 10. Δηλαδή θα έχετε: lv1 : 1, lv2 : 10, ...

Σημείωση: Αυτός ο οδηγός μπορεί να γίνει και για το πεδίο των μηνυμάτων, των πόντων κλπ αλλά σχεδιάστηκε κυρίως για το πεδίο Φήμης.


Κάνοντας τις απαραίτητες αλλαγές και αποθηκεύοντάς τα είστε έτοιμοι! cheers

Ο οδηγός γράφτηκε από Ange Tuteur του Αγγλικού Φόρουμ Υποστήριξης και μεταφράστηκε στα Ελληνικά για τις ανάγκες του ForumGreek.



avatar

Luffy
Διαχειριστής
Διαχειριστής

Άντρας
Τόπος : Ελλάδα
Δημοσιεύσεις : 2289

Luffy ο/η συγγραφέας σας ευχαριστήσε για την απάντησή σας.

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή


Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης