Πως μπορούμε να δημιουργήσουμε ένα Joomla template στο Artisteer όπου το header Θα είναι τοποθετημένο έξω από το κυρίως sheet και θα είναι transparent ώστε να φαίνεται το background της σελίδας από πίσω.
Ένα χαρακτηριστικό των template του Artisteer είναι πως ο header είναι πάντα ενσωματωμένος στο κυρίως μέρος του template, δηλαδή δεν υπάρχει η δυνατότητα να βάλεις το logo πάνω από το body του template και με transparent background.
Σ’ αυτή την περίπτωση λοιπόν πρέπει να ‘λερώσουμε λίγο τα χέρια μας’ με κώδικα:
Αρχικά δημιουργούμε ένα template χωρίς header. Αφού κάνουμε export το template μας και το κάνουμε apply στο Joomla site μας ανοίγουμε με ένα editor το αρχείο index.php που βρίσκεται μέσα στον κατάλογο του template. Βρίσκουμε το κομμάτι του κώδικα που γράφει <div id=”art-main”> και απο κάτω βάζουμε τις παρακάτω γραμμές κώδικα:
<div id=”header”>
<div id=”headertop”><jdoc:include type=”modules” name=”headertop” /></div>
</div>
Αυτό σημαίνει ότι δημιουργήσαμε ένα div με όνομα “header” και μέσα σ’ αυτό έχουμε ένα άλλο div που εμπεριέχει το νέο module position που ονομάζεται “headertop”. (εγώ το έκανα έτσι γιατί εκτός από το headertop έβαλα ακόμα ένα position δίπλα του για να βάλω banner.)
Τώρα κάνουμε edit το αρχείο template.css που βρίσκεται μέσα στον κατάλογο του template μας και βάζουμε κάπου τον ακόλουθο κώδικα:
#header { margin: 0 auto; position: relative; z-index:0; width: 1040px;
height: 100px; }
#headertop { position:relative; float:left; width:240px; height:90px; }
#headertop img { padding:0; margin:0; border:none; }
σιγουρευτείτε ότι θα αλλάξετε το width και height του header και του headertop ανάλογα με τις διαστάσεις του logo σας.
Τέλος, κάνουμε edit το αρχείο templateDetails.xml που βρίσκεται μέσα στον κατάλογο του template μας και βάζουμε κάτω από το node <positions> node τα ακόλουθα:
<position>headertop</position>
Αυτό ήταν. Η λύση αυτή δημιουργεί ένα header που ‘κάθεται’ πάνω στο artisteer sheet και ο οποίος περιέχει μια θέση για να μπεί το logo. Μπορούμε τώρα να πάμε στο μενού των modules από το περιβάλλον διαχείρισης του Joomla site μας και να δημιουργήσουμε ένα νέο “custom html” module με όνομα πχ. “logo” όπου θα εισάγουμε εκεί μέσα την εικόνα του logo μας. Στις ρυθμίσεις του module αυτού σιγουρευόμαστε ότι του έχουμε δώσει τη θέση “headertop” και είμαστε έτοιμοι.
Τώρα κάθε φορά που θέλουμε να αλλάξουμε το logo μας απλώς αλλάζουμε την εικόνα μέσα στο module “logo”.