Λοιπόν, φαίνεται πως θα ξεκινήσω να φτιάχνω και γω tutorials περί html και blogging tips! Χαχα! Εγώ, που, μέχρι πριν ασχοληθώ με το blog, δεν είχα ιδέα περί τίνος πρόκειται και τα έβλεπα όλα σαν κινέζικα. Όμως, έτσι είναι φίλοι μου, όποιος ψάχνει, βρίσκει κι όποιος βρίσκει, μαθαίνει. Γι’αυτό να ψάχνεστε κι εσείς, όχι μόνο περί τέτοιων θεμάτων, αλλά και γενικότερα στη ζωή! Πάμε να δούμε αν θα καταφέρω να σας εξηγήσω αυτόν τον απλό κώδικα για να βάζουμε κείμενο μέσα σε ένα κουτάκι με χρωματιστό περίγραμμα.

Ο κώδικας που θα σας δείξω είναι αυτός που χρησιμοποιώ για το gadget που βλέπετε πάνω πάνω στο blog μου, με τίτλο Lyric Of The Day. Aυτό δηλαδή:(click για πλήρες μέγεθος) 

Ο κώδικας για το (άσπρο στην περίπτωση μου) πλαίσιο είναι ο εξής:

<div style="border: 2px groove white; width: 940px; height: 80px;">       
ΤΟ ΚΕΙΜΕΝΟ ΜΑΣ</div>

Νομίζω πως είναι απλά τα στοιχεία που μπορούμε να διαμορφώσουμε, αλλά θα τα πω για να μην έχει κανένας απορία. Nα θυμάστε όμως, ότι μόνο τα χρωματιστά σημεία μπορείτε να αλλάξετε.

border: Το 2 είναι το πόσο πάχος θέλουμε να έχει το περίγραμμα του κουτιού μας. Το groove white είναι το χρώμα του περιγράμματος, αλλά προσοχή: το groove δεν το χρωμάτισα, που σημαίνει ότι δεν πρέπει να το αλλάξουμε. Δεν ξέρω ακριβώς τι παίζει, όμως, όσες φορές έβαλα ένα χρώμα, διαγράφοντας τη λέξη groove, το περίγραμμα δεν εμφανίστηκε καθόλου. Άρα βάζουμε το χρώμα δίπλα του. Και το χρώμα το γράφουμε με την κανονική του λέξη, υπάρχουν οδηγοί στο διαδίκτυο με τις ονομασίες πιο περίπλοκων χρωμάτων αν θέλετε να πειραματιστείτε κάπως.

width: Το 940 είναι το πλάτος που θέλουμε να έχει το κουτάκι μας. Νομίζω αν βάλετε την ίδια τιμή με αυτήν που έχει το πλάτος της sidebar σας, θα είστε ικανοποιημένοι. Υπ’όψιν, ότι με το πλάτος (όπως και με το ύψος) θα χρειαστεί να παίξετε λίγο, αφού βάλετε το κείμενο σας για να δείτε ότι όντως χωράει μέσα ή, στην αντίθετη περίπτωση, ότι δεν υπάρχει τεράστιος κενός χώρος που να χαλάει την ομορφιά του gadget.

height: Το 80 είναι το ύψος του gadget μας. Ισχύει η ίδια σημείωση όπως πιο πάνω. Παίξτε μαζί του μέχρι να πάρετε το επιθυμητό αποτέλεσμα.

Στη θέση του ΤΟ ΚΕΙΜΕΝΟ ΜΑΣ, λογικά γράφετε το κείμενο που θέλετε να περικλείεται μέσα στο περίγραμμα που φτιάξαμε. Τη μορφολογία του κειμένου μπορείτε να την αλλάξετε μέσα από το HTML / JAVASCRIPT gadget, στο οποίο θα βάλετε τον κώδικα που σας έδωσα!

Κι ένα μικρό tip: για όσους δε θα βάλουν πλάτος ίσο με το πλάτος της sidebar ή για όσους δεν τους φαίνεται κεντραρισμένο το πλαίσιο με το κείμενο που μόλις φτάξαμε μπορούν να προσθέσουν τον κώδικα <center> εντελώς στην αρχή και τον κώδικα </center> εντελώς στο τέλος του κώδικα του πλαισίου. Αν το κάνετε αυτό, ο όλος κώδικας θα γίνει έτσι:

<center><div style="border: 2px groove white; width: 940px; height: 80px;">ΤΟ ΚΕΙΜΕΝΟ ΜΑΣ</div></center>

Ελπίζω να ήμουν κατανοητός και να σας βοήθησα!

Για οποιαδήποτε απορία ή παρατήρηση, παρακαλώ αφήστε τα σχόλια σας κι ελπίζω να μπορώ να βοηθήσω!

*UPDATE* : Με τη βοήθεια του ΑΑΤΟΝ, μάθαμε και τι ακριβώς είναι αυτό το groove που σας είπα πιο πάνω να μην αλλάξετε! Σε αυτή τη σελίδα που μας παρέπεμψε ο ΑΑΤΟΝ (Νίκος), εξηγεί περί τίνος πρόκειται. Είναι η λέξη που καθορίζει το ‘σχέδιο’ του περιγράμματος μας. Πιο αναλυτικά:

• none: no border at all
• dotted: series of dots.
• dashed: series of short line segments.
• solid: single line segment.
• Double: two solid lines.
• Groove: ‘carved’ into the canvas.
• ridge: like it is coming out of the canvas.
• inset: like it is embedded in the canvas.
• outset: like it is coming out of the canvas.

Έχουμε και τη σχετική εικόνα για βοήθεια:

Νίκο, ευχαριστώ!