Ελληνική Κοινότητα Υποστήριξης ForumGreek
Καλωσήρθατε στο Ελληνικό Φόρουμ Υποστήριξης της ForumGreek!!

Για να αποκτήσετε πλήρη πρόσβαση στο φόρουμ και στα όσα προσφέρει, μπορείτε πολύ απλά να κάνετε μια σύνδεση ή αν δεν έχετε λογαριασμό μία δωρεάν εγγραφή και μπείτε στην κοινότητά μας!!

Προσθήκη κουμπιών για Συντονιστές

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω

Προσθήκη κουμπιών για Συντονιστές

Δημοσίευση από 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.

Αποτέλεσμα

Ακολουθώντας τα παραπάνω βήματα θα έχετε αυτό το αποτέλεσμα:





avatar

Luffy
Διαχειριστής
Διαχειριστής

Άντρας
Τόπος : Ελλάδα
Δημοσιεύσεις : 2117

Luffy ο/η συγγραφέας σας ευχαριστήσε για την απάντησή σας.

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή


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