Πανελλήνιο Σχολικό Δίκτυο Το Δίκτυο στην Υπηρεσία της Εκπαίδευσης

  • Μεγαλύτερο μέγεθος γραμματοσειράς
  • Προκαθορισμένο μέγεθος γραμματοσειράς
  • Μικρότερο μέγεθος γραμματοσειράς

Οδηγίες joomla2.5 - Επεξεργασία template (css)

Επεξεργασία template μέσω css

Για αλλαγή των χρωμάτων του προρυθμισμένου template , όπως του φόντου (background), του κυρίως τίτλου (header) κτλ έχουμε 2 επιλογές:

  1. Να χρησιμοποιήσετε ένα διαφορετικό χρώμα από το υπάρχον.
  2. Να χρησιμοποιήσετε ένα γραφικό ή μια εικόνα μοτίβο που επαναλαμβάνεται αρκετές φορές για να καλύψει την επιφάνεια του φόντου της ιστοσελίδας.

Και στις 2 περιπτώσεις θα χρειαστεί να αλλάξετε το αρχείο personal.css, που θα βρείτε με έναν από τους παρακάτω 2 τρόπους:

  • Μέσω του διαχειριστικού περιβάλλοντος του Joomla ιστοτόπου σας, μεταβείτε στην ακόλουθη διαδρομή: Επεκτάσεις --> Διαχείριση Προτύπων --> Πρότυπα --> Στοιχεία και Αρχεία Προτύπου Beez_20 --> Επεξεργασία css/personal.css
  • Μέσω ftp client, όπως το filezilla, συνδεθείτε στο χώρο φιλοξενίας σας και μεταβείτε στη διαδρομή: /autosch/joomla15/templates/beez_20/css από όπου θα κατεβάσετε το αρχείο personal.css, θα εφαρμόσετε τις αλλαγές και στη συνέχεια θα το ξανανεβάσετε αντικαθιστώντας το παλιό.

 

ΠΡΟΣΟΧΗ: Πριν προχωρήσετε σε παραμετροποίηση του αρχείο personal.css διατηρήστε ένα αντίγραφο ασφαλείας.

 

Ενδεικτικά θα δείξουμε παρακάτω 2 τρόπους αλλαγής του κυρίως background (φόντο) χρώματος.

 

Περίπτωση 1: Απλή αλλαγή χρώματος

Ανοίγουμε το personal.css με τον απλό κειμενογράφο τον Windows το notepad (προτείνουμε το notepad++). Περίπου στην 20η γραμμή του αρχείου, στην αρχή του, βρίσκουμε την εγγραφή στο κώδικα:

background: #e0dedf  url(../images/personal/bg2.png) repeat-x;


Αν θέλουμε ένα απλό χρώμα στο φόντο τότε αντικαθιστούμε το χρώμα με κωδικό "#e0dedf" με το επιθυμητό (οδηγίες για τους χρωματικούς κωδικούς θα βρείτε εδώ) και σβήνουμε την υπόλοιπη πρόταση “url(../images/personal/bg2.png) repeat-x”, που παραπέμπει στο texture του Joomla, ώστε να μείνει ο κώδικας μόνο με το χρώμα μας:

background: #7BB9DF;


Σώζουμε το νέο αρχείο personal.css και το ανεβάζουμε στο /autosch/joomla15/templates/beez_20/css,  κάνοντας αντικατάσταση του υπάρχοντος.

 


Περίπτωση 2: Αλλαγή γραφικού ή εικόνας μοτίβου


Σε αυτή την περίπτωση θα πρέπει να βρείτε ή να δημιουργήσετε ένα γραφικό (texture), να το μετονομάσετε σε “bg2.png” (αν δεν είναι αρχείο τύπου png τότε με το Paint ή το Gimp  να το εξάγετε ως png) και να το ανεβάσετε στην ιστοσελίδα με το fileZilla αντικαθιστώντας το υπάρχον "bg2.png" που βρίσκεται στο φάκελο /autosch/joomla15/templates/beez_20/images/personal.

Πριν αντικαταστήσετε το αρχικό προεγκατεστημένο "bg2.png" του ιστοτόπου σας κάντε το ένα αντίγραφο (πχ κατεβάστε το με το fileZilla) για κάθε περίπτωση. Η εγγραφή στο κώδικα του personal.css σε αυτή την περίπτωση θα γίνει από:

background: #e0dedf  url(../images/personal/bg2.png) repeat-x;


σε


background: url(../images/personal/bg2.png') repeat;


Δηλαδή σβήνουμε το υπάρχον χρώμα του Joomla (
#e0dedf) και αφήνουμε την υπόλοιπη πρόταση url(../images/personal/bg2.png) σβήνοντας το “–x”  από τη φράση repeat-x ώστε το texture να πιάσει όλη τη σελίδα σε μήκος και πλάτος:

Σώζουμε το νέο αρχείο personal.css και το ανεβάζουμε στο /autosch/joomla15/templates/beez_20/css και κάνουμε αντικατάσταση του υπάρχοντος.


Ανάλογες ενέργειες μπορούν να γίνουν για τις εξής περιοχές του template:


Αλλαγή χρώματος header


Στο personal.css περίπου στη γραμμή 102, διαχειριζόμαστε το αρχείο bg_blue.png στην εγγραφή:

background: url("../images/personal/bg_blue.png") repeat-x scroll right bottom #317DAE;



Αλλαγή χρώματος Footer


Στο personal.css περίπου στη γραμμή 1325,
διαχειριζόμαστε το αρχείο tabs_back.png στην εγγραφή:


background: url("../images/personal/tabs_back.png") repeat-x scroll 0 0 #333333;

 

Υποστήριξη

Πως μπορώ να...
Οδηγίες
Συχνά Ερωτήματα
Ασφάλεια & Προστασία
 
 

Η IP διεύθυνσή σας είναι: 54.90.237.148