aed
div.post.online.st-answer-admin, div.post.st-answer-admin { background-image: url(http://i39.servimg.com/u/f39/18/22/09/39/admin-10.png)!important; background-position: right bottom; background-repeat: no-repeat; }
Ακτιβιστές
Gamatos (2920)
 
SCZI (1799)
 
Rock'n'Trolla (1690)
 
lOlman (1537)
 
Technical Supporter (1393)
 
Voks (1043)
 
B-Colt (994)
 
rebelos (812)
 
Μurderer (710)
 
YuGo007 (608)
 

Βοήθησε όπως μπορείς
για να παραμένει η Παρέα
στο χώρο αυτό

Περαστικός - 0
Νέος Χρήστης - 20
Μέλος - 50
Κάτοικος - 150
Πρεσβύτερος - 300
Βετεράνος - 500

Μη Συνδεδεμενος Παρακαλώ συνδεθείτε ή εγγραφείτε

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω  Μήνυμα [Σελίδα 1 από 1]

Gamatos

ΦώτοΝτοσιέΕπαφές
avatar




Μέσα στο μάθημα περιγράφονται δύο τρόποι για εγκατάσταση του κώδικα και του 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 στο φόρουμ και δεν θέλετε να φαίνονται τότε κλικ εδώ!:
Πρέπει να δημιουργήσετε αριστερή κολόνα με ένα widget και ύστερα να το κρύψετε. Μέσα στο Π.Δ. - Λειτουργικές Μονάδες - Widgets του φόρουμ και στο Display forum widgets βάλτε - "ΝΑΙ" και στο Width column 1 (left) βάζουμε - "180".

Φτιάχνετε ένα widget στην αριστερή κολόνα και βάζετε τον κωδικό που φτιάξατε.
Και ύστερα πάτε Εμφάνιση - Εικόνες και χρώματα - Χρώματα - CSS Stylesheet και βάζετε το παρακάτω πάνω πάνω!:
Κώδικας:
#content-container div#left {
display: none;
margin-right:0px;
}
#content-container div#content {
margin-right: 0px;
}

Πάμε στο Π.Δ. - Λειτουργικές Μονάδες - 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>'));

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

Παράδειγμα

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

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


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


Μurderer

ΦώτοΝτοσιέΕπαφές


Ωραιος!

kwnos100

ΦώτοΝτοσιέΕπαφές


thanks :)

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή  Μήνυμα [Σελίδα 1 από 1]



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


© 2009-2013 Parea.Biz Με επιφύλαξη παντός δικαιώματος.