Page 1 of 1
Custom Text Fields
Posted: Wed Aug 12, 2009 8:54 am
by SpiritWebb
Anyone here know how to do this? I'm having problems trying to set up my own custom text field, as to opposed those ugly plain white fields. Here is the code:
style.css
Code: Select all
#loginusername {
position:absolute;
left:483px;
top:178px;
width:188px;
height:22px;
background:url(textfield.png) no-repeat;
background-color:transparent;
border: none;
padding: 0px 0 0 1px;
z-index:3;
}
#loginpassword {
position:absolute;
left:483px;
top:209px;
width:188px;
height:22px;
background:url(textfield.png) no-repeat;
background-color:transparent;
border: none;
padding: 0px 0 0 1px;
z-index:3;
}
index.php
Code: Select all
<div id="loginusername">
<form method="POST" action="authenticate.php">
<input type="text" name="player" class="loginusername"><br><br>
</div>
<div id="loginpassword">
<input type="password" name="password" class="loginpassword">
</div>
Re: Custom Text Fields
Posted: Thu Aug 13, 2009 8:04 am
by jpoisson
here are a few online tutorials for your situation.
Re: Custom Text Fields
Posted: Thu Aug 13, 2009 1:20 pm
by hallsofvallhalla
how is it not working? What exactly are you trying to do?
Re: Custom Text Fields
Posted: Thu Aug 13, 2009 6:56 pm
by SpiritWebb
hallsofvallhalla wrote:how is it not working? What exactly are you trying to do?
Remove the old ugly white text field (IE username and password fields) and hide them with a graphic so that my own graphic will be what appears they are writting in...(IE:
http://darkorbit.com) how they have their fields, its not the boring look.
Re: Custom Text Fields
Posted: Thu Aug 13, 2009 7:30 pm
by jpoisson
This is what I am using for mine.
Code: Select all
<form id="register" action="reguser.php" method="post">
<fieldset>
<legend align="left">Login Form</legend>
<div class="formfloat"><p><label for="registerUserName">Username:</label></p>
<input type="text" id="registerUserName" name="registerUserName" value="" class="formfield" tabindex="1" size="20" maxlength="20" /></div>
<div class="formfloat"><p><label for="registerPassWord">Password: </label></p>
<input type="text" id="registerPassWord" name="registerPassWord" value="" class="formfield" tabindex="2" size="20" maxlength="20" /></div>
<div class="formfloat"><p><label for="registerPassWordVerification">Verify Password: </label></p>
<input type="text" id="registerPassWordVerification" name="registerPassWordVerification" value="" class="formfield" tabindex="3" size="20" maxlength="20" /></div>
div class="formfloat"><p><label for="registerEmail">Email: </label></p>
<input type="text" id="registerEmail" name="registerEmail" value="" class="formfield" tabindex="4" size="20" maxlength="50" /></div>
<div class="formfloat"><p><label for="registerEmailVerification">Verify Email: </label></p>
<input type="text" id="registerEmailVerification" name="registerEmailVerification" value="" class="formfield" tabindex="5" size="20" maxlength="50" /></div>
<div class="formbreak"></div><br />
<input type="submit" value="Register" name="Submit" tabindex="6" >
</fieldset>
</form>
this is my Cascading Stylesheet
Code: Select all
/* Forms/Legends/Fieldsets
------------------------------------- */
fieldset {
border: 1px solid #CDCDCD;
margin-bottom: 30px;
overflow: hidden;
height: 100%;
min-height: 100%;
padding: 10px 10px 10px 10px;
}
fieldset p {
font-weight: bold;
margin: 0;
color: #999999;
clear: both;
}
legend {
font-size: 18px;
padding: 0 10px 0 10px;
color: #003366;
}
.formfield {
background: #CCDBF1 url(../images/Layout/form_bak.gif) repeat-x;
border: 1px solid #E3E3E3;
color: #003366;
padding: 2px;
margin-bottom: 20px;
font-size: 18px;
}
.formfieldsm {
background: #CCDBF1 url(../images/Layout/form_bak.gif) repeat-x;
border: 1px solid #E3E3E3;
color: #003366;
font-size: 10px;
}
.formselect {
font-size: 14px;
}
fieldset span {
font-size: 10px;
font-weight: normal;
}
.formfloat {
float: left;
margin-right: 20px;
}
.formbreak {
clear: both;
margin-right: 20px;
}
Now I am going to provide you with the form_bak.gif dimensions are 8px wide and 24px tall. I am sure you can make an Image like that in paint.
Also try working on the form as a whole and not just the individual parts. I am not going to explain this because i gave you 3 sites that have alot of tutorial information and i know your not a script kiddie so i know you will go look at them and understand what is going on.