ich möchte meine Loginbox verschönern, dafür hab ich diesen Stylecode:
body {
border: none;
color: #000;
font-family: "Varela Round", Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.5em;
}
input {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
-webkit-appearance: none;
}
/* ---------- LOGIN ---------- */
#login {
position: absolute;
overflow: hidden;
margin-left: 78%;
margin-top: 10px;
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#79bcff), to(#79bcff), color-stop(0.5, #79bcff), color-stop(0.5, #ffffff)) 21 30 30 21 repeat repeat;
-webkit-border-radius: 20px 20px 0 0;
-moz-border-radius: 20px 20px 0 0;
border-radius: 20px 20px 0 0;
width: 300px;
}
#login h2 {
background-color: #79bcff;
-webkit-border-radius: 20px 20px 0 0;
-moz-border-radius: 20px 20px 0 0;
border-radius: 20px 20px 0 0;
color: #000000;
font-size: 16px;
padding: 5px 11px;
}
#login h2 span[class*="fontawesome-"] {
margin-right: 5px;
}
#login fieldset {
background-color: #fff;
-webkit-border-radius: 0 0 20px 20px;
-moz-border-radius: 0 0 20px 20px;
border-radius: 0 0 20px 20px;
padding: 5px 11px;
}
#login fieldset p {
color: #000000;
margin-bottom: 9px;
}
#login fieldset p:last-child {
margin-bottom: 0;
}
#login fieldset input {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#login fieldset input[type="email"], #login fieldset input[type="password"] {
background-color: #79bcff;
color: #777;
padding: 4px 10px;
width: 250px;
}
#login fieldset input[type="submit"] {
border: none;
background-color: #79bcff;
color: #fff;
margin: 0 auto;
padding: 4px 0;
width: 120px;
}
#login fieldset input[type="submit"]:hover {
background-color: #0080FF;
}
/*Loginformular ENDE*/
den html-code binde ich dann wie folgt in die login.htm im templates/user Ordner ein:
<h2><span class="fontawesome-lock"></span>{_lang_LOGIN}</h2>
<form action="index.php?user-login" method="POST">
<fieldset>
<p><label for="email">{_lang_nickname}</label></p>
<p><input type="name" id="email" name="name" value="Mitgliedsname" onBlur="if(this.value=='')this.value='Mitgliedsname'" onFocus="if(this.value=='Mitgliedsname')this.value=''"></p> <!-- JS because of IE support; better: placeholder="mail@address.com" -->
<p><label for="password">{_lang_password}</label></p>
<p><input type="password" id="password" name="password" value="password" onBlur="if(this.value=='')this.value='password'" onFocus="if(this.value=='password')this.value=''"></p> <!-- JS because of IE support; better: placeholder="password" -->
<input type="submit" value="Einloggen"> <input type="submit" value="Login vergessen">
<label style="padding-left:80px;"><a href="index.php?user-regist">{_lang_registernow}</a></label><br />
<label style="padding-left:80px;"><a href="index.php?user-remind">{_lang_forgottenpassword}?</a></label>
</fieldset>
</form>
{EXPLODE}
{_lang_yourareloged}!
{EXPLODE}
{_lang_login3failure}
Sicherlich ist das gaaaaaaaanz einfach, aber es klappt bei mir leider nicht...
Wobei ich sagen muss, das CSS ein neues Gebiet für mich ist.
Weiss jemand Rat?
betroffene Homepage: externer Link
