Joomla - Άσκηση 6 - Templates και εμφάνιση site - jce editor

Δοκιμασμένο σε Joomla 3.4.4, εκτύπωση σε firefox

• Νέα : Εγκατάσταση προσθέτου JCE Editor, εισαγωγή στα templates και στα css

1. ΕΓΚΑΤΑΣΤΑΣΗ ΠΡΟΣΘΕΤΟΥ JCE Editor
   1. Θα εγκαταστήσουμε έναν νέο επεξεργαστή άρθρων με περισσότερες δυνατότητες από αυτόν που είναι ήδη εγκατεστημένος
   2. Ψάχνουμε στο google για Joomla JCE editor download. Κατεβάζουμε την τελευταία έκδοση και συγκεκριμένο το legacy του editor για Joomla 3.x. Είναι ένα συμπιεσμένο αρχείο zip. Αποθηκεύουμε το αρχείο εγκατάστασης στον φάκελο mathimata/joomla
   3. Από την ΔΙΑΧΕΙΡΙΣΗ του Joomla πηγαίνουμε Επεκτάσεις/Διαχείριση Επεκτάσεων
   4. Στην καρτέλα Μεταφόρτωση Αρχείου Εγκατάστασης πατάμε Αναζήτηση και βρίσκουμε το αρχείο που αποθηκεύσαμε προηγουμένως στον φάκελο mathimata/joomla
   5. Πατάμε Μεταφόρτωση & Εγκατάσταση. Όταν ολοκληρωθεί θα πρέπει να μας εμφανίσει μήνυμα Η εφαρμογή εγκαταστάθηκε επιτυχώς
2. ΕΝΕΡΓΟΠΟΙΗΣΗ JCE Editor
   • Θα ορίσουμε τον JCE Editor ως προκαθορισμένο επεξεργαστή άρθρων.
   1. Πηγαίνουμε Σύστημα / Γενικές Ρυθμίσεις
   2. Στην καρτέλα Ιστότοπος, στο πεδίο Προεπιλεγμένος Κειμενογράφος, επιλέγουμε Editor JCE και πατάμε .
3. ΕΠΕΞΕΡΓΑΣΙΑ ΑΡΘΡΟΥ - JCE Editor - html
   1. Θα επεξεργαστούμε το άρθρο Κέρκυρα. Πηγαίνουμε Περιεχόμενο / Διαχείριση Άρθρων και πατάμε πάνω στο άρθρο Κέρκυρα
   2. Στα εικονίδια του JCE Editor στην τρίτη γραμμή πατάμε πάνω στο εικονίδιο . Μας εμφανίζεται html.
   3. Εάν τα ελληνικά εμφανίζονται με περίεργους χαρακτήρες &kappa&epsilon ..
      1. Πατάμε Κλείσιμο και πηγαίνουμε Εφαρμογές / JCE Editor / Global Configuration
      2. Στο πεδίο DocType επιλέγουμε HTML5
      3. Πηγαίνουμε Περιεχόμενο / Διαχείριση Άρθρων και πατάμε πάνω στο άρθρο Κέρκυρα
      4. Στα εικονίδια του JCE Editor στην τρίτη γραμμή πατάμε πάνω στο εικονίδιο . Μας εμφανίζεται πάλι η html, αυτή την φορά χωρίς πρόβλημα στους ελληνικούς χαρακτήρες.
   4. Διαγράφουμε την ετικέτα <p></p>
   5. Βάζουμε το κείμενο Το νησί της Κέρκυρας σε Επικεφαλίδα 1.
   6. Πληκτρολογούμε το κείμενο Ιστορικά Στοιχεία και το βάζουμε μέσα σε Επικεφαλίδα 2
   7. Πατάμε πάλι το εικονίδιο . Μας εμφανίστηκαν τα 2 κείμενα με μεγάλα γράμματα, όπως περιμέναμε. Πατάμε .
   8. Με όμοιο τρόπο επεξεργαζόμαστε το άρθρο Παρίσι ορίζοντας το κείμενο Η πόλη του Παρισιού ως Επικεφαλίδα 1 και εισάγοντας το κείμενο Αξιοθέατα ως Επικεφαλίδα 2. Αποθηκεύουμε και πηγαίνουμε στον ΙΣΤΟΤΟΠΟ για να δούμε το αποτέλεσμα.
4. ΠΡΟΤΥΠΑ - templates και αλλαγή εμφάνισης site
   • Για να καταλάβουμε καλύτερα την σημασία του προτύπου στην εμφάνιση θα πάμε να το αλλάξουμε.
   1. Πηγαίνουμε Επεκτάσεις / Διαχείριση Προτύπων και πατάμε πάνω στο πρότυπο Protostar - Default(2).
   2. Στην καρτέλα Προηγμένα βλέπουμε το Χρώμα Προτύπου (γραμματοσειράς) και το Χρώμα Υποβάθρου (φόντου). Αλλάζουμε και τα 2 επιλέγοντας άλλα χρώματα.
   3. Πατάμε και πηγαίνουμε στον Ιστότοπο για να δούμε την αλλαγή.
   4. Κάνουμε και άλλες δοκιμές αν θέλουμε με άλλα χρώματα.
   5. Κρατάμε τα δικά μας χρώματα ή επαναφέρουμε τα προκαθορισμένα πληκτρολογώντας στο Χρώμα Προτύπου #0088cc και στο Χρώμα Υποβάθρου #f4f6f7
5. ΑΛΛΑΓΗ ΠΡΟΤΥΠΟΥ - template
   • Το πρότυπο Protostar - Default(2) έχει εμφανίσεις που διαφέρουν κυρίως χρωματικά, όμως μπορούμε να χρησιμοποιήσουμε και άλλο πρότυπο που θα έχει εντελώς διαφορετική εμφάνιση.
   1. Πηγαίνουμε Επεκτάσεις / Διαχείριση Προτύπων. Βλέπουμε ότι είναι προεπιλεγμένο το πρότυπο Protostar - Default(2). Δεξιά από το πρότυπο Beez3 - Default πατάμε πάνω στο πορτοκαλί αστεράκι ώστε να γίνει αυτό προεπιλεγμένο πρότυπο.
   2. Πηγαίνουμε στον Ιστότοπο για να δούμε την αλλαγή. Παρατηρούμε ότι άλλαξε εντελώς η εμφάνιση! Τα μενού έγιναν κεφαλαία και άλλαξαν, δεν εμφανίζεται το λογότυπό μας, αλλαξαν τα χρώματα οι γραμματοσειρές, η διάταξη κτλ.
   3. Πίσω στην Διαχείριση Προτύπων πατάμε πάνω στο πρότυπο Beez3 - Default
   4. Στην καρτέλα Προηγμένα αλλάζουμε το χρώμα του προτύπου σε Φύση.
   5. Πατάμε και πηγαίνουμε στον ΙΣΤΟΤΟΠΟ για να δούμε το αποτέλεσμα και στα 2 άρθρα Κέρκυρα και Παρίσι. Παρατηρούμε ότι άλλαξαν τα χρώματα του site γενικώς από αποχρώσεις του μπλε σε αποχρώσεις του πράσινου.
   6. Δοκιμάζουμε και τις 2 άλλες επιλογές Κόκκινο και Τυρκουάζ. Αφήνουμε ότι μας αρέσει.
   7. Το λογότυπο δεν εμφανίζεται αφού είχε μπει στις ρυθμίσεις του άλλου προτύπου. Μπορείτε να βρείτε την επιλογή να το εμφανίσετε;
   • Βλέπουμε ότι τα υπομενού Εσωτερικό και Εξωτερικό δεν εμφανίζονται σωστά. Πολλές φορές τα πρότυπα δεν υποστηρίζουν κάποιες δυνατότητες εμφάνισης και θα πρέπει να τα τροποποιήσουμε με αλλαγές στον κώδικα php, στα αρχεία στυλ css για να τα καταφέρουμε. Αλλιώς τροποποιούμε ρυθμίσεις στο πρότυπο ή στο joomla μέχρι να εμφανιστεί όσο το δυνατόν καλύτερα.
   • Παρατηρούμε επίσης ότι το κείμενο Το νησί της Κέρκυρας είναι μεγαλύτερο στο πρότυπο Beez3 - Default απ' ότι στο πρότυπο Protostar - Default(2) παρόλο που και τα 2 είναι στην ίδια ετικέτα <h1>.
   • ΤΙ ΣΥΜΒΑΙΝΕΙ;. Μέχρι τώρα δημιουργούσαμε απλές html ιστοσελίδες και μας εμφανιζόταν ένα συγκεκριμένο αποτέλεσμα. Η Επικεφαλίδα επιπέδου 1 ήταν συγκεκριμένου μεγέθους και πάντα στην ίδια γραμματοσειρά εκτός εάν βάζαμε <font face> για να την αλλάξουμε. Στο Joomla όμως έχουμε την λογική των προτύπων (templates). Ο δημιουργός του προτύπου Beez3 αποφάσισε άλλο μέγεθος και άλλη γραμματοσειρά για την ετικέτα <h1> απ' ότι ο δημιουργός του προτύπου Protostar.
   • Κάθε ετικέτα έχει το δικό της στυλ με διαφορετικό μέγεθος, γραμματοσειρά, χρώμα και πολλά άλλα..
6. ΕΠΑΝΑΦΟΡΑ ΠΡΟΤΥΠΟΥ Protostar - Default
   1. Στην Διαχείριση Προτύπων ορίζουμε πάλι ως προεπιλεγμένο το πρότυπο Protostar - Default(2) και πηγαίνουμε στον ΙΣΤΟΤΟΠΟ για να δούμε το αποτέλεσμα.