<pagebreak>
====== 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, εάν δουλεύουμε από απόσταση.
    - Εάν δουλεύουμε τοπικά ανοίγουμε με το **geany** το αρχείο **template.css** που βρίσκεται στον φάκελο του joomla στον υποφάκελο **templates/protostar/css**
    - Πηγαίνουμε επίσης στον ιστότοπο και εμφανίζουμε το άρθρο **Κέρκυρα**.
    - Στο geany που έχουμε ανοίξει το αρχείο **template.css** ψάχνουμε για **''h1''** (με CTRL-F και γράφοντας αυτό που ψάχνουμε). Η ετικέτα **h1** υπάρχει αρκετές φορές. Συνεχίζουμε να ψάχνουμε πατώντας **ENTER** μέχρι να βρούμε την ετικέτα μόνη της στην γραμμή 7200 <code css> h1 {
        font-size: 26px;
        line-height: 28px;
}</code>
    - Εδώ έχει οριστεί το μέγεθος γραμματοσειράς σε **26px** και το μέγεθος γραμμής σε **28px**. Aλλάζουμε το μέγεθος γραμματοσειράς από **26px** σε **16px** και αποθηκεύουμε το αρχείο. (Αν δουλεύουμε από μακριά με filezilla θα χρειαστεί να το ανεβάσουμε και στον server)
    - Πίσω στον ιστότοπο στο άρθρο **Κέρκυρα** πατάμε **F5** για να ανανεώσουμε. Τι παρατηρούμε; 
    * Το κείμενο **Το νησί της Κέρκυρας** παρόλο που είναι σε ετικέτα **h1** είναι τώρα πιο μικρό από το κείμενο **Ιστορικά στοιχεία** που είναι σε ετικέτα **h2**. Ο λόγος είναι ότι ορίσαμε μέγεθος **16px** στην ετικέτα **h1** ενώ η ετικέτα **h2** έχει μεγαλύτερο μέγεθος **22px**
  - **CSS - γραμμή και χρώματα** : ετικέτα **''h1''** 
    - Ορίζουμε το μέγεθος της ετικέτας **h1** στα **26px** όπως ήταν πριν
    - Κάτω από την γραμμή **''line-height: 28px;''** πριν κλείσει το **}** εισάγουμε την εξής γραμμή **''border-bottom:solid 1px #ddd;''** και αποθηκεύουμε. Τι παρατηρούμε στον ιστότοπο.
    - Στον **ΙΣΤΟΤΟΠΟ** πηγαίνουμε και στην σελίδα **ΕΞΩΤΕΡΙΚΟ/Παρίσι**. Παρατηρούμε ότι οι αλλαγές εμφανίζονται και εδώ. Τα στυλ με css μας δίνουν την δυνατότητα να αλλάξουμε από **ένα σημείο** στο **αρχείο css**, την **εμφάνιση** μιας ετικέτας σε **όλες** τις σελίδες. 
    - Εμφανίστε πάλι την σελίδα με την **Κέρκυρα**.
    - Στο geany στο αρχείο **template.css** κάντε την αλλαγή που πρέπει ώστε η γραμμή να γίνει πιο έντονη π.χ. **4px**.
    - Η γραμμή έχει ήδη ένα χρώμα. Μπορείτε να το αλλάξετε σε **κόκκινο**;
    - Στο **geany** πατώντας στο κουμπί {{:el:school:lessons:html:geany_color_chooser.png}} μπορούμε να επιλέξουμε όποιο χρώμα θέλουμε σε δεκαεξαδική μορφή **#xxyyzz**. Αντί για κόκκινο που βάλαμε θα διαλέξουμε ένα άλλο χρώμα που μας αρέσει στην δεκαεξαδική του μορφή και θα το βάλουμε στο σημείο που πρέπει στο **template.css**.
  - **CSS - ΠΕΡΙΓΡΑΜΜΑΤΑ** : ετικέτα **''h1''** 
    * Η λέξη **bottom** σημαίνει **κάτω**. Με την ιδιότητα **border-bottom** εισάγαμε μια γραμμή **κάτω** από το κείμενο..
    - Η λέξη **top** σημαίνει **πάνω**. Εισάγετε μία **επιπλέον** γραμμή πάνω από κείμενο ώστε να υπάρχει και η πάνω και η κάτω γραμμή.
    - Κάνουμε την πάνω γραμμή (top) **1px** και την κάτω (bottom) **2px**. 
    - Με παρόμοιο κώδικα όπως της πάνω και της κάτω γραμμής, θα προσθέσουμε αριστερή γραμμή (left) **1px** και δεξιά (right) **1px**.
    - Αποθηκεύουμε στο **geany** και πηγαίνουμε πάλι στον **ΙΣΤΟΤΟΠΟ** να δούμε αν τα καταφέραμε. Θα πρέπει να δούμε ένα πλαίσιο όπως στην παρακάτω εικόνα.

|{{:el:school:lessons:html:joomla_css_borders_paris.png?500|CSS : Περιγράμματα - Paris}}|

<pagebreak>