====== Joomla - Άσκηση 8 - CSS - γραμματοσειρές, κλάσεις - firebug====== //Δοκιμασμένο σε Joomla 3.4.5, εκτύπωση σε firefox// * Νέα : **css - Xρώματα, Γραμματοσειρές, κληρονομικότητα, κλάσεις** * Εργαλείο επισκόπησης κώδικα firebug ---- * Είδαμε πως αλλάζουμε περιγράμματα στις ετικέτες h1 και h2 μέσω css. Θα δούμε πως μπορούμε να αλλάξουμε το χρώμα και την γραμματοσειρά, καθώς και το εργαλείο **firebug** στον firefox. // // **ΕΠΕΞΕΡΓΑΣΙΑ SITE** ---- - **CSS - ΧΡΩΜΑΤΑ** : ετικέτες **''h1, h2''** - Εάν δουλεύουμε τοπικά ανοίγουμε με το geany το αρχείο **template.css** που βρίσκεται στον φάκελο του joomla στον υποφάκελο **templates/protostar/css** - Πηγαίνουμε επίσης στον ιστότοπο και εμφανίζουμε το άρθρο Κέρκυρα. - Στο geany που έχουμε ανοίξει το αρχείο template.css ψάχνουμε για **h1** (με CTRL-F και γράφοντας αυτό που ψάχνουμε). Η ετικέτα h1 υπάρχει αρκετές φορές. Συνεχίζουμε να ψάχνουμε πατώντας ENTER μέχρι να βρούμε την ετικέτα μόνη της περίπου στην γραμμή 7200, εκεί που δουλεύαμε και προηγουμένως. - Στις ιδιότητες του στυλ για h1 εισάγουμε επιπλέον την γραμμή **''color: red;''**. Αποθηκεύουμε και πάμε πάλι στον **ΙΣΤΟΤΟΠΟ** να δούμε την αλλαγή. - Τα χρώματα ως γνωστόν δίνονται είτε με τα ονόματά τους π.χ. **''red''** είτε με δεκαεξαδικούς αριθμούς π.χ. **''#FF0000''**. Ανοίγουμε μια νέα καρτέλα στον περιηγητή μας και ψάχνουμε για **''html colors''**. Βρίσκουμε μια ιστοσελίδα με τους [[http://www.w3schools.com/html/html_colors.asp|κωδικούς πολλών χρωμάτων]] ή [[http://www.colorcombos.com/FF0000-hex-color|επιλέγουμε οποιοδήποτε]] και ψάχνουμε τον δεκαεξαδικό κωδικό μιας **απόχρωσης του μπλε**, γιατί το κόκκινο που βάλαμε πριν δεν ταιριάζει. - Ορίζουμε ξανά ως χρώμα στην ετικέτα **''h1''** την **απόχρωση του μπλε** που θέλουμε π.χ. **''#3366CC''** ή ότι άλλο θέλουμε. - Μπορούμε να αλλάξουμε χρώμα και στο περίγραμμα, με παρόμοιο τρόπο, είναι προφανές που. Αλλάζουμε το χρώμα στο περίγραμμα σε **''#66CCFF''** ή σε ότι άλλο θέλουμε. - Αν είμαστε στο geany μπορούμε και από εδώ να επιλέξουμε διάφορα χρώματα πατώντας στο κουμπί {{:el:school:lessons:html:geany_color_chooser.png}}. - Αλλάξαμε το χρώμα του κειμένου **''Το νησί της Κέρκυρας''**. Στον IΣΤΟΤΟΠΟ, πηγαίνουμε στο άρθρο **Παρίσι** βλέπουμε ότι άλλαξε χρώμα και το κείμενο **''Η πόλη του Παρισιού''** που βρισκόταν επίσης μέσα στην ετικέτα **h1**. - Μπορείτε να αλλάξετε χρώμα στα κείμενα **''Ιστορικά στοιχεία''** και **''Αξιοθέατα''**; Σε ποια ετικέτα βρίσκονται μέσα; Επιλέξτε κάποια άλλη απόχρωση του μπλε που σας αρέσει. * Παρατηρούμε ότι οι αλλαγές γίνονται σε **αποχρώσεις** ενός χρώματος που έχει επιλεχθεί ως κύριο. Στην περίπτωσή μας το **μπλε**. Αισθητικά επιλέγουμε συνήθως αποχρώσεις ενός χρώματος ώστε να υπάρχει ομοιομορφία. Εάν υπάρχουν και άλλα χρώματα θα πρέπει να δένουν όμορφα και διακριτικά με το βασικό και όχι να κάνουμε το site σαν πολύχρωμο τσίρκο. * Επίσης συνήθως δεν τροποποιούμε πολύ το template, διότι ο δημιουργός του έχει προσπαθήσει να το δέσει αισθητικά και μπορεί αντί να το βελτιώσουμε να το χειροτερέψουμε εμφανισιακά. - **Εργαλείο Firebug** - css γραμματοσειρά * Κάποιες φορές θέλουμε κάτι συγκεκριμένο ή θέλουμε να διορθώσουμε μία ατέλεια. Έστω ότι θέλουμε να χρησιμοποιήσουμε μία συγκεκριμένη γραμματοσειρά. - Έχουμε πάντα ανοιχτό το **template.css** από το geany και είμαστε στο στυλ της ετικέτας **h1** στην γραμμή 7200 περίπου. - Εισάγουμε την γραμμή **''font-family: Arial;''**. Αποθηκεύουμε και πηγαίνουμε στον **ΙΣΤΟΤΟΠΟ**. Ανανεώνουμε αλλά **δεν** βλέπουμε καμία αλλαγή! - Τι συμβαίνει; Ότι αλλαγές κάναμε σε αυτό το σημείο εφαρμοζόντουσαν. Η συγκεκριμένη δεν εφαρμόστηκε. Για να καταλάβουμε πως λειτουργούν τα **css στυλ** θα εγκαταστήσουμε στον firefox το πρόσθετο εργαλείο **firebug**. - Σε μια νέα καρτέλα στο google ψάχνουμε για **firebug firefox** - Θα μας πάει στο επίσημο site με τα πρόσθετα του firefox (https://addons.mozilla.org/el/firefox/addon/firebug/). Πατάμε στο **Προσθήκη στον firefox** - Θα κατέβει, θα εγκατασταθεί και θα γίνει επανεκκίνηση στον firefox - Ενώ είμαστε στον Ιστότοπο και __βλέπουμε το άρθρο **Κέρκυρα**__ στον firefox πατάμε πάνω στο εικονίδιο {{:el:school:lessons:html:firebug.png}} ή αν δεν υπάρχει πηγαίνουμε **Εργαλεία / Web Developer / Firebug / Ανοιγμα του Firebug** - Μας έχει ανοίξει ένα μεγάλο πλαίσιο στο κάτω μέρος της σελίδας. Στο αριστερό του μέρος επιλέγουμε να βλέπουμε την καρτέλα **HTML** και στο δεξιό του την καρτέλα **Στυλ** - Πατάμε πάνω στο εικονίδιο {{:el:school:lessons:html:firebug_select.png}}, πηγαίνουμε το ποντίκι πάνω στο κείμενο **Το νησί της Κέρκυρας** και πατάμε πάνω. - Μας εμφανίστηκε στο αριστερό παράθυρο ο **κώδικας html** για το σημείο που βρισκόμαστε και στο δεξί παράθυρο **το στυλ** για το σημείο που βρισκόμαστε. - **CSS - ΚΛΗΡΟΝΟΜΙΚΟΤΗΤΑ** : ετικέτες **''h1, h2''** * Τι συμβαίνει με την γραμματοσειρά; Δεξιά στο παράθυρο **Στυλ** βλέπουμε στο πάνω μέρος τον κώδικα h1,h2,h3,h4,h5,h6, .site-title { font-family: "Open Sans",sans-serif; } * Ακριβώς από κάτω υπάρχει διαγραμμένο το font-family: Arial;. Αν προχωρήσουμε και πιο κάτω στο παράθυρο του **Στυλ** θα δούμε και άλλα χαρακτηριστικά διαγραμμένα όπως font-size: 35.75px;, line-height: 36px; κτλ *Πως λειτουργούν λοιπόν τα στυλ; Υπάρχουν επίπεδα εφαρμογής. Το **1ο επίπεδο** είναι μέσα στον ίδιο τον κώδικα html ή php. Το **font-family: "Open Sans",sans-serif;** είναι αυτό που εφαρμόζεται και το **firebug** μας λέει ότι ο κώδικας του βρίσκεται στο αρχείο **index.php** του προτύπου το οποίο βρίσκεται μέσα στον φάκελο **templates/protostar**. Το ανοίγουμε με το **geany**. * Βρίσκουμε την γραμμή **''h1, h2, h3, h4, h5, h6, .site-title {''** αλλά αντί για το font-family: "Open Sans",sans-serif; έχει font-family: 'params->get('googleFontName')); ?>', sans-serif; * Γνωρίζοντας τα βασικά για την php καταλαβαίνουμε ότι εκτελείται ο κώδικας μέσα στην **** που ζητάει το όνομα μιας γραμματοσειράς της Google και το αποτέλεσμα της εκτέλεσης είναι **"Open Sans"** * Βλέπουμε και μια 2η γραμματοσειρά **sans-serif**. Αυτή είναι εναλλακτική εάν για κάποιο λόγο αποτύχει η φόρτωση της **Open Sans** * Στο **firebug** στο πλαίσιο **Στυλ** βλέπουμε ότι είναι διαγραμμένα τα font-family: Arial; στην ετικέτα του στυλ **h1**. Αυτό είναι το **2ο επίπεδο στυλ**. Εάν δεν υπήρχε το **1ο** θα εφαρμοζόταν αυτό. Τώρα αγνοείται και γι' αυτό το βλέπουμε διαγραμμένο. * Παρακάτω βλέπουμε επίσης διαγραμμένο το font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; στο στυλ της ετικέτας **body**. Αυτό είναι το **3ο επίπεδο**. Εάν δεν υπήρχε το 1ο ή το 2ο επίπεδο στυλ, θα εφαρμοζόταν αυτό που αφορά όλο το κείμενο. * Άρα τα στυλ έχουν μια **ιεραρχία**. Από το γενικότερο css (3ο επίπεδο) στο ειδικότερο css (2ο επίπεδο) και πάνω από όλα στην ιεραρχία είναι ότι υπάρχει **απευθείας στον κώδικα html ή php** (1ο επίπεδο). Τα επίπεδα ονομάστηκαν έτσι εδώ για λόγους απλότητας και σύγκρισης. Δεν είναι τα μοναδικά. Στην πράξη υπάρχουν και άλλα ενδιάμεσα επίπεδα και στο css αρχείο και στον κώδικα html, που δεν θα εξηγήσουμε εδώ. Η ιεραρχική φιλοσοφία πάντως είναι η ίδια. - Ανοίγουμε το αρχείο **index.php** από το template protostar. Θα αλλάξουμε την γραμμή font-family: 'params->get('googleFontName')); ?>', sans-serif; προσθέτοντας την γραμματοσειρά Arial ως 1η. δηλαδή θα γίνει font-family: Arial,params->get('googleFontName')); ?>', sans-serif; - Αποθηκεύουμε και βλέπουμε στον **ΙΣΤΟΤΟΠΟ** την αλλαγή. - Με παρόμοιο τρόπο, αλλάζουμε την γραμματοσειρά από **''Arial''** σε **''Verdana''**. Αποθηκεύουμε και βλέπουμε πάλι στον **ΙΣΤΟΤΟΠΟ** την αλλαγή. - Βλέπουμε ότι το στυλ που μόλις αλλάξαμε εφαρμόζεται όμοιο στις ετικέτες **h1,h2,h3,h4,h5,h6**. Έστω όμως, ότι θα θέλαμε η ετικέτα **h2** να έχει άλλη γραμματοσειρά από τις υπόλοιπες. Στο αρχείο **index.php** αφαιρούμε το **h2** από την γραμμή **h1, h2, h3, h4, h5, h6**. - Τώρα που η ετικέτα **h2** δεν έχει στυλ 1ου επιπέδου (μέσα στην index.php) μπορούμε να αλλάξουμε την γραμματοσειρά από το στυλ 2ου επιπέδου (μέσα στο template.css). Ανοίγουμε πάλι το αρχείο **template.css** με το geany και βρίσκουμε την ετικέτα **h2** περίπου στην γραμμή 7067. - Εισάγουμε μέσα στο στυλ της ετικέτας h2 τον κώδικα **''font-family: "Courier New";''**. Αποθηκεύουμε και βλέπουμε στον **ΙΣΤΟΤΟΠΟ** την αλλαγή. - Ενώ βλέπουμε το άρθρο **Κέρκυρα** ανοίγουμε το **firebug** (αν δεν είναι ήδη ανοιχτό). Πατάμε πάνω στο εικονίδιο {{:el:school:lessons:html:firebug_select.png}}, πηγαίνουμε το ποντίκι πάνω στο κείμενο **Ιστορικά στοιχεία** και πατάμε πάνω. * Στο δεξί πλαίσιο **Στυλ** βλέπουμε ότι πάνω πάνω δεν είναι πλέον το αρχείο **index.php** αλλά ο κώδικας του αρχείου **template.css**. Αυτός είναι που ορίζει τώρα το στυλ. - **CSS - ΧΡΩΜΑΤΑ : λογότυπο - κλάσεις** * Το **λογότυπο** ενός site, εικόνα ή κείμενο είναι αυτό το οποίο εμφανίζεται σε κάθε σελίδα συνήθως στο πάνω μέρος όπως για παράδειγμα μια **μεγάλη φωτεινή επιγραφή** έξω από ένα κατάστημα. Εμείς έχουμε ορίσει ως λογότυπο το κείμενο : **''Global Any Travel''** και το **''Ταξιδέψτε παντού''**. Θα αλλάξουμε την εμφάνισή του. - Ανοίγουμε το **firebug**. Πατάμε πάνω στο εικονίδιο {{:el:school:lessons:html:firebug_select.png}}, πηγαίνουμε το ποντίκι πάνω στο κείμενο **Global Any Travel** και πατάμε πάνω. - Αριστερά στο πλαίσιο **HTML** βλέπουμε ότι ο κώδικας είναι περίπου έτσι *.. Global Any Travel *Η λέξη **class** (τάξη ή **κλάση** στα ελληνικά) είναι μία ομάδα αντικειμένων που θα χρησιμοποιήσει ένα στυλ. Έτσι είπαμε στην html ότι το κείμενο **Global Any Travel** θα χρησιμοποιήσει το στυλ της κλάσης **site-title** *Στο δεξί πλαίσιο **Στυλ** βλέπουμε ότι ο κώδικας στο αρχείο template.css είναι .site-title { font-size: 40px; font-weight: bold; line-height: 48px; } - Ανοίγουμε το αρχείο **template.css** με το geany και στην κλάση **.site-title** (περίπου στην γραμμή 6991) εισάγουμε την γραμμή **''text-shadow: 0.1em 0.1em 0.2em #333;''**. Αποθηκεύουμε και βλέπουμε στον **ΙΣΤΟΤΟΠΟ** την αλλαγή. Βάλαμε εφέ σκιάς χρώματος γκρι (#333). - Αλλάζουμε το χρώμα της γραμματοσειράς (όχι της σκιάς) στο κείμενο **Global Any Travel** σε κόκκινο ή σε κάποιο άλλο που μας αρέσει. Βλέπουμε πως το είχαμε κάνει προηγουμένως στην ετικέτα **h1**. - Αλλάζουμε επίσης ότι άλλο θέλουμε στην κλάση **.site-title** - Βλέπετε κάτι άλλο στο site που θέλετε να μορφοποιήσετε διαφορετικά; Μπορείτε να εντοπίσετε τον κώδικά του με το firebug και να τον αλλάξετε μετά με το geany; |{{:el:school:lessons:html:joomla_firebug_corfu.png?400|Firebug : Κέρκυρα}}|{{:el:school:lessons:html:joomla_css_colors_paris.png?400|CSS : Χρώματα - Paris}}|