Ελληνική Κοινότητα Υποστήριξης ForumGreek
Καλωσήρθατε στο Ελληνικό Φόρουμ Υποστήριξης της ForumGreek!!

Για να αποκτήσετε πλήρη πρόσβαση στο φόρουμ και στα όσα προσφέρει, μπορείτε πολύ απλά να κάνετε μια σύνδεση ή αν δεν έχετε λογαριασμό μία δωρεάν εγγραφή και μπείτε στην κοινότητά μας!!

Κάθετο μενού [Για phpbb2]

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω

Κάθετο μενού [Για phpbb2]

Δημοσίευση από Luffy Την / Το Δευ Απρ 27, 2015 1:14 am

Κάθετο μενού [Για phpbb2]


Με αυτό τον οδηγό θα μάθετε πως να αποκτήσετε ένα κάθετο μενού για τα φόρουμ σας μορφής phpbb2.

Παρουσίαση: Κάθετο μενού

Προτού προχωρήσετε στις ενέργεις παρακάτω βεβαιωθείτε ότι πληρείτε τα παρακάτω:
- Είστε ο ιδρυτής του φόρουμ για να έχετε πρόσβαση στα πρότυπα
- Το φόρουμ σας είναι μορφής phpbb2.


Αλλαγές στα Πρότυπα

Πάμε: Πίνακας Διαχείρισης ► Εμφάνιση ► Πρότυπα ► Γενική Διαχείρισης και πατάμε το γραναζάκι ( edit ) στο πρότυπο με τίτλο overall_header.

Aφού το κάνουμε αυτό, αναζητούμε στο πρότυπο την εντολή {GENERATED_NAV_BAR} και αντικαθιστάτε τον παρακάτω κώδικα:
Κώδικας:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">  <tr>  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>  </tr>  </table>
με τον εξής:
Κώδικας:
<div class="vertical_nav">{GENERATED_NAV_BAR}</div>

Εξήγηση:

Με το να αντικαταστήσουμε την εντολή με τον παραπάνω κώδικα, καθιστούμε το μενού σε μια εντολή div που ονομάζεται vertical_nav με την οποία στην συνέχεια θα τροποποιήσουμε στο CSS.

Aφού ολοκληρώσετε τις παραπάνω αλλαγές στα πρότυπα πατήστε και ακολούθως τον πράσινο σταυρό ( add ) για να δημοσιεύσετε το πρότυπο.


Μορφοποίηση CSS

Πάμε: Πίνακας Διαχείρισης ► Εμφάνιση ► Εικόνες και χρώματα ► Χρώματα ► CSS Stylesheet και κάνετε αντιγραφή/επικόλληση τον παρακάτω κώδικα:
Κώδικας:
div.vertical_nav {
    position:absolute;
    top:50px;
    left:5%;
}

Εξηγήσεις:

position:absolute; : μας επιτρέπει να ορίσουμε το μενού σαν ένα αιωρούμενο στοιχείο
top:50px; : μας επιτρέπει να ορίσουμε το στοιχείο μας σε απόσταση 50 pixel από το πάνω μέρος του φόρουμ
left:5%; : μας επιτρέπει να ορίσουμε το στοιχείο μας σε απόσταση 5% από την αριστερή μεριά του φόρουμ

Σημείωση: Αν θέλετε το στοιχείο να βρίσκεται μόνιμα στην θέση εκείνη καθώς κινείστε πάνω και κάτω στο φόρουμ πρέπει να αντικαταστήσετε το position:absolute; με position:fixed;

Για να ολοκληρωθούν οι εργασίες μας προσθέστε στο CSS σας και τον παρακάτω κώδικα:
Κώδικας:
div.vertical_nav a.mainmenu {
    display:list-item;
    list-style:none;
}

Εξηγήσεις:
display:list-item; : μας επιτρέπει να δούμε το περιεχόμενο του στοιχείου μας σε μία λίστα από πάνω προς τα κάτω
list-style:none; : μας επιτρέπει να αφαιρέσουμε τις αρχικές ρυθμίσεις που δίνει σε στοιχεία μιας λίστας (στην προκειμένη τις κουκίδες: •)

Αν θέλετε να προσθέσετε περίγραμμα στο μενού σας, όπως στην παρουσίαση παραπάνω απλά προσθέστε στην εντολή div.vertical_nav που προσθέσατε στο CSS σας:
Κώδικας:
background:#FFFFFF;
    border:1px solid #D0D0D0;
Δηλαδή η εντολή να είναι έτσι στο CSS σας:
Κώδικας:
div.vertical_nav {
    position:absolute;
    top:50px;
    left:5%;
    background:#FFFFFF;
    border:1px solid #D0D0D0;
}

Εξηγήσεις:
background:#FFFFFF; : μας επιτρέπει να ορίσουμε ένα λευκό φόντο στο περιεχόμενο του στοιχείου μας
border:1px solid #D0D0D0; : μας επιτρέπει να ορίσουμε ένα ενιαίο περίγραμμα γκρι χρώματος γύρω από το στοιχείο μας

Αφού τελειώσετε τις αλλαγές που θέλετε να κάνετε πατήστε και είστε έτοιμοι!  No 1

Ο οδηγός γράφτηκε από Matriochka του Γαλλικού Φόρουμ Υποστήριξης, μεταφράστηκε στα Αγγλικά από Sir. Mayo και διορθώθηκε από Ange Tuteur του Αγγλικού Φόρουμ Υποστήριξης και μεταφράστηκε στα Ελληνικά από Luffy



Luffy
Διαχειριστής

Διαχειριστής

Άντρας
Τόπος : Ελλάδα
Δημοσιεύσεις : 1804

Επιστροφή στην κορυφή Πήγαινε κάτω

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή


 
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης
Χρειάζεστε βοήθεια;
Στις Συχνές Ερωτήσεις μπορείτε να βρείτε σημαντικές πληροφορίες που θα σας βοηθήσουν!