Κυριακή 1 Μαΐου 2011

Χρωματιστό κείμενο στην ανάρτηση Πηγή www.bloggertips.gr





Πάμε στον Πανόπτη --> Διάταξη --> Επεξεργασία HTML και αφού πάρουμε (όπως πάντα), ένα backup του template μας, με το Ctrl+F ψάχνουμε να βρούμε το

]]></b:skin>

Ακριβώς από πάνω του τοποθετούμε τον παρακάτω κώδικα

.mbt-textarea {

padding:0;

margin:0;

width:400px;


height:40px;

color:#0080ff;

font:12px arial;

background:#fff;

border:1px dotted #289728; }

.mbt-textarea:hover {

color:#289728;

border:2px solid #666; }

.mbt {


padding-top:3px;


margin:0;


color:#289728;


font-size: 9px;


font-family: sans-serif, verdana;


}
Πριν πατήσουμε αποθήκευση, καλό είναι να πραγματοποιήσουμε τις αλλαγές που θέλουμε να κάνουμε, σύμφωνα με τα γούστα του καθενός.

1) Αν θέλετε να ορίσετε, δηλαδή να μειώσετε ή να αυξήσετε το ύψος ή το πλάτος της περιοχής κειμένου , απλά επεξεργαστείτε τις παρακάτω τιμές, με το θαλασσί χρώμα.
Πλάτος: 400px?
ύψος: 40px?

2) Για να αλλάξετε το χρώμα του κειμένου που θα φαίνεται, αλλάζουμε τον εξαψήφιο κωδικό (αυτόν με το πράσινο χρώμα), επιλέγοντας το χρώμα της αρεσκείας μας.
color: # 0080ff?
(Χρησιμοποιήστε την χρωματική παλέτα με τους αντίστοιχους κωδικούς των χρωμάτων, πατώντας ΕΔΩ http://ekabitis-tips-tricks.blogspot.com/2010/02/html-color-codes.html

3) Για να αλλάξετε το χρώμα του κειμένου σε λειτουργία, όταν δηλαδή περνάμε τον δείκτη του ποντικιού από πάνω, μπορείτε να επεξεργαστείτε τον κωδικό με το κόκκινο χρώμα
color: # 289728?

4) Για να αλλάξετε το πλάτος του περιθωρίου, το στυλ και το χρώμα όταν είναι σε ενεργό λειτουργία επεξεργαστείτε αυτόν τον κώδικα,

border: 1px dotted # 289728?

όπου 1px, είναι το πλάτος του πλαισίου. Είναι ρυθμισμένο σε διακεκομμένη γραμμή και το χρώμα είναι # 289728

5) Για να αλλάξετε την εμφάνιση του περιθωρίου, όταν δηλαδή περνάμε τον δείκτη του ποντικιού από πάνω, μπορείτε να επεξεργαστείτε τον κωδικό

border: 2px solid # 666?

6) Για να αλλάξετε τη γραμματοσειρά και το μέγεθος της, επεξεργαστείτε αυτό,

font: 12px Arial?

όπου 12px είναι το μέγεθος, και arial είναι η γραμματοσειρά ως προεπιλογή που έχω χρησιμοποιήσει.

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

<textarea class="mbt-textarea" readonly="readonly">ΕΔΩ ΓΡΑΦΟΥΜΕ ΚΕΙΜΕΝΟ</textarea>
<p class="mbt" ><u>Εδώ βάζουμε τίτλο ή κάποια οδηγία για το κείμενο</u></p>

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

.mbt {


padding-top:3px;


margin:0;


color:#289728;


font-size: 9px;


font-family: sans-serif, verdana;


}
Τώρα τελειώσαμε.