από Luffy Τρι Σεπ 05, 2017 10:08 am
| Προσθήκη κουμπιών για Συντονιστές | |
Γεια σας,
Σε αυτό τον οδηγό θα σας δείξω πως μπορείτε να προσθέσετε 3 κουμπιά, ένα πράσινο, ένα μπλε και ένα κόκκινο κουτί, που μπορούν να χρησιμοποιούν οι Συντονιστές σας στο φόρουμ σας. Ακολουθήστε τα παρακάτω βήματα και θα έχετε το αποτέλεσμα που προβάλλουν οι παρακάτω εικόνες.
JavascriptΓια την εγκατάσταση του Javascript κώδικα, πρέπει: Πηγαίνετε: Πίνακας Διαχείρισης ► Λειτουργικές Μονάδες ► HTML & JAVASCRIPT ► Διαχείριση κωδικών Javascript και δημιουργήστε ένα νέο Javascript. ακολούθως, συμπληρώστε τα πεδία ως εξής: Τίτλος: Ότι επιθυμείτε Τοποθέτηση: Σε όλες τις σελίδες Κώδικας: αντιγράψτε και επικολλήστε τον εξής κώδικα:
- Κώδικας:
$(function(){ //Σε κάθε περίπτωση μπορείτε να αλλάξετε την σειρά που θέλετε να εμφανίζονται τα κουτιά. //Με την σειρά που τα ορίσετε θα εμφανιστούν στον editor. Π.χ. Πράσινο Μπλε Κόκκινο κλπ. //Σύνδεσμος επίσημου οδηγού ForumGreek: http://helpgr.forumgreek.com/t1266-topic#9604 //Εδώ ορίζονται τα δικαιώματα ώστε να τα βλέπουν μόνο οι Συντονιστές if (_userdata.user_level === 0 || !document.getElementById('text_editor_textarea')) return; $(function(){ //Εδώ ξεκινά ο κώδικας δημιουργίας του Πράσινου Κουτιού $('<a class="sceditor-button sceditor-button-code" unselectable="on" title="Πράσινο Κουτί"><div unselectable="on" style="background:url(https://i.servimg.com/u/f37/19/06/26/04/check_10.png);background-size:16px;">Πράσινο Κουτί</div></a>').insertBefore('.sceditor-button-source').click(function(){ $('#text_editor_textarea').sceditor("instance").insertText('[center][table id="tabMod" class="compl"][tr][td class="iconMod compl"][/td][td class="contMod"]','[/td][/tr][/table][/center]'); }); //Εδώ ξεκινά ο κώδικας δημιουργίας του Μπλε Κουτιού $('<a class="sceditor-button sceditor-button-code" unselectable="on" title="Μπλε Κουτί"><div unselectable="on" style="background:url(https://i.servimg.com/u/f37/19/06/26/04/06949210.png);background-size:16px;">Μπλε Κουτί</div></a>').insertBefore('.sceditor-button-source').click(function(){ $('#text_editor_textarea').sceditor("instance").insertText('[center][table id="tabMod" class="tag"][tr][td class="iconMod tag"][/td][td class="contMod"]','[/td][/tr][/table][/center]'); }); //Εδώ ξεκινά ο κώδικας δημιουργίας του Κόκκινου Κουτιού $('<a class="sceditor-button sceditor-button-code" unselectable="on" title="Κόκκινο Κουτί"><div unselectable="on" style="background:url(https://i.servimg.com/u/f37/19/06/26/04/delete10.png);background-size:16px;">Κόκκινο Κουτί</div></a>').insertBefore('.sceditor-button-source').click(function(){ $('#text_editor_textarea').sceditor("instance").insertText('[center][table id="tabMod" class="error"][tr][td class="iconMod error"][/td][td class="contMod"]','[/td][/tr][/table][/center]'); }); }); });
Ακολούθως πατήστε Υποβολή.
CSSΓια την εγκατάσταση του CSS όπου θα τελειώσει την τελική εμφάνιση των αποτελεσμάτων σας πρέπει: Πηγαίνετε: Πίνακας Διαχείρισης ► Εμφάνιση ► Εικόνες και χρώματα ► Χρώματα ► CSS Stylesheet και αντιγράψτε και επικολλήστε τον παρακάτω κώδικα:
- Κώδικας:
table#tabMod{ width:80%; font-family:Trebuchet MS; font-size:16px; color:#fafafa; line-height:20px; border-radius:1px } table#tabMod.error{ background:#c73a3a; border:1px solid #792222 } table#tabMod.compl{ background:#5da73f; border:1px solid #43792d } table#tabMod.tag{ background:#3f6c8c; border:1px solid #2b4c63 } td.iconMod{ width:3%; text-align:center } td.iconMod.error:before{ content:''; background:#792222 } td.iconMod.compl:before{ content:''; background:#43792d } td.iconMod.tag:before{ content:''; background:#2b4c63 } td.iconMod:before{ font-family:FontAwesome; font-size:18px; font-weight:bold; color:#fafafa; padding:2px; border-radius:2px; display:block; width:25px; height:25px; margin:0px -5px 0px 0px; line-height:25px } td.contMod{ width:90%; padding:5px 10px }
Τέλος, πατήστε Submit.
ΑποτέλεσμαΑκολουθώντας τα παραπάνω βήματα θα έχετε αυτό το αποτέλεσμα:
|