how to make rounded text input boxes

[N!ck]

all this really involves is setting a table cell background and a css thingamajigger to make the input background transparent. so, the first thing to do is to pick an input box you want to give rounded corners.

first thing to do is to upload the attached file to your images folder.

now, the <td> tag that that input field is in needs to have these attributes added/changed:


background="https://vborg.vbsupport.ru/images/textarea.gif" width="224" height="19"


then, add/change the style attribute on that input field to:


style="background-color: transparent; font-face: verdana, arial, sans-serif, helvetica, times; font-size: 10px; font-weight: bold; border: 0"


and you're done!

[N!ck]

it would probably help if i had attached this

[N!ck]

nobody's gonna let me see some examples? :D

[N!ck]

here are some alternates for textarea.gif

this one is chrome

[N!ck]

blue chrome

[N!ck]

red/maroon chrome

[N!ck]

gold/yellow

[N!ck]

green

[Admin]

Sounds cool, any live examples?

[N!ck]

i haven't implemented it on my forums yet, but here is a demo/example:

http://7nick3.hypermart.net/roundedinputs.html

feel free to view the source and look at the css i used on each input field

[Dean C]

how wud i get the chrome effect in post #4 ???

as im not very good wit CSS i dont kno where to start... do u need to have an image ???

thanks in advance :D

[N!ck]

upload textarea2.gif as textarea.gif to your images folder.

in the table cell (td) that encloses the text input box you want to give that effect, add the following attributes:


background="{imagesfolder}/textarea.gif" width="224" height="19"


now, add this to the input field's attributes:


style="background-color: transparent; color: black; font-face: verdana, arial, sans-serif, helvetica, times; font-size: 10px; font-weight: bold; border: 0"


does that make better sense?

[Dean C]

here is the template for the reply box... there are that many tags in there i dont kno which one to do... cud u help me with it plz :D


<script language="javascript">
<!--
var postmaxchars = $postmaxchars;
function validate(theform) {
if (theform.message.value=="") {
alert("Please complete the message field.");
return false; }
if (postmaxchars != 0) {
if (theform.message.value.length > $postmaxchars) {
alert("Your message is too long.\n\nReduce your message to $postmaxchars characters.\nIt is currently "+theform.message.value.length+" characters long.");
return false; }
else { return true; }
} else { return true; }
}
function checklength(theform) {
if (postmaxchars != 0) { message = "\nThe maximum permitted length is $postmaxchars characters."; }
else { message = ""; }
alert("Your message is "+theform.message.value.length+" characters long."+message);
}
//-->
</script>

<form enctype="multipart/form-data" action="newreply.php" name="vbform" method="post" onSubmit="return validate(this)">
<input type="hidden" name="s" value="$session[sessionhash]">
<input type="hidden" name="action" value="postreply">
<input type="hidden" name="threadid" value="$threadid">
<input type="hidden" name="title" value="">
<input type="hidden" name="iconid" value="0">
<input type="hidden" name="parseurl" value="yes">
<input type="hidden" name="email" value="">
<input type="hidden" name="disablesmilies" value="">
<input type="hidden" name="closethread" value="">
<input type="hidden" name="hiddenreply" value="">
<input type="hidden" name="signature" value="yes">
<input type="hidden" name="rating" value="0">

<table cellpadding="{tableouterborderwidth}" cellspacing="0" border="0" bgcolor="{tablebordercolor}" {tableouterextra} width="{contenttablewidth}" align="center"><tr><td>
<table cellpadding="4" cellspacing="{tableinnerborderwidth}" border="0" {tableinnerextra} width="100%">
<tr>
<td bgcolor="{tableheadbgcolor}" colspan="2"><normalfont color="{tableheadtextcolor}" class="thtcolor"><b>Post Reply</b></normalfont></td>
</tr>
<tr>
<td bgcolor="{secondaltcolor}" valign="top" nowrap><normalfont><b>Your Reply:</b></normalfont></td>
<td bgcolor="{secondaltcolor}">
<table cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
<td><textarea name="message" rows="7" cols="$textareacols" wrap="virtual" tabindex="1"></textarea><br>
<smallfont><a href="javascript:checklength(document.vbform);">[check message length]</a></smallfont></td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr></table>

<br>

<table cellpadding="2" cellspacing="0" border="0" width="{contenttablewidth}" {tableinvisibleextra} align="center">
<tr>
<td align="center"><normalfont>
<input type="submit" class="bginput" name="submit" value="Submit Reply" accesskey="s" tabindex="2">
<input type="reset" class="bginput" name="reset" value="Reset Form" accesskey="r" tabindex="3">
</normalfont></td>
</tr>
</table>

</form>

Thanks in Advance

[N!ck]

unfortunately, you do not have any regular input fields, only a text area...:-/

[Dean C]

:(

[N!ck]

if you pick a template with an input field (like <input type="text") i'll help you out w/ it.