Μέσα στο μάθημα περιγράφονται δύο τρόποι για εγκατάσταση του κώδικα και του CSS μην τους βάζετε και τους δύο διαλέξτε ποιο σας ταιριάζει, ακόμα καλύτερα διαβάστε όλο το μάθημα και μετά αρχίστε να το εφαρμόζετε!!!

Ταιριάζει για όλες τις εκδόσεις των φόρουμ. Επιτρέπει να δώσετε χρώμα και/ή εικονίδιο χωρίς να δημιουργείτε ξεχωριστή ομάδα για κάθε χρήστη. Ο κώδικας αντιστοιχίζει σε κάθε ψευδώνυμο το δικό του στυλ.

1. Δημιουργία κώδικα

Ο κώδικας είναι αυτός:

Κώδικας:

<script type='text/javascript' charset='windows-1251'>
jQuery(document).ready(function(){
jQuery("a:contains('όνομα1')").wrapInner(jQuery('<span class="user1"></span>'));
jQuery("a:contains('όνομα2')").wrapInner(jQuery('<span class="user2"></span>'));
jQuery("a:contains('όνομα3')").wrapInner(jQuery('<span class="user3"></span>'));
});
</script>

Εάν θέλετε να βάλετε για ποιο πολλούς χρήστες τότε μετά από αυτό:

Κώδικας:

jQuery("a:contains('όνομα3')").wrapInner(jQuery('<span class="user3"></span>'));

βάλτε αυτό:

Κώδικας:

jQuery("a:contains('όνομα4')").wrapInner(jQuery('<span class="user4"></span>'));

και συνεχίζετε έτσι μέχρι να φτάσετε για όσα μέλη θέλετε.

Αντί για όνομα1,όνομα2,όνομα3... βάλτε τα σωστά ονόματα χρηστών! Το στυλ μπορεί να δοθεί όπως θέλετε εσείς, για όλους διαφορετικό ή για όλους ίδιο ή έτσι και έτσι μαζί.

2.1 Τοποθέτηση κώδικα για PunBB και PhpBB2

Λοιπών πάμε: Π.Δ. - Εμφάνιση - Πρότυπα - Γενική Διαχείριση

Ψάχνουμε για το overall_header και πατάμε και βάζουμε τον κωδικό που φτιάξαμε κάτω κάτω στο τέλος.



Πατάμε υποβολή και το δημοσιεύουμε με το .

2.2 Τοποθέτηση κώδικα για Invision και PhpBB3

Αν δεν έχετε widget στο φόρουμ και δεν θέλετε να φαίνονται τότε κλικ εδώ!:

Πάμε στο Π.Δ. - Λειτουργικές Μονάδες - Widgets του φόρουμ φτιάχνουμε ένα widget και βάζουμε τον κωδικό που φτιάξαμε:

Και μετά πάμε στο Π.Δ. - Λειτουργικές Μονάδες - Διαχείριση αρχικής και βάζουμε αυτό που φτιάξαμε για να φαίνεται και εκεί εφόσον έχουμε αρχική σελίδα.

3. Εγκατάσταση στυλ

Το ποιο σωστό είναι για να μην χάσετε το στυλ σας κατά την αλλαγή του θέματος/εκδόσεις του φόρουμ να βάλετε το κωδικό μέσα στο widget κάτω ακριβός από το προηγούμενο κώδικα (Εφόσον έχετε φτιάξει widget! Αν το κώδικα έχετε βάλει στα Πρότυπα τότε διαβάστε το ποιο κάτω βήμα!):

Κώδικας:

<style type="text/css">
.user1 {
color: #9400D3;
padding-right: 21px;
background: transparent url('http://fantasyflash.ru/anime/well/image/we89.gif') no-repeat center right;
text-shadow: 0px 0px 4px #B7A0E5;
}
.user2 {
color: #FF1493;
padding-right: 21px;
background: transparent url('http://fantasyflash.ru/anime/well/image/we93.gif') no-repeat center right;
text-shadow: 0px 0px 4px #DDA0DD;
}
.user3 {
color: #FF8C00;
padding-right: 21px;
background: transparent url('http://fantasyflash.ru/anime/well/image/we98.gif') no-repeat center right;
text-shadow: 0px 0px 4px #F4A460;
}
</style>

Η μπορείτε να το βάλετε στο CSS αυτό:

Κώδικας:

.user1 {
color: #9400D3;
padding-right: 21px;
background: transparent url('http://fantasyflash.ru/anime/well/image/we89.gif') no-repeat center right;
text-shadow: 0px 0px 4px #B7A0E5;
}
.user2 {
color: #FF1493;
padding-right: 21px;
background: transparent url('http://fantasyflash.ru/anime/well/image/we93.gif') no-repeat center right;
text-shadow: 0px 0px 4px #DDA0DD;
}
.user3 {
color: #FF8C00;
padding-right: 21px;
background: transparent url('http://fantasyflash.ru/anime/well/image/we98.gif') no-repeat center right;
text-shadow: 0px 0px 4px #F4A460;
}

όπου color - χρώμα κειμένου
background - εικονίδιο δεξιά από το όνομα χρήστη (αν θέλετε το χρησιμοποιείτε ή το σβήνετε)
padding-right - κενό, οποίο είναι απαραίτητο, για να μην πηγένει το εικονίδιο πάνω στο κείμενο, πρέπει να είναι λίγο παραπάνω από το πλάτος της εικόνας.
background - φόντο; transparent - διαφανές, url('διεύθυνση εικόνας') - εικονίδιο, no-repeat - εικονίδιο δεν επαναλαμβάνετε, center right - εικόνα είναι κατά κέντρο και προσαρμοσμένη δεξιά.
text-shadow - σκιά από το κείμενο; 0px 0px - επενδυτική πλήρωση της σκιάς οριζόντια και κάθετα, 4px - θάμβος σκιάς, #F4A460 - χρώμα σκιάς;




Σε αυτήν την περίπτωση ο κωδικός δεν θα λειτουργήσει πλήρως, η εικόνα δίπλα στο όνομα θα εμφανιστεί αλλά το χρώμα θα πάρει σύμφωνα με την ομάδα στην οποία ανήκει ο χρήστης.
Για να μπλοκάρετε το χρώμα της ομάδας πρέπει να αλλάξετε στο κωδικό a:contains με a span:contains μπροστά από όνομα κάθε χρήστη:

Κώδικας:

jQuery("a:contains('Ник1')").wrapInner(jQuery('<span class="user1"></span>'));

με

Κώδικας:

jQuery("a span:contains('Ник1')").wrapInner(jQuery('<span class="user1"></span>'));

Μην ξεχάσετε να το αποθηκεύσετε .

Παράδειγμα

Τρις χρήστες είναι σε διάφορες ομάδες που κάθε μια έχει διαφορετικό χρώμα:

Μετά την εφαρμογή του κώδικα:


Αυτό το σεμινάριο δημιουργήθηκε από χρήστη Gamatos. Οποιαδήποτε δημοσίευση του υλικού αυτού χωρίς άδεια www.parea.biz απαγορεύεται!

Ωραιος!

thanks :)