Προσθέστε μια ανακοίνωση στο πάνω μέρος του φόρουμ

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

Προσθέστε μια ανακοίνωση στο πάνω μέρος του φόρουμ Empty Προσθέστε μια ανακοίνωση στο πάνω μέρος του φόρουμ

Δημοσίευση από Luffy Δευ Δεκ 29, 2014 1:06 pm

Προσθέστε μια ανακοίνωση στο πάνω μέρος του φόρουμ


Με αυτό τον οδηγό μπορείτε όλοι σας να προσθέσετε μια ανακοίνωση στο πάνω μέρος του φόρουμ σας όπου σε κάθε σελίδα και σε κάθε μήνυμα πάτε, αυτή η ανακοίνωση θα μένει μόνιμα εκεί. Επίσης, η ανακοίνωση αυτή μπορεί να αλλαχτεί από τους Ιδρυτές του κάθε φόρουμ σε οτιδήποτε θελήσει αυτός και όποτε το θελήσει. Η ανακοίνωση αυτή φαίνεται σε όλους τους βαθμούς ακόμα και σε επισκέπτες.

Προσθέστε μια ανακοίνωση στο πάνω μέρος του φόρουμ A6qgaTm


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

Αρχικά θα βάλουμε το CSS όπου μετά τον κώδικα εξηγείται η κάθε γραμμή του. Πάμε: Πίνακας Διαχείρισης > Εμφάνιση > Εικόνες και χρώματα > Χρώματα > CSS Stylesheet και βάζουμε στο CSS τον εξής κώδικα:
Κώδικας:
.GlAnnounc{
background: url(http://www.ucp-asbl.be/local/cache-vignettes/L128xH128/arton1471-383ec.png) no-repeat 14px #DFE5FF;
background-size: 40px 30px;
border: 1px solid #005479;
border-radius: 3px;
box-shadow: 2px 2px 2px #DFDFDF;
color: #FCFFC3;
font-size: 15px;
margin: 5px;
padding-bottom: 10px;
padding-left: 64px;
padding-top: 8px;
text-shadow: 1px 1px 3px #000;
}
Τι κάνει η κάθε γραμμή του κώδικα:
- .GlAnnounc : Αυτή είναι η εντολή που θα ορίσουμε στο πρότυπο για να αλλάξουμε το στυλ του κουτιού ανακοίνωσης.
- background: url(http://www.ucp-asbl.be/local/cache-vignettes/L128xH128/arton1471-383ec.png) no-repeat 14px #DFE5FF; : Αυτή η γραμμή είναι για το φόντο της ανακοίνωσης. Προσθέτει την εικόνα Προσθέστε μια ανακοίνωση στο πάνω μέρος του φόρουμ Arton1471-383ec πριν το κείμενο και αλλάζει το χρώμα του φόντου σε ελαφρύ γαλάζιο με αυτό: #DFE5FF
- background-size: 40px 30px; : Αυτή η γραμμή αλλάζει το μέγεθος της εικόνας που αναφέραμε πιο πάνω σε 40 pixel πλάτος και 30 pixel ύψος. Αυτά μπορείτε να τα κάνετε όπως εσείς θέλετε.
- border: 1px solid #005479; : Προσθέτει περίγραμμα 1 pixel χρώματος μπλε σκούρο.
- border-radius: 3px; : Κάνει τις γωνίες του κουτιού ελαφρώς γωνιακές.
- box-shadow: 2px 2px 2px #DFDFDF; : Προσθέτει μια ελαφρώς γκρι σκιά στο κουτί της ανακοίνωσης.
- color: #FCFFC3; : Κάνει τα γράμματα της ανακοίνωσης κιτρινωπά.
- font-size: 15px; : Το μέγεθος των γραμμάτων είναι 15 pixel.
- margin: 5px; : Αφήνει μια απόσταση 5 pixel από οτιδήποτε βρίσκεται πάνω, κάτω, δεξιά και αριστερά από το κουτί ανακοίνωσης.
- padding-bottom: 10px; : Η απόσταση των γραμμάτων από το κάτω μέρος του κουτιού ανακοίνωσης.
- padding-left: 64px; : Η απόσταση των γραμμάτων από το αριστερό μέρος του κουτιού ανακοίνωσης.
- padding-top: 8px; : Η απόσταση των γραμμάτων από το πάνω μέρος του κουτιού ανακοίνωσης.
- text-shadow: 1px 1px 3px #000; : Προσθέτει μια μαύρη σκιά στα γράμματα της ανακοίνωσης.

Αφού αλλάξετε ότι θέλετε από τον κώδικα CSS πατάτε Προσθέστε μια ανακοίνωση στο πάνω μέρος του φόρουμ EVRvlh1.


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

Τώρα θα προσθέσουμε τον κώδικα στο πρότυπο για να υυπάρχει παντού στο φόρουμ σας. Πάμε λοιπόν: Πίνακας Διαχείρισης > Εμφάνιση > Πρότυπα > Γενική Διαχείριση > overall_header και πατάμε το εικονίδιο για να επεξεργαστούμε το πρότυπο ( edit )
Ακολούθως βρίσκουμε αυτό:
Κώδικας:
<div id="page-body">
και ακριβώς πάνω από αυτό προσθέτουμε τον εξής κώδικα:
Κώδικας:
<div class="GlAnnounc">Aυτή είναι μια ανακοίνωση για το φόρουμ σας.</div>
Σε αυτό τον κώδικα αν αλλάξετε το GlAnnounc τότε πρέπει να αλλάξετε και την εντολή του κώδικα στο CSS. Ακολούθως αλλάξετε το κείμενο που υπάρχει "Aυτή είναι μια ανακοίνωση για το φόρουμ σας." με το κείμενο που θέλετε να περιέχει η ανακοίνωσή σας.

Αφού τελειώσετε τις αλλαγές που θέλετε πατάτε Προσθέστε μια ανακοίνωση στο πάνω μέρος του φόρουμ ONIG52p και ακολούθως δημοσιεύετε το πρότυπο πατώντας το εικονίδιο δημοσίευσης ( add ) και είστε έτοιμοι!  cheers

Ο οδηγός γράφτηκε από Luffy για τις ανάγκες του ForumGreek.
Luffy

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

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



Luffy ο/η συγγραφέας σας ευχαριστήσε για την απάντησή σας.

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

- Παρόμοια θέματα

Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης