Επεξεργασία 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;