Creating a Nice Textarea/Comment-Box
A textarea is an element on a webpage that you can type into. In Multiply lay-out commonly used as commenting areas, and guestbook. All browsers have defaults styles for textareas which vary. You can take control of your textareas and style them with CSS.
in example of my lay-out, there is a writing : “Thanks for commenting” at bottom right box.
well you can do this with css and of course with your own style.
first you should know that there is two syntax (command) for comment box in multiply lay-out, dh ; [.replybox textarea] and [textarea].
for [.replybox textarea] just leave it, dont mess it. we just play here with [textarea] syntax
for text background in comment box, use it with images. you can create it with your favorite image editor,such as photosop, etc.
after you’ve make text images, see the size of your created text images. i recomend that size of that text image is not larger than 400px.85px.
upload that text-image in your fav image hosting, otherwise you can upload it in multiply photos-album. make a note link that given for text-image.
leave it for a while.
then copy paste this css code and insert it in your custom css.
textarea {
background-image: url(http://YOUR LINK TEXT-IMAGE);
background-position: bottom right;
background-repeat: no-repeat;
background-color: #fff; /* this background-color is adjusted with your background text-images */
}
do preview and if your text-image in comment box is right in position, well done.
but if not, you must be edit your text-images and adjust it with width and height of your comment box.
after edit it, do preview again and if it’s correct, save it.
that’s it.
want more modified of your comment box?
ok, we can make more nice for submit button and Preview & Spell Check button.
just copy this css code below and paste it into your custom css ;
input {
border: 1px solid #ffffff;
margin: 0;
padding: 2px;
color: #444444;
}
input:hover {
border: 1px solid #000000;
margin: 0;
padding: 2px;
color: #444444;
cursor: pointer;
}
you can be a creative person to modify this 2 buttons. just change border color. otherwise you can change font-type, font-style, or font-weight
in input:hover, thats for command if cursor points the button. and yes, you can create it too.
here is additional css code for font :
font-family: "Verdana","Lucida Sans",Sans-Serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 12px;
you can insert that css code of font into input or input:hover syntax.
there is one more trick for comment box, but it only works in IE6 browser and above.
you can insert this css code ;
input:focus, textarea:focus {
background-color: #eee;
}
this css code is used for matching any element that has keyboard input focus. Keyboard input focus describes any element that’s ready to receive user input. It can apply to a form control.
just try it. and i believe this :focus code make your multiply more cool.
30 comments March 26th, 2008
HOW TO APPLY THESE CODES AND COLORS
