Η τρέχουσα ημερομηνία/ώρα είναι Πεμ Μαρ 28, 2024 11:13 am

Η αναζήτηση βρήκε 1 εγγραφή

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

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


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

Θέματα με ετικέτα 0a0 στο Ελληνική Κοινότητα Υποστήριξης ForumGreek Test11

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



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

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


Μορφοποίηση 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://i.servimg.com/u/f57/18/21/41/30/star12.png' : Αυτή είναι η εικόνα για τα αστεράκια αν θέσετε στο πεδίο repStyle : 'image'. Αντικαθιστάτε τον ενεργό σύνδεσμο link της εικόνας https://i.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
Την / Το Τετ Δεκ 24, 2014 1:22 pm
 
Αναζήτηση σε...: Οδηγοί & Συμβουλές
Θεματική Ενότητα: Προσθέστε μπάρα για το πεδίο Φήμης
Απαντήσεις: 0
Αναγνώσεις: 1030

Επιστροφή στην κορυφή

Μετάβαση σε: