====== Joomla - Άσκηση 2 - Τροποποίηση Εμφάνισης ====== //Δοκιμασμένο σε Joomla 3.4.4, εκτύπωση σε firefox// * Νέα : * **Τροποποίηση Εμφάνισης** - Αν δεν είμαστε ήδη, συνδεόμαστε στην **Διαχείριση** του site. - Πηγαίνουμε **Σύστημα / Γενικές Ρυθμίσεις**, αλλάζουμε την **Ονομασία Ιστοτόπου** σε ''Global Any Travel'' και αποθηκεύουμε. - Πηγαίνουμε **Επεκτάσεις / Διαχείριση Ενθεμάτων** και πατάμε πάνω στο **Image Module**. Διαγράφουμε την εικόνα με το μπλε λουλούδι και αποθηκεύουμε. - Θα ψάξουμε να βρούμε ένα λογότυπο για το site μας. Θα φτιάξουμε ένα site για ένα ταξιδιωτικό πρακτορείο. - Ψάχνουμε στο google στις εικόνες για **travel logo** - //(λογότυπο ταξίδια)// - Εδώ μπορούμε να δούμε πολλά λογότυπα όμως δεν μπορούμε να τα χρησιμοποιήσουμε καθώς ειδικά τα λογότυπα είναι δημιουργίες που προστατεύονται από πνευματικά δικαιώματα. **Μπορούμε όμως να πάρουμε ιδέες**. - Πατάμε στο κουμπάκι **Εργαλεία Αναζήτησης** και στα **Δικαιώματα Χρήσης** επιλέγουμε **με επισήμανση για εκ νέου χρήση**. Αυτά τα λογότυπα μπορούμε να τα χρησιμοποιήσουμε όπως είναι. (Προσοχή! Θα πρέπει να αναφέρεται και στο site τους η ελεύθερη χρήση καθώς το google μπορεί να κάνει λάθος κάποιες φορές). - Πατώντας πάνω σε κάποιο που μας αρέσει μπορεί να εμφανιστούν και άλλες ενδιαφέροντες σχετικές εικόνες. Κατεβάζουμε όποια εικόνα μας αρέσει και αποθηκεύουμε σε έναν νέο φάκελο που θα δημιουργήσουμε **''mathimata/joomla/eikones''**. Όνομα αρχείου βάζουμε **''globalanytravel_logo1.png''** - Θα εισάγουμε αυτήν την εικόνα στον ιστότοπό μας - Στην Διαχείριση πηγαίνουμε **Επεκτάσεις / Διαχείριση Ενθεμάτων** και πατάμε πάνω στο **Image Module**. - Βρίσκουμε το κουμπάκι **Εικόνα**. Πατάμε σε αυτό. - Μας ανοίγει ένα παράθυρο εισαγωγής της εικόνας. Στο κάτω μέρος του υπάρχει ένα κουμπί **Αναζήτηση**. Πατάμε εκεί και ψάχνουμε την εικόνα που αποθηκεύσαμε προηγουμένως. - Στην συνέχεια πατάμε **Έναρξη μεταφόρτωσης** ώστε να μεταφερθεί από τον Υπολογιστή μας, στον server που φιλοξενεί την εγκατάσταση Joomla. - Κάνουμε κλικ πάνω στην εικόνα που μόλις ανεβάσαμε στο Joomla και πατάμε **Εισαγωγή** - Η εικόνα μας πιθανόν είναι μεγάλη. Θα πρέπει να την μικρύνουμε ώστε να μην καλύπτει όλη την πρώτη σελίδα και φαίνεται άσχημα. Πιάνουμε την κάτω δεξιά άκρη της με το ποντίκι και σέρνουμε ώστε να μικρύνει. Μας εμφανίζονται οι διαστάσεις καθώς σέρνουμε. Θα πρέπει η **2η διάσταση (ύψος)** να είναι κάπου **μεταξύ 100 και 150 το πολύ**. - Πατάμε το αριστερό κουμπί {{:el:school:lessons:html:save_n_edit_18.png}} και πάμε στον **Ιστότοπο** ώστε να δούμε πως εμφανίζεται. - Αν δεν μας αρέσει αλλάζουμε όπως προηγουμένως τις διαστάσεις. - Η εικόνα μας εμφανίζεται μικρότερη αλλά ο περιηγητής την φορτώνει πρώτα ολόκληρη και την εμφανίζει μετά σε άλλες διαστάσεις. Αυτό έχει σαν αποτέλεσμα την καθυστέρηση της εμφάνισης της ιστοσελίδας μας κάτι που δεν θέλουμε. - Στο κάτω μέρος της σελίδας κάτω από τον επεξεργαστή άρθρου, δεξιά, έχει ένα κουμπί **Εναλλαγή κειμενογράφου**. Πατάμε σε αυτό. - Μας εμφανίζεται ο κώδικας html του άρθρου. Βλέπουμε την γνωστή μας ετικέτα **** με την ιδιότητα **src**, στην οποία προστέθηκαν οι ιδιότητες **width** και **height**. Αυτές αλλάζουν τις διαστάσεις την ώρα της εμφάνισης, αλλά η εικόνα παραμένει μεγάλη. - Καταγράψτε σε ένα πρόχειρο τις διαστάσεις **width** και **height**. Πατήστε πάλι στο κουμπί **Εναλλαγή κειμενογράφου** ώστε να αλλάξει πάλι ο κειμενογράφος σε γραφικό επεξεργαστή. - Θα χρησιμοποιήσουμε το gimp για να φτιάξουμε μια νέα εικόνα με τις διαστάσεις που θέλουμε. - Οι οδηγίες αφορούν άλλες εικόνες και άλλες διαστάσεις. Εμείς θα ανοίξουμε την εικόνα του λογότυπού μας **θα αλλάξουμε τις διαστάσεις** σε αυτά που σημειώσαμε για το **width** και **height** και θα αποθηκεύσουμε σε νέο αρχείο προσθέτοντας στο όνομά του, το **-small** όπως λένε οι οδηγίες, δηλαδή **''globalanytravel_logo1-small.png''**. - Οι οδηγίες είναι εδώ : [[el:school:lessons:html:ergastirio:joomla:askisi9]] στο **βήμα 2**. - Πλέον έχουμε και ένα νέο αρχείο που στο όνομα του έχει το //**-small**//. Πάμε πίσω στην Διαχείριση και στις **Επεκτάσεις / Διαχείριση Ενθεμάτων** πατάμε πάλι πάνω στο **Image Module**. - Αφαιρούμε την εικόνα που είχαμε βάλει. - Από το κουμπί **Εικόνα** στο κάτω μέρος μεταφορτώνουμε και εισάγουμε την νέα εικόνα **''globalanytravel_logo1-small.png''** με τις μικρότερες διαστάσεις. Θα πρέπει να εμφανιστεί κατευθείαν στις διαστάσεις που θέλουμε. - Αποθηκεύουμε και πάμε στον **Ιστότοπο** να δούμε τις αλλαγές. - Βλέπουμε ότι η εικόνα μας είναι κάτω από το μενού **Αρχική**. Αυτό γίνεται διότι το ένθεμα **Image Module** εμφανίζεται στην θέση **position-3**. Θα μπορούσαμε να μετακινήσουμε το ένθεμα **Image Module** σε άλλη θέση πάνω από το μενού **Αρχική** αλλά θα κάνουμε κάτι άλλο. Θα τροποποιήσουμε το πρότυπο εμφάνισης. - Στην **Διαχείριση** στις **Επεκτάσεις / Διαχείριση Ενθεμάτων** αποσύρουμε το ένθεμα **Image Module** ώστε να μην εμφανίζεται. - ΠΡΟΣΟΧΗ! Επειδή το πρότυπο **Protostar-Default** είναι ενσωματωμένο στο Joomla, μία αναβάθμιση του Joomla θα αλλάξει και το πρότυπο αυτό. Εμείς θα κάνουμε αλλαγές που δεν θέλουμε να πειραχτούν οπότε θα φτιάξουμε ένα αντίγραφο. Πηγαίνουμε **Επεκτάσεις / Διαχείριση Προτύπων**. Τσεκάρουμε το **Protostar-Default** και πατάμε στο κουμπί **Αντίγραφο**. Δημιουργείται το **Protostar-Default(2)**. - Ορίζουμε ως προεπιλεγμένο το **Protostar-Default(2)**. - Κάνουμε κλικ πάνω στο πρότυπο **Protostar-Default(2)** που χρησιμοποιείται (δεν τσεκάρουμε). - Στην καρτέλα **Προηγμένα** - Στον **Τίτλο Ιστοτόπου** τοποθετούμε : ''Global Any Travel'' - Στην **Περιγραφή** : ''Ταξιδέψτε Παντού'' - Πηγαίνουμε στον **Ιστότοπο** για να δούμε τις αλλαγές. - Πίσω στην **Διαχείριση Προτύπων**, στο πρότυπο **Protostar-Default(2)**, στην καρτέλα **Προηγμένα**, στο πεδίο **Λογότυπο** πατάμε πάνω στο κουμπί **Επιλογή** και επιλέγουμε την εικόνα **''globalanytravel_logo1-small.png''**. Πηγαίνουμε στον **Ιστότοπο** για να δούμε τις αλλαγές. - Βλέπουμε ότι χάθηκε ο Τίτλος **Global Any Travel** και εμφανίστηκε στην θέση του η εικόνα. Αν θέλουμε και τον τίτλο μαζί έχουμε τις εξής επιλογές. - Να φτιάξουμε μια εικόνα πιο πλατιά που να περιέχει και τον τίτλο αυτό στα δεξιά της. - Να αλλάξουμε τον κώδικα του προτύπου ώστε να εμφανίζει και τον τίτλο. - Να αλλάξουμε σε άλλο πρότυπο που θα κρατάει και την εικόνα και τον τίτλο εάν θέλουμε. * Η 1η επιλογή είναι η ευκολότερη και χρειάζεται επεξεργασία εικόνας με ένα πρόγραμμα όπως το gimp. Η 3η επιλογή να αλλάξουμε πρότυπο ισχύει μόνο εάν το πρότυπο που διαλέξαμε μας δυσκολεύει γενικότερα και σε άλλα. Εμείς θα δούμε την 2η επιλογή που για το συγκεκριμένο πρότυπο δεν είναι τόσο δύσκολη. - Στην Διαχείριση πηγαίνουμε **Επεκτάσεις / Διαχείριση Προτύπων** και στο αριστερό μενού πατάμε στο **Πρότυπα** - Στην λίστα με τα πρότυπα πατάμε στο **Στοιχεία και Αρχεία Προτύπου Protostar**. - Μας εμφανίζονται τα αρχεία το προτύπου Protostar. Πατάμε αριστερά στο **index.php** που έχει τον κεντρικό κώδικα php του προτύπου. - Ψάχνουμε για τον κώδικα κάτω από την γραμμή **''Logo file or site title param''** - Για να αγνοηθεί ο υπάρχον κώδικας χωρίς να χαθεί, βάζουμε σχόλια **''%%//%%''** μπροστά από το // $logo = ''; - Ακριβώς στην από κάτω γραμμή πριν το **''}''** εισάγουμε $logo = '' . '' . htmlspecialchars($this->params->get('sitetitle')) . ''; - Πατάμε {{:el:school:lessons:html:save_n_exit_18.png}} και πηγαίνουμε στον **Ιστότοπο** για να δούμε αν τα καταφέραμε. * Ο προηγούμενος κώδικας εμφάνιζε μόνο την εικόνα του λογότυπου **εάν την είχαμε ορίσει** αλλιώς μόνο τον τίτλο στο πρότυπο **εάν υπήρχε** ή **αλλιώς** τον τίτλο του ιστοτόπου στις Γενικές Ρυθμίσεις. Εμείς αλλάξαμε τον κώδικα ώστε εάν υπάρχει η εικόνα να εμφανίζει την εικόνα και τον τίτλο μαζί. |{{:el:school:lessons:html:joomla_modify_template.png?400|Τροποποίηση Προτύπου Εμφάνισης}}|{{:el:school:lessons:html:joomla_protostar_advanced_options.png?400|Protostar - Ρυθμίσεις}}|