Kā pārveidot?

[eT`]

Tātad man pagaidām ir

 

 

un gribētu zināt kā panākt ko šādu?

 

[andrisp]

CSS

 

Pašpiko no turienes, kur redzēji šo formu.

[eT`]

tur ir šādi ( ar View Source )

 

<form method="post" action="takelogin.php">
<p>
	<label>Nickname:<br>

	<input id="mess" name="username" class="input" value="" size="20" tabindex="10" type="text"></label>
</p>
<p>
	<label>Password:<br>
	<input id="mess" name="password"  class="input" value="" size="25" tabindex="20" type="password"></label>

</p>	

		<p class="submit"><input name="wp-submit" id="wp-submit" value="Log in" tabindex="100" type="submit"></p>



</form>

[bubu]

Tas ir HTML.

Skaties arī CSS, kas attiecas uz šiem elementiem (#mess, .input, utml)

[eT`]

Pačolēju daļu no CSS kas saistīta ar login tikai nezinu vai šīs ir īstās funkcijas

 

#login {
position: relative;
background: url('pic/nice-title.gif') no-repeat top center;
color: #fff;
margin: 5em auto 1em;
padding: 20px 0 0;
width: 425px;
_width: 390px;
}

#login form {
background: url('pic/nice-battom.gif') no-repeat bottom center;
padding: 0 50px 25px;
_width: 325px;
_margin: 0 auto;
min-height: 200px;
height: auto !important; /* min-height fast hack */
height: 200px;
}

#login #login_error {
background: #0e3350;
border: 1px solid #2571ab;
color: #ebcd4e;
font-size: 11px;
font-weight: bold;
padding: .6em;
width: 310px;
margin: 0 50px;
text-align: center;
}

#login p {
font-size: 12px;
}

#login p.message {
width: 310px;
margin: 0 auto 1em;
}

#login #login_error a {
color: #ebcd4e;
border-color: #ebcd4e;
}

#login #send {
color: #fff;
text-align: left;
font-weight: normal;
font-size: 1.1em;
_width: 325px;
_margin: 0 auto 15px;
}

#login h1 a {
margin: 0 auto;
height: 88px;
width: 320px;
display: block;
border-bottom: none;
text-indent: -9999px;
}

#login .message {
font-size: 10pt;
text-align: center;
}

#login .register {
font-size: 20px;
}

#login input {
padding: 4px;
}

.login ul, #protected #login .bottom {
list-style: none;
width: 325px;
margin: 0 auto;
padding: 0;
line-height: 1.2;
}

.login ul li {
font-size: 11px;
}

.login ul li a {
color: #0d324f;
border: none;
}

#login ul li a:hover {
color: #fff;
}

#login .input {
font-size: 1.8em;
margin-top: 3px;
width: 97%;
}

#login p label {
font-size: 11px;
}

#login #submit {
margin: 0;
font-size: 15px;
}

[andrisp]

Firefox lieto ? Paņem Firebug paplašinājumu. Atver lapu. Atver Firebug. Paņem "Inspect" un uzbrauc ar peli uz tās formas. Uzreiz varēsi redzēt, kas par CSS piesaistīts katram formas veidojošajam elementam.

[eT`]

Vo, paldies baigi noderēja tas addons :)