Creating a Nice Textarea/Comment-Box
March 26th, 2008
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.
28 Comments Add your own
1. J.R. | March 28th, 2008 at 8:16 pm
How come your Good Morning image for the text area, shows correctly when I’m logged into my own account but when my friends preview it, it only shows the tassle. Yours is the same as well, if you’ll look at your preview image (http://multiplythemes.com/wp-content/uploads/2008/03/goodmorning.jpg). Is there a way to show the full image correctly?!?
Thanks!
[Reply]
2. diff | March 29th, 2008 at 10:51 am
hi jr..
try to pull down your textarea with mouse..
MP default height textarea is auto. so when textarea is inserted within images. textarea is resized-automatically .
please give me ur MP link..and i’ll try to help from there.
[Reply]
3. J.R. | March 30th, 2008 at 11:48 am
Hi diff!
Thanks for your quick response!
I see what you mean but I’d like my friends to see what I see when I’m logged into my account (I see the whole image)…I tried it with my other account and it works fine but with the URL I gave you, it doesn’t seem to work.
I tried to use different syntax and still didn’t work…but the best I’ve done so far is that when I changed your syntax:
background-position: bottom right;
to
background-position: right;
…it shows the butterfly instead of just the tassle!
I do appreciate your help and sorry for the trouble! (”,)
[Reply]
4. J.R. | March 30th, 2008 at 12:13 pm
…it shows the heart, I meant not the butterfly instead of just the tassle!
[Reply]
5. diff | March 30th, 2008 at 4:35 pm
first, u should know that Multiply had coded the textarea height and width by the default inside html tags. and you cant change it.
you can see it by viewed the sources (if you use firefox browser)
see? neither your nor me/us cant change this tag, except from Multiply itself.
The height of textarea can be specified in the html tags, and not in css code.
ok. so you want full images inserted in your textarea.
here’s my 5cent for you,JR
copy paste this code into your http://multiply.com/setup/pages/upload-css
but first, delete your textarea syntax first (not all your css code, just textarea, as shown below)
——–
delete this your old textarea css below..(do search!)
textarea {
background-image: url(http://www.jeckrese.com/images/PurpleButterflyHearts.gif);
background-position: right;
background-repeat: no-repeat;
background-color: #F6EDFD;
overflow: hidden;
min-height:275px;
max-height: auto;
}
input {
border: 1px solid #864EBA;
padding: 2px;
color: #CBA1F3;
}
——-
after you delete css code above, copy paste this code :
textarea {
background-image: url(http://www.jeckrese.com/images/PurpleButterflyHearts.gif);
background-position: right;
background-repeat: no-repeat;
background-color: #F6EDFD;
overflow: hidden;
min-height:275px; /* this code for resize background-image, adjusted images size */
}
input {
border: 1px solid #864EBA;
padding: 2px;
color: #CBA1F3;
margin: 5px;
}
input:hover {
border: 1px solid #000;
margin: 5px;
padding: 2px;
color: #CBA1F3;
cursor: pointer;
}
PS:
i change your css code, for input and input:hover to make it more beautiful. hope you like it.
thanks.
[Reply]
6. J.R. | March 30th, 2008 at 7:07 pm
WoW! You’re such a nice person!!!
Thanks for doing it for me…I didn’t like it but I love it!!! Thank you so much, it works exactly how I wanted.
Thanks a lottttt!!! God bless you!!! (”,)
[Reply]
7. Dee Seneca | April 5th, 2008 at 12:59 pm
Hi Ya’ll,
I have a 2-part question to ask. First of all I would like to put your link on my page, but I’d like to use this one if it’s ok?
My second question is this: I’d like to use the same buttons in my comment box as I have at the top. Here’s a link to show you what I’m talking about: http://i135.photobucket.com/albums/q155/lil_bama_girl/Q-About-Buttons.jpg I’m not sure if it can be done, but if it can would you please help me?
Thanks so much,
Dee
[Reply]
8. simplyjacy | April 5th, 2008 at 7:06 pm
feel free to link us on your page. it would mean so much to us. btw, your theme looks really beautiful. i commend you for doing a good job.
to answer your second question, you will be dealing with CSS.
That Submit and Preview button that you have in your comment box can be controlled with the string that says “input”
so, you may add this on that string:
that’s the same code that you are using on your navigation menu.
[Reply]
9. Dee | April 5th, 2008 at 9:43 pm
I’m not really sure where to add it. I tried to add it after this:
input {
-moz-border-radius: 0px;
background-image: none;
background: #f1aebf;
border: 4px double #fae0e7;
color: #82232f ;
font-size:14px;
font-weight: bold;
margin:3px;
padding:5px;
<<<<<<<<<<<<<< right here, but then
} then buttons were all the
to the left and kind of jumbled
together?
then I tried it right after this: input {
but that didn’t work either.
Thank you for taking the time to help me, it is greatly appreciated. BTW, you are now linked on my page.
Also thank you for the compliment on my page!!
Dee
[Reply]
10. diff | April 6th, 2008 at 6:27 am
hello Dee..
what simplyjacy’ reply is correct. u just insert css code for input tag with simplyjacy gave above.
but first u must delete css code for input tag, then copy paste code that simplyjacy was given above into your css code.
so the new one your css for input tag like this :
remember! first delete your input css code, then copy code that i give u above and paste it into your css.
hope this can help you.
[Reply]
11. Dee | April 6th, 2008 at 2:32 pm
Thank ya’ll so much!!! I had to tweak it just a little, but it’s works great now!!
It also affected My Reviews, but I can live with it for now.
Thanks again,
and keep up the
good work!!!
Dee
[Reply]
12. diff | April 7th, 2008 at 12:13 am
hello again dee
i’ve check ur site. and well done.
for your affected reviews pages/posts, it’s caused that input code tag read whole pages structure.
u can change (again), for input tag name like this :
just change input name with div#home_guestbook td#cell_submit input
[Reply]
13. charm | April 10th, 2008 at 10:47 am
hey.. uhmm i cant seem to find the text area on my codes.. help?
[Reply]
14. simplyjacy | April 10th, 2008 at 4:55 pm
some themes does not contain those text area codes.
so you can actually add them to be able to manipulate the looks of it.
just refer to Diff’s codes above and add them on your CSS.
[Reply]
15. charm | April 11th, 2008 at 5:52 am
i wanna know which part???
[Reply]
16. simplyjacy | April 11th, 2008 at 6:12 am
you can add them anywhere…
to be safe, add it at the very end of the CSS.
[Reply]
17. am | May 1st, 2008 at 2:20 am
ugh, my background image (from photobucket) isn’t appearing! help pleeeaaase!
[Reply]
18. godDESs | May 14th, 2008 at 11:15 am
how come it doesn’t work at my page.? :[[
[Reply]
19. clueless | May 20th, 2008 at 4:01 am
it doesn’t work with my page, too ):
can you help me with it? id appreciate it if you would T~T
[Reply]
20. jane | June 27th, 2008 at 12:50 pm
how to change the font and text color of the comments on each photo album ???
[Reply]
21. hj | August 2nd, 2008 at 9:08 am
hi! i like your comment box. how did u do these? can u please teach me..
[Reply]
22. nicosefelizalde.multiply.com | August 10th, 2008 at 5:19 am
hey..
please teach me:D
i can’t do it, anyways!
just add me in multiply please!
okay…My multiply ID is
http://nicosefelizalde.multiply.com/
there! please add me, and comment me on how to do this…
ok
that’s all:D
thanks!
and what’s ur multiply ID so I can know who am I asking??
please rep.
ASAP:D
tnx again my friend! just reply me:))
[Reply]
23. Tisha | August 23rd, 2008 at 6:52 am
your explanation of things are complicated
[Reply]
24. belay | September 15th, 2008 at 10:09 am
input {
border: 1px solid #ffffff;
margin: 0;
padding: 2px;
color: #444444;
}
does not work, what’s wrong?
[Reply]
25. Ichy_ria2uk Jok | September 29th, 2008 at 7:04 pm
ewerekooo…sopwekotooo…..control epwe enisuk…
[Reply]
26. moshie | October 5th, 2008 at 8:27 am
can you help me how to make my personalize theme. hope to have a reply from you soon
[Reply]
27. Ginger | November 16th, 2008 at 12:56 am
How would I make this one?
When you click the Guestbook area box (because they would give me a comment), it would type from the center and not from the left. What’s the code for that? Please reply ASAP.
[Reply]
simplyjacy Reply:
November 16th, 2008 at 4:19 am
can i have the url of your page? that way i can see it for myself what you meant?
[Reply]
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed