Joomla - Άσκηση 8 - CSS - γραμματοσειρές, κλάσεις - firebug

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

Νέα : css - Xρώματα, Γραμματοσειρές, κληρονομικότητα, κλάσεις
Εργαλείο επισκόπησης κώδικα firebug

Είδαμε πως αλλάζουμε περιγράμματα στις ετικέτες h1 και h2 μέσω css. Θα δούμε πως μπορούμε να αλλάξουμε το χρώμα και την γραμματοσειρά, καθώς και το εργαλείο firebug στον firefox.

ΕΠΕΞΕΡΓΑΣΙΑ SITE

CSS - ΧΡΩΜΑΤΑ : ετικέτες h1, h2
1. Εάν δουλεύουμε τοπικά ανοίγουμε με το geany το αρχείο template.css που βρίσκεται στον φάκελο του joomla στον υποφάκελο templates/protostar/css
2. Πηγαίνουμε επίσης στον ιστότοπο και εμφανίζουμε το άρθρο Κέρκυρα.
3. Στο geany που έχουμε ανοίξει το αρχείο template.css ψάχνουμε για h1 (με CTRL-F και γράφοντας αυτό που ψάχνουμε). Η ετικέτα h1 υπάρχει αρκετές φορές. Συνεχίζουμε να ψάχνουμε πατώντας ENTER μέχρι να βρούμε την ετικέτα μόνη της περίπου στην γραμμή 7200, εκεί που δουλεύαμε και προηγουμένως.
4. Στις ιδιότητες του στυλ για h1 εισάγουμε επιπλέον την γραμμή color: red;. Αποθηκεύουμε και πάμε πάλι στον ΙΣΤΟΤΟΠΟ να δούμε την αλλαγή.
5. Τα χρώματα ως γνωστόν δίνονται είτε με τα ονόματά τους π.χ. red είτε με δεκαεξαδικούς αριθμούς π.χ. #FF0000. Ανοίγουμε μια νέα καρτέλα στον περιηγητή μας και ψάχνουμε για html colors. Βρίσκουμε μια ιστοσελίδα με τους κωδικούς πολλών χρωμάτων ή επιλέγουμε οποιοδήποτε και ψάχνουμε τον δεκαεξαδικό κωδικό μιας απόχρωσης του μπλε, γιατί το κόκκινο που βάλαμε πριν δεν ταιριάζει.
6. Ορίζουμε ξανά ως χρώμα στην ετικέτα h1 την απόχρωση του μπλε που θέλουμε π.χ. #3366CC ή ότι άλλο θέλουμε.
7. Μπορούμε να αλλάξουμε χρώμα και στο περίγραμμα, με παρόμοιο τρόπο, είναι προφανές που. Αλλάζουμε το χρώμα στο περίγραμμα σε #66CCFF ή σε ότι άλλο θέλουμε.
8. Αν είμαστε στο geany μπορούμε και από εδώ να επιλέξουμε διάφορα χρώματα πατώντας στο κουμπί .
9. Αλλάξαμε το χρώμα του κειμένου Το νησί της Κέρκυρας. Στον IΣΤΟΤΟΠΟ, πηγαίνουμε στο άρθρο Παρίσι βλέπουμε ότι άλλαξε χρώμα και το κείμενο Η πόλη του Παρισιού που βρισκόταν επίσης μέσα στην ετικέτα h1.
10. Μπορείτε να αλλάξετε χρώμα στα κείμενα Ιστορικά στοιχεία και Αξιοθέατα; Σε ποια ετικέτα βρίσκονται μέσα; Επιλέξτε κάποια άλλη απόχρωση του μπλε που σας αρέσει.
- Παρατηρούμε ότι οι αλλαγές γίνονται σε αποχρώσεις ενός χρώματος που έχει επιλεχθεί ως κύριο. Στην περίπτωσή μας το μπλε. Αισθητικά επιλέγουμε συνήθως αποχρώσεις ενός χρώματος ώστε να υπάρχει ομοιομορφία. Εάν υπάρχουν και άλλα χρώματα θα πρέπει να δένουν όμορφα και διακριτικά με το βασικό και όχι να κάνουμε το site σαν πολύχρωμο τσίρκο.
- Επίσης συνήθως δεν τροποποιούμε πολύ το template, διότι ο δημιουργός του έχει προσπαθήσει να το δέσει αισθητικά και μπορεί αντί να το βελτιώσουμε να το χειροτερέψουμε εμφανισιακά.
Εργαλείο Firebug - css γραμματοσειρά
- Κάποιες φορές θέλουμε κάτι συγκεκριμένο ή θέλουμε να διορθώσουμε μία ατέλεια. Έστω ότι θέλουμε να χρησιμοποιήσουμε μία συγκεκριμένη γραμματοσειρά.
1. Έχουμε πάντα ανοιχτό το template.css από το geany και είμαστε στο στυλ της ετικέτας h1 στην γραμμή 7200 περίπου.
2. Εισάγουμε την γραμμή font-family: Arial;. Αποθηκεύουμε και πηγαίνουμε στον ΙΣΤΟΤΟΠΟ. Ανανεώνουμε αλλά δεν βλέπουμε καμία αλλαγή!
3. Τι συμβαίνει; Ότι αλλαγές κάναμε σε αυτό το σημείο εφαρμοζόντουσαν. Η συγκεκριμένη δεν εφαρμόστηκε. Για να καταλάβουμε πως λειτουργούν τα css στυλ θα εγκαταστήσουμε στον firefox το πρόσθετο εργαλείο firebug.
  1. Σε μια νέα καρτέλα στο google ψάχνουμε για firebug firefox
  2. Θα μας πάει στο επίσημο site με τα πρόσθετα του firefox (https://addons.mozilla.org/el/firefox/addon/firebug/). Πατάμε στο Προσθήκη στον firefox
  3. Θα κατέβει, θα εγκατασταθεί και θα γίνει επανεκκίνηση στον firefox
4. Ενώ είμαστε στον Ιστότοπο και βλέπουμε το άρθρο Κέρκυρα στον firefox πατάμε πάνω στο εικονίδιο ή αν δεν υπάρχει πηγαίνουμε Εργαλεία / Web Developer / Firebug / Ανοιγμα του Firebug
5. Μας έχει ανοίξει ένα μεγάλο πλαίσιο στο κάτω μέρος της σελίδας. Στο αριστερό του μέρος επιλέγουμε να βλέπουμε την καρτέλα HTML και στο δεξιό του την καρτέλα Στυλ
6. Πατάμε πάνω στο εικονίδιο , πηγαίνουμε το ποντίκι πάνω στο κείμενο Το νησί της Κέρκυρας και πατάμε πάνω.
7. Μας εμφανίστηκε στο αριστερό παράθυρο ο κώδικας 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: '<?php echo str_replace('+', ' ', $this->params->get('googleFontName')); ?>', sans-serif;
```
- Γνωρίζοντας τα βασικά για την php καταλαβαίνουμε ότι εκτελείται ο κώδικας μέσα στην <?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, που δεν θα εξηγήσουμε εδώ. Η ιεραρχική φιλοσοφία πάντως είναι η ίδια.
1. Ανοίγουμε το αρχείο index.php από το template protostar. Θα αλλάξουμε την γραμμή
```
font-family: '<?php echo str_replace('+', ' ', $this->params->get('googleFontName')); ?>', sans-serif;
```
  προσθέτοντας την γραμματοσειρά Arial ως 1η. δηλαδή θα γίνει
```
font-family: Arial,<?php echo str_replace('+', ' ', $this->params->get('googleFontName')); ?>', sans-serif;
```
2. Αποθηκεύουμε και βλέπουμε στον ΙΣΤΟΤΟΠΟ την αλλαγή.
3. Με παρόμοιο τρόπο, αλλάζουμε την γραμματοσειρά από Arial σε Verdana. Αποθηκεύουμε και βλέπουμε πάλι στον ΙΣΤΟΤΟΠΟ την αλλαγή.
4. Βλέπουμε ότι το στυλ που μόλις αλλάξαμε εφαρμόζεται όμοιο στις ετικέτες h1,h2,h3,h4,h5,h6. Έστω όμως, ότι θα θέλαμε η ετικέτα h2 να έχει άλλη γραμματοσειρά από τις υπόλοιπες. Στο αρχείο index.php αφαιρούμε το h2 από την γραμμή h1, h2, h3, h4, h5, h6.
5. Τώρα που η ετικέτα h2 δεν έχει στυλ 1ου επιπέδου (μέσα στην index.php) μπορούμε να αλλάξουμε την γραμματοσειρά από το στυλ 2ου επιπέδου (μέσα στο template.css). Ανοίγουμε πάλι το αρχείο template.css με το geany και βρίσκουμε την ετικέτα h2 περίπου στην γραμμή 7067.
6. Εισάγουμε μέσα στο στυλ της ετικέτας h2 τον κώδικα font-family: “Courier New”;. Αποθηκεύουμε και βλέπουμε στον ΙΣΤΟΤΟΠΟ την αλλαγή.
7. Ενώ βλέπουμε το άρθρο Κέρκυρα ανοίγουμε το firebug (αν δεν είναι ήδη ανοιχτό). Πατάμε πάνω στο εικονίδιο , πηγαίνουμε το ποντίκι πάνω στο κείμενο Ιστορικά στοιχεία και πατάμε πάνω.
- Στο δεξί πλαίσιο Στυλ βλέπουμε ότι πάνω πάνω δεν είναι πλέον το αρχείο index.php αλλά ο κώδικας του αρχείου template.css. Αυτός είναι που ορίζει τώρα το στυλ.
CSS - ΧΡΩΜΑΤΑ : λογότυπο - κλάσεις
- Το λογότυπο ενός site, εικόνα ή κείμενο είναι αυτό το οποίο εμφανίζεται σε κάθε σελίδα συνήθως στο πάνω μέρος όπως για παράδειγμα μια μεγάλη φωτεινή επιγραφή έξω από ένα κατάστημα. Εμείς έχουμε ορίσει ως λογότυπο το κείμενο : Global Any Travel και το Ταξιδέψτε παντού. Θα αλλάξουμε την εμφάνισή του.
1. Ανοίγουμε το firebug. Πατάμε πάνω στο εικονίδιο , πηγαίνουμε το ποντίκι πάνω στο κείμενο Global Any Travel και πατάμε πάνω.
2. Αριστερά στο πλαίσιο HTML βλέπουμε ότι ο κώδικας είναι περίπου έτσι
  - ```
  <span class="site-title" title="Global Any Travel">..
  Global Any Travel
  </span>
```
- Η λέξη class (τάξη ή κλάση στα ελληνικά) είναι μία ομάδα αντικειμένων που θα χρησιμοποιήσει ένα στυλ. Έτσι είπαμε στην html ότι το κείμενο Global Any Travel θα χρησιμοποιήσει το στυλ της κλάσης site-title
- Στο δεξί πλαίσιο Στυλ βλέπουμε ότι ο κώδικας στο αρχείο template.css είναι
```
  .site-title {
      font-size: 40px;
      font-weight: bold;
      line-height: 48px;
  }
```
3. Ανοίγουμε το αρχείο template.css με το geany και στην κλάση .site-title (περίπου στην γραμμή 6991) εισάγουμε την γραμμή text-shadow: 0.1em 0.1em 0.2em #333;. Αποθηκεύουμε και βλέπουμε στον ΙΣΤΟΤΟΠΟ την αλλαγή. Βάλαμε εφέ σκιάς χρώματος γκρι (#333).
4. Αλλάζουμε το χρώμα της γραμματοσειράς (όχι της σκιάς) στο κείμενο Global Any Travel σε κόκκινο ή σε κάποιο άλλο που μας αρέσει. Βλέπουμε πως το είχαμε κάνει προηγουμένως στην ετικέτα h1.
5. Αλλάζουμε επίσης ότι άλλο θέλουμε στην κλάση .site-title
6. Βλέπετε κάτι άλλο στο site που θέλετε να μορφοποιήσετε διαφορετικά; Μπορείτε να εντοπίσετε τον κώδικά του με το firebug και να τον αλλάξετε μετά με το geany;