Joomla - Άσκηση 8 - CSS - χρώματα, γραμματοσειρές

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

Νέα : css - Xρώματα, Γραμματοσειρές

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

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

CSS - ΧΡΩΜΑΤΑ : ετικέτες h1, h2
- Βρισκόμαστε πάντα Επεκτάσεις / Διαχείριση Προτύπων / Πρότυπα / Στοιχεία και Αρχεία Προτύπου Beez_20 / Επεξεργασία css/nature.css και ψάχνoντας για h1 (με CTRL-F) βρισκόμαστε στο #main h1
1. Βλέπουμε ότι υπάρχει η γραμμή color: #333;. Όπως φανταζόμαστε αυτή ορίζει το χρώμα. Αλλάζουμε το χρώμα σε κόκκινο, αποθηκεύουμε με ✔ Αποθήκευση και πάμε πάλι στον ΙΣΤΟΤΟΠΟ να δούμε την αλλαγή.
2. Τα χρώματα ως γνωστόν δίνονται είτε με τα ονόματά τους π.χ. red είτε με δεκαεξαδικούς αριθμούς π.χ. #FF0000. Ανοίγουμε μια νέα καρτέλα στον περιηγητή μας και ψάχνουμε για html colors. Βρίσκουμε μια ιστοσελίδα με τους κωδικούς πολλών χρωμάτων όπως εδώ και ψάχνουμε τον δεκαεξαδικό κωδικό μιας απόχρωσης του πράσινου, γιατί το κόκκινο που βάλαμε πριν δεν ταιριάζει.
3. Ορίζουμε ξανά ως χρώμα στην ετικέτα h1 την απόχρωση του πράσινου που θέλουμε ή #336666.
4. Μπορούμε να αλλάξουμε χρώμα και στο περίγραμμα, με παρόμοιο τρόπο, είναι προφανές που. Αλλάζουμε το χρώμα στο περίγραμμα σε #336666 ή σε ότι άλλο θέλουμε.
5. Αλλάζοντας το χρώμα της ετικέτας h1 σε απόχρωση του πράσινου πλέον δεν διαφέρει σχεδόν καθόλου από το κείμενο που είναι μέσα σε ετικέτα h2. Βρίσκουμε λοιπόν, που αλλάζει το χρώμα στην ετικέτα h2 (ψάχνοντας με CTRL-F) και αλλάζουμε σε #333, με παρόμοιο τρόπο όπως πριν. Αποθηκεύουμε με ✔ Αποθήκευση και βλέπουμε στον ΙΣΤΟΤΟΠΟ την αλλαγή.
- Παρατηρούμε ότι οι αλλαγές γίνονται σε αποχρώσεις ενός χρώματος που έχει επιλεχθεί ως κύριο. Στην περίπτωσή μας το πράσινο-χακί. Αισθητικά επιλέγουμε συνήθως αποχρώσεις ενός χρώματος ώστε να υπάρχει ομοιομορφία. Εάν υπάρχουν και άλλα χρώματα θα πρέπει να δένουν όμορφα και διακριτικά με το βασικό και όχι να κάνουμε το site σαν πολύχρωμο τσίρκο.
- Επίσης συνήθως δεν τροποποιούμε πολύ το template, διότι ο δημιουργός του έχει προσπαθήσει να το δέσει αισθητικά και μπορεί αντί να το βελτιώσουμε να το χειροτερέψουμε εμφανισιακά. Υπάρχουν όμως κάποιες φορές που είμαστε αναγκασμένοι, όπως η παρακάτω.
CSS - ΓΡΑΜΜΑΤΟΣΕΙΡΑ : ετικέτες h1, h2
- Παρατηρούμε ότι στον ΙΣΤΟΤΟΠΟ στην σελίδα ΕΞΩΤΕΡΙΚΟ/Παρίσι το γράμμα π δεν εμφανίζεται ομοιόμορφα με τα άλλα. Ο λόγος είναι ότι έχει επιλεγεί μια γραμματοσειρά όχι τόσο καλή στα ελληνικά. Πάμε να την αλλάξουμε:
1. Το κείμενο Η πόλη του παρισιού είναι στην ετικέτα h1. Ψάχνουμε λοιπόν πάλι για h1 (με CTRL-F) και βρίσκουμε το #main h1.
2. Αλλάζουμε την γραμμή font-family: 'Titillium Maps', Arial; σε font-family: Arial;. Αυτή η γραμμή όριζε την χρήση της γραμματοσειράς Titillium Maps η οποία εμφανίζει περίεργα το γράμμα π και ως εναλλακτική την Arial. Εμείς ορίσαμε κατευθείαν την Arial. Αποθηκεύουμε με ✔ Αποθήκευση και βλέπουμε στον ΙΣΤΟΤΟΠΟ την αλλαγή.
3. Με παρόμοιο τρόπο, αλλάζουμε την γραμματοσειρά από Arial σε Verdana. Αποθηκεύουμε με ✔ Αποθήκευση και βλέπουμε στον ΙΣΤΟΤΟΠΟ την αλλαγή.
4. Βρίσκουμε που αλλάζει η γραμματοσειρά για την ετικέτα h2 (ψάχνοντας με CTRL-F), αφαιρούμε την Titillium Maps και αλλάζουμε την Arial σε Courier. Αποθηκεύουμε με ✔ Αποθήκευση και βλέπουμε στον ΙΣΤΟΤΟΠΟ την αλλαγή.
CSS - ΧΡΩΜΑΤΑ : λογότυπο
- Το λογότυπο ενός site, εικόνα ή κείμενο είναι αυτό το οποίο εμφανίζεται σε κάθε σελίδα συνήθως στο πάνω μέρος όπως για παράδειγμα μια μεγάλη φωτεινή επιγραφή έξω από ένα κατάστημα. Εμείς έχουμε ορίσει ως λογότυπο το κείμενο : Global Any Travel και το Ταξιδέψτε παντού. Θα αλλάξουμε την εμφάνισή του.
1. Βρίσκουμε που αλλάζει το λογότυπο (ψάχνουμε με CTRL-F για logo). Το πρώτο που βρίσκουμε είναι το #logo span. Ας αλλάξουμε εκεί το χρώμα από #fff σε κάτι άλλο π.χ. lightblue ή #ADD8E6 ή ότι άλλο θέλουμε. Αποθηκεύουμε με ✔ Αποθήκευση και βλέπουμε στον ΙΣΤΟΤΟΠΟ την αλλαγή.
2. Το επόμενο που σχετίζεται με logo είναι το .logoheader με χρώμα πάλι #fff. Αλλάζουμε σε lightgreen ή #90EE90 ή ότι άλλο θέλουμε. Αποθηκεύουμε με ✔ Αποθήκευση και βλέπουμε στον ΙΣΤΟΤΟΠΟ την αλλαγή.
3. Το κείμενο Global Any Travel φαίνεται να είναι σαν σκαλισμένο. Αυτό γίνεται από το εφέ σκιά. Στο h1#logo υπάρχει ένα χρώμα στο text-shadow. Αλλάζουμε από #333 (γκρι) σε #000 (μαύρο) για να γίνει πιο έντονη η σκιά. Αποθηκεύουμε με ✔ Αποθήκευση και βλέπουμε στον ΙΣΤΟΤΟΠΟ την αλλαγή.