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

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

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

ΕΙΣΑΓΩΓΗ

• Παρατηρήσαμε πριν, ότι στο πρότυπο Atomic η εμφάνιση είναι αυτή που έχουμε ήδη δει στην απλή html. Η ετικέτα <h1> εμφανίζει μεγαλύτερα γράμματα από την <h2>. Το πρότυπο Atomic είναι πολύ απλό και δεν αλλάζει την εμφάνιση στις βασικές ετικέτες.
• Αντίθετα, στο πρότυπο Beez2 η εμφάνιση είναι εντελώς διαφορετική.
• Αυτό που υπάρχει επιπλέον στο πρότυπο Beez2 είναι τα CSS (Cascading Style Sheets) τα οποία αλλάζουν την εμφάνιση.
• Ενώ μέχρι τώρα είχαμε html → εμφάνιση, τώρα έχουμε html → css → εμφάνιση. Θα πάμε να δούμε που βρίσκονται αυτά τα css αρχεία και αν μπορούμε να τα αλλάξουμε.

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

1. ΕΥΡΕΣΗ ΚΩΔΙΚΑ css για ετικέτα h1
   • Το πρότυπο που χρησιμοποιείται στο site αυτή την στιγμή είναι το Beez2-Default. Πάμε να το επεξεργαστούμε.
   1. Πηγαίνουμε Επεκτάσεις / Διαχείριση Προτύπων, κάνουμε κλικ στην καρτέλα Πρότυπα δεξιά από την καρτέλα Ύφος. Επιλέγουμε Στοιχεία και Αρχεία Προτύπου Beez_20.
   2. Το πρότυπο Beez2-Default είχε 2 χρωματισμούς, προσωπικό (personal) και φύση (nature). Εμείς είχαμε επιλέξει στις Προηγμένες Ρυθμίσεις του, τον χρωματισμό φύση (nature). Κάνουμε λοιπόν κλικ δεξιά πάνω στο Επεξεργασία css/nature.css
   3. Ψάχνουμε για h1 (με CTRL-F και γράφοντας αυτό που ψάχνουμε). Η ετικέτα h1 βρίσκεται και στο λογότυπο (Global Any Travel) h1#logo, αλλά εμείς δεν θέλουμε να κάνουμε αλλαγές εκεί, οπότε ψάχνουμε ξανά με F3 μέχρι να βρεθεί το #main h1.
2. CSS - ΠΕΡΙΓΡΑΜΜΑΤΑ : ετικέτα h1
   1. Αλλάζουμε την γραμμή border-bottom:solid 1px #ddd; σε border-bottom:solid 5px #ddd;
   2. Πατάμε το αριστερό πορτοκαλί κουμπί ✔ Αποθήκευση, ώστε να αποθηκεύσουμε χωρίς να βγούμε από την Επεξεργασία του αρχείου “css/nature.css” και πηγαίνουμε στον ΙΣΤΟΤΟΠΟ στην σελίδα ΕΣΩΤΕΡΙΚΟ/Κέρκυρα. Τι άλλαξε στην γραμμή κάτω από το κείμενο Το νησί της Κέρκυρας που ήταν μέσα σε h1;
   3. Πίσω στην ΔΙΑΧΕΙΡΙΣΗ ξαναβρίσκουμε την γραμμή #main h1 (με Εύρεση Επόμενου ή F3) και αλλάζουμε την γραμμή border-top:solid 0px #ddd; σε border-top:solid 2px #ddd;.
   4. Πατάμε το αριστερό πορτοκαλί κουμπί ✔ Αποθήκευση, και πηγαίνουμε πάλι στον ΙΣΤΟΤΟΠΟ να δούμε τι άλλαξε. Θα πρέπει να δούμε μία γραμμή πάνω από το κείμενο Το νησί της Κέρκυρας.
   5. Στον ΙΣΤΟΤΟΠΟ πηγαίνουμε και στην σελίδα ΕΞΩΤΕΡΙΚΟ/Παρίσι. Παρατηρούμε ότι οι αλλαγές εμφανίζονται και εδώ. Τα στυλ με css μας δίνουν την δυνατότητα να αλλάξουμε από ένα σημείο στο αρχείο css, την εμφάνιση μιας ετικέτας σε όλες τις σελίδες.
   6. Πίσω στην ΔΙΑΧΕΙΡΙΣΗ κάνουμε την αλλαγή που πρέπει ώστε να μείνει μόνο η πάνω γραμμή 5px χωρίς να υπάρχει κάτω, αποθηκεύουμε με ✔ Αποθήκευση και βλέπουμε στον ΙΣΤΟΤΟΠΟ αν τα καταφέραμε.
   7. Κάνουμε την πάνω γραμμή (top) 1px και την κάτω (bottom) 2px. Με παρόμοιο κώδικα όπως της πάνω και της κάτω γραμμής, θα προσθέσουμε αριστερή γραμμή (left) 1px και δεξιά (right) 1px. Πατάμε ✔ Αποθήκευση και πηγαίνουμε πάλι στον ΙΣΤΟΤΟΠΟ να δούμε αν τα καταφέραμε. Θα πρέπει να δούμε ένα πλαίσιο όπως στην παρακάτω εικόνα.