Elxis CMS Forum
Ελληνικό Forum => Διαχείριση => Topic started by: nikpony on October 19, 2008, 12:38:25
-
Καλημέρα σε όλους,
Έχω φτιάξει ένα οριζόντιο μενού και θέλω τα κουμπιά μεταξύ τους να απέχουν, είδα στη διαχείρηση των module ότι υπάρχει ένα διαχωριστικό μενού το οποίο δε μου κάνει τη δουλειά που θέλω γιατί σε αυτό αν πατάω ας πούμε το space συνέχεια, δήθεν για να αφήσει κενά, δεν το κάνει.Τι προτείνετε;
Ευχαριστώ.
-
Θα σου πρότεινα να βάλεις " | " οπότε θα υπάρχει η διαχωριστική γραμμή και το αντίστοιχο κενό από τους χαρακτήρες που θέλεις.
-
Ο καλύτερος τρόπος είναι φυσικά με το css ... προσθήκη νέας κλάσης στο css και διαμόρφωση ανάλογα τα margin-padding-background κτλ. γιαυτό υπάρχει εκείνο το κουτάκι στη σελίδα του module του menu για να δίνουμε όποια custom εμφάνιση θέλουμε πέρα από ένα απλό διαχωριστικό.
Επίθεμα Κλάσης Μενού:
Επίθεμα Κλάσης Module:
-
Και τι θα γράψω στο επίθεμα κλάσης μενού και module?
Αυτό: <div class="παράδειγμα"></div> ?
-
Και τι θα γράψω στο επίθεμα κλάσης μενού και module?
Αυτό: <div class="παράδειγμα"></div> ?
πρώτα στο customize.css πρέπει να προσθέσεις την νέα κλάση (το έπιθεμα κλάσης του moduletable):
παραδειγμα :
.moduletable-mymenu {
padding:2px;
padding-right:10px;
background: #ccc url(../templates.../imagebg.jpg) repeat-x ;
κτλ. .....
}
μετά στο επίθεμα κλάσης μενού(module-config-page) βάζεις μόνο το επίθεμα δηλαδή!
-mymenu
έτσι το δικό σου μενού ακολουθεί τους κανόνες που εσύ έβαλες στο επίθεμα
και όχι τα default του template.
ρυθμίζεις αποστάσεις-γραμματοσειρές χρώματα mouse-hover κτλ. όπως θές.
-
Για αυτό το λόγο υπάρχουν τα css suffix. Επίσης μπορείς να κάνεις edit το κομμάτι του css που χρησιμοποιείς ήδη.
Παράδειγμα αύξησης εσοχής από αριστερά:
margin-left: 10px;
Παράδειγμα αύξησης εσοχής από δεξιά:
margin-right: 10px;
Παράδειγμα αύξησης εσοχής και από τις δύο πλευρές:
margin: 0 10px;
Αν δεν θες margin μπορείς να το κάνεις και με το padding (ανάλογα την περίπτωση και το τι θες να κάνεις)
-
Ευχαριστώ για τις απαντήσεις σας,θα το δοκιμάσω και θα σας πω.
-
Μπορείτε να μου εξηγήσετε πάλι επειδή πρώτη φορά ασχολούμε με το όλο κύκλωμα των CMS, αν έχω φτιάξει μια κλάση με όνομα .αααα τότε τι θα γράψω στο Επίθεμα Κλάσης Μενού? -αααα?
-
Όταν φορτώνεις τα module στο index.php του template σου ορίζεις το στυλ εμφάνισης. Αυτό το στυλ ορίζεται με έναν αριθμό από 1 ως -3.
Τα module φορτώνονται με δύο τρόπους στο Elxis:
a) Φόρτωση όλων των module που βρίσκονται σε μία θέση module
mosLoadModules('θεση', στυλ);
b) Φόρτωση ενός συγκεκριμένου Module:
elxLoadModule('module type', στυλ);
Στυλ
0: Εμφανίζει κάθε module μέσα σε ένα table με κλάση "moduletable" (δεν συνιστάται)
-1: Εμφανίζει "χύμα" τα περιεχόμενα του module χωρίς να περικλείονται από κάποιον html περιέκτη (συνιστάται η χρήση του μόνο σε ειδικές περιπτώσεις).
-2: Εμφανίζει το module εντός ενός div με css κλάση "moduletable" (συνιστάται, συνήθης επιλογή).
-3: Εμφανίζει το module εντός τριών div, το πρώτο εκ των οποίων έχει css κλάση "module" (χρήση για εμφάνιση module με στρογγυλλεμένες γωνίες - βλέπε manual στο elxis.org (https://www.elxis.org/guides/developers-guides/rounded-corners.html) ).
1: Εμφάνιση των module οριζοντίως με χρήση tables (καταργήθηκε)
Τι κάνουν τα CSS suffixes
Έστω ότι φορτώνουμε τα module της θέσης "left" με στυλ "-2":
mosLoadModules('left', -2);
Το Elxis θα δημιουργήσει αυτή την html:
<div class="moduletable">
<h3>Τίτλος module</h3>
περιεχόμενα module εδώ
</div>
Όπως βλέπουμε η μορφοποίηση του module καθορίζεται από την css κλάση "moduletable" που ορίζεται κάπου στο αρχείο css του template μας (template_css.css ή customize.css ή layout.css ή άλλο).
Αν τώρα εμείς θέλουμε ένα συγκεκειμένο module να διαφέρει από τα υπόλοιπα θα πρέπει να δημιουργήσουμε μία νέα css κλάση στο αρχείο css μας η οποία μπορεί να είναι ένα αντίγραφο της "moduletable" με μικρές αλλαγές και θα την ονοματίσουμε "moduletable-mymod" ή όπως αλλιώς θέλουμε. Βλέπουμε δηλαδή πως προσθέσαμε ένα επίθεμα (suffix) στο όνομα της css κλάσης σε σχέση με την αρχική css κλάση. Το επίθεμα αυτό στο παραδειγμά μας είναι το "-mymod".
Αυτό το επίθεμα θα πρέπει να βάλεις στις παραμέτρους του όποιου module όταν το επεξεργάζεσαι μέσα από τη διαχείριση του Elxis ώστε να πετύχεις την τροποποίηση της εμφάνισής του. Το τελικό αποτέλεσμα θα είναι το Elxis να σου δημιουργήσει html έτσι:
<div class="moduletable-mymod">
<h3>Τίτλος module</h3>
περιεχόμενα module εδώ
</div>
Μην ξεχνάμε ότι, ότι και να δηλώσουμε ως suffix δεν έχει νόημα αν πρώτα δεν έχουμε ορίσει αυτήν την css κλάση στο css του template μας. Αντιθέτως μάλιστα αν βάλουμε ως suffix στις παραμέτρους του module κάτι που δεν υπάρχει στο αρχείο css μας τότε θα χαλάσουμε εντελώς την εμφάνιση του module αφού δεν θα αντιστοιχεί σε καμία υπαρκτή css κλάση και δεν θα μορφοποιείται καθόλου.
Οπότε εσύ θα πρέπει να φτιάξεις μία css κλάση που, συν της άλλοις, θα δίνει οριζόντιο κενό:
div.moduletable-mymod {
margin-right: 10px;
.... υπόλοιπο css του module εδώ ....
}
-
Νιώθω υπόχρεος...