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