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

από **Luffy** Τετ Δεκ 24, 2014 1:22 pm

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

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

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

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

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

Προσθέστε μπάρα για το πεδίο Φήμης 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.