Ελληνική Κοινότητα Υποστήριξης ForumGreek
Καλωσήρθατε στο Ελληνικό Φόρουμ Υποστήριξης της ForumGreek!!

Για να αποκτήσετε πλήρη πρόσβαση στο φόρουμ και στα όσα προσφέρει, μπορείτε πολύ απλά να κάνετε μια σύνδεση ή αν δεν έχετε λογαριασμό μία δωρεάν εγγραφή και μπείτε στην κοινότητά μας!!

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

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

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

Δημοσίευση από 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 : 'https://i57.servimg.com/u/f57/18/21/41/30/star12.png' : Αυτή είναι η εικόνα για τα αστεράκια αν θέσετε στο πεδίο repStyle : 'image'. Αντικαθιστάτε τον ενεργό σύνδεσμο link της εικόνας https://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.



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

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

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

Επιστροφή στην κορυφή Πήγαινε κάτω

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


 
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης
Χρειάζεστε βοήθεια;
Στις Συχνές Ερωτήσεις μπορείτε να βρείτε σημαντικές πληροφορίες που θα σας βοηθήσουν!