Joomla - Άσκηση 7 - CSS αρχεία - περιγράμματα

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

Νέα : Επεξεργασία css αρχείων, ετικέτα h1 και περιγράμματα

ΕΙΣΑΓΩΓΗ

Παρατηρήσαμε στην προηγούμενη άσκηση, ότι το πρότυπο Beez3 εμφανίζει το site μας με εντελώς διαφορετικό τρόπο από το πρότυπο Protostar που χρησιμοποιούμε.
Αυτό που υπάρχει μεταξύ άλλων στα πρότυπα είναι τα CSS (Cascading Style Sheets) τα οποία αλλάζουν την εμφάνιση.
Ενώ μέχρι τώρα είχαμε html → εμφάνιση, τώρα έχουμε html → css → εμφάνιση. Θα πάμε να δούμε που βρίσκονται αυτά τα css αρχεία και αν μπορούμε να τα αλλάξουμε.

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

ΕΥΡΕΣΗ ΚΩΔΙΚΑ css για ετικέτα h1
- Το πρότυπο που χρησιμοποιείται στο site αυτή την στιγμή είναι το Protostar-Default. Πάμε να το επεξεργαστούμε. Ήδη έχουμε δει που βρίσκονται τα αρχεία του από το Επεκτάσεις / Διαχείριση Προτύπων αριστερά πατάμε Πρότυπα και στην συνέχεια Στοιχεία και αρχεία προτύπου Protostar-Default. Δεν θα πάμε όμως από εκεί διότι θέλουμε να έχουμε μεγαλύτερη άνεση στην επεξεργασία.
- Τα αρχεία css του προτύπου βρίσκονται μέσα στον φάκελο του joomla στον υποφάκελο templates/protostar/css. Μπορούμε να τα κατεβάσουμε με έναν ftp client όπως τον filezilla (βλ.) να τα τροποποιήσουμε και να τα ανεβάσουμε πάλι στον server που είναι εγκατεστημένο το joomla, εάν δουλεύουμε από απόσταση.
1. Εάν δουλεύουμε τοπικά ανοίγουμε με το geany το αρχείο template.css που βρίσκεται στον φάκελο του joomla στον υποφάκελο templates/protostar/css
2. Πηγαίνουμε επίσης στον ιστότοπο και εμφανίζουμε το άρθρο Κέρκυρα.
3. Στο geany που έχουμε ανοίξει το αρχείο template.css ψάχνουμε για h1 (με CTRL-F και γράφοντας αυτό που ψάχνουμε). Η ετικέτα h1 υπάρχει αρκετές φορές. Συνεχίζουμε να ψάχνουμε πατώντας ENTER μέχρι να βρούμε την ετικέτα μόνη της στην γραμμή 7200
```
 h1 {
        font-size: 26px;
        line-height: 28px;
}
```
4. Εδώ έχει οριστεί το μέγεθος γραμματοσειράς σε 26px και το μέγεθος γραμμής σε 28px. Aλλάζουμε το μέγεθος γραμματοσειράς από 26px σε 16px και αποθηκεύουμε το αρχείο. (Αν δουλεύουμε από μακριά με filezilla θα χρειαστεί να το ανεβάσουμε και στον server)
5. Πίσω στον ιστότοπο στο άρθρο Κέρκυρα πατάμε F5 για να ανανεώσουμε. Τι παρατηρούμε;
- Το κείμενο Το νησί της Κέρκυρας παρόλο που είναι σε ετικέτα h1 είναι τώρα πιο μικρό από το κείμενο Ιστορικά στοιχεία που είναι σε ετικέτα h2. Ο λόγος είναι ότι ορίσαμε μέγεθος 16px στην ετικέτα h1 ενώ η ετικέτα h2 έχει μεγαλύτερο μέγεθος 22px
CSS - γραμμή και χρώματα : ετικέτα h1
1. Ορίζουμε το μέγεθος της ετικέτας h1 στα 26px όπως ήταν πριν
2. Κάτω από την γραμμή line-height: 28px; πριν κλείσει το } εισάγουμε την εξής γραμμή border-bottom:solid 1px #ddd; και αποθηκεύουμε. Τι παρατηρούμε στον ιστότοπο.
3. Στον ΙΣΤΟΤΟΠΟ πηγαίνουμε και στην σελίδα ΕΞΩΤΕΡΙΚΟ/Παρίσι. Παρατηρούμε ότι οι αλλαγές εμφανίζονται και εδώ. Τα στυλ με css μας δίνουν την δυνατότητα να αλλάξουμε από ένα σημείο στο αρχείο css, την εμφάνιση μιας ετικέτας σε όλες τις σελίδες.
4. Εμφανίστε πάλι την σελίδα με την Κέρκυρα.
5. Στο geany στο αρχείο template.css κάντε την αλλαγή που πρέπει ώστε η γραμμή να γίνει πιο έντονη π.χ. 4px.
6. Η γραμμή έχει ήδη ένα χρώμα. Μπορείτε να το αλλάξετε σε κόκκινο;
7. Στο geany πατώντας στο κουμπί μπορούμε να επιλέξουμε όποιο χρώμα θέλουμε σε δεκαεξαδική μορφή #xxyyzz. Αντί για κόκκινο που βάλαμε θα διαλέξουμε ένα άλλο χρώμα που μας αρέσει στην δεκαεξαδική του μορφή και θα το βάλουμε στο σημείο που πρέπει στο template.css.
CSS - ΠΕΡΙΓΡΑΜΜΑΤΑ : ετικέτα h1
- Η λέξη bottom σημαίνει κάτω. Με την ιδιότητα border-bottom εισάγαμε μια γραμμή κάτω από το κείμενο..
1. Η λέξη top σημαίνει πάνω. Εισάγετε μία επιπλέον γραμμή πάνω από κείμενο ώστε να υπάρχει και η πάνω και η κάτω γραμμή.
2. Κάνουμε την πάνω γραμμή (top) 1px και την κάτω (bottom) 2px.
3. Με παρόμοιο κώδικα όπως της πάνω και της κάτω γραμμής, θα προσθέσουμε αριστερή γραμμή (left) 1px και δεξιά (right) 1px.
4. Αποθηκεύουμε στο geany και πηγαίνουμε πάλι στον ΙΣΤΟΤΟΠΟ να δούμε αν τα καταφέραμε. Θα πρέπει να δούμε ένα πλαίσιο όπως στην παρακάτω εικόνα.