Como colocar login perzonalizado

Qual é minha questão:
Bom eu queria colocar um icone no login e na senha como esta na imagem e a opção de login com facebook se alguem ajudar ficarei grato!!

Links e imagens do meu problema:


Endereço do meu fórum:
http://noahcheats.forum-livre.com

Versão do meu fórum:
PHPBB2

Hello,

poderiam me informar onde viu isto site

Hello

encontrei uns bonitos veja

Primeiramente siga os seguintes passos:

Painel de Controle Visualisação Home Page Geral. :
Lá, adicione o seguinte código:

Código:

<script>
var nnome = "{USERNAME}" ;
if ( nnome != "Convidado"){
document.write(' <style> ');
document.write(' #loginn{display:none!important;} ');
document.write(' </style> ');
}
</script>


<!-- The CSS -->
<link rel="stylesheet" href="http://web-kreation.com/demos/login_form_mootools_1.2/fx.slide.css" type="text/css" media="screen" />
<style>
#login {
overflow: visible;
height: auto;
-webkit-transition: margin-top 0.5s ease-in-out 0s;
-moz-transition: margin-top 0.5s ease-in-out 0s;
-o-transition: margin-top 0.5s ease-in-out 0s;
transition: margin-top 0.5s ease-in-out 0s;

}

/* Login Panel */
#top {
background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_top.jpg) repeat-x 0 0;}

#top ul.login {
background: url(http://img18.imageshack.us/img18/3017/loginrw.png) no-repeat right 0;}

#top ul.login li.left {
background: url(http://img41.imageshack.us/img41/3439/loginlc.png) no-repeat left 0;}

#top ul.login li {
background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_m.jpg) repeat-x 0 0;}

/*Login*/
/* toggle effect - show/hide login*/
#login {
background: #1E1E1E;}

#login .loginContent input:focus.field {
background: #545454;}

#login .loginContent input.button_login {
background: transparent url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_login.jpg) no-repeat 0 0;}

#login .loginClose a {
background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right 0;}

#login .loginClose a:hover {
background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right -20px;}
</style>

<!-- Login --><div id="loginn" style="display: block;position: absolute;left: 0px;top: 0px;width: 100%;">
<div id="login" style="margin-top:-105px;">
<div class="loginContent">

<form action="/login.forum" method="post" enctype="multipart/form-data" name="form_login" id="form_login2">

<label for="log"><b>Username: </b></label>
<input name="username" size="23" class="field" maxlength="25" type="text" style="clear: both;" />

<label for="pwd"><b>Password:</b></label>
<input name="password" class="field" size="23" maxlength="25" type="password" style="clear: both;" />

<input class="menuoption button_login" type="submit" name="login" value=" " />

<input type="hidden" name="redirect" value="" />

</form>
<div class="left">

<label for="rememberme">
<input name="autologin" id="autologin" type="checkbox" tabindex="4" checked="checked" class="radio" /> Conexão automática
</label>

</div>
<div class="right">Não é um membro? <a href="/profile.forum?mode=register">Registar-me</a> | <a class="gensmall" href="/profile.forum?mode=sendpassword"> Recuperar Senha</a></div>

</div>
<div class="loginClose"><a href="#" id="closeLogin" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')? '-105px' : '0px');">Fechar Painel</a></div>

</div>


<!-- /login -->


<div id="container">
<div id="top">

<!-- login -->

<ul class="login">

<li class="left"> </li>

<li>Olá Visitante!</li>

<li>|</li>

<li><a id="toggleLogin" href="#" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')? '-105px' : '0px');">Entrar</a></li>

</ul> <!-- / login -->

</div> <!-- / top -->


<div class="clearfix"></div>
</div>



</div>

obs: esse login fica no topo e aquele expansível veja se resulta senhor

Não resultou queria os icones no login e na senha

Olá,

Adicione á teu CSS :

Código:

.panel {
-moz-border-radius: 5px;
-moz-box-shadow: 0 2px 5px 0 #dcdcdc;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 2px 5px 0 gainsboro;
background: white url(http://i36.servimg.com/u/f36/11/96/49/61/dropsh10.png) 0 -1px repeat-x;
border: 1px solid #D6D6D6;
border-radius: 5px;
box-shadow: 0 2px 5px 0 gainsboro;
}
.user_login_form input[type="text"] {
background: url(http://i.imgur.com/rzOu1.png)no-repeat;
padding-left: 20px;
}
.user_login_form input[type="password"], .user_login_form input[type="text"] {
border: 1px solid #DDD;
border-radius: 0!important;
cursor: text;
padding: 5px;
top: 0;
}
.user_login_form input[type="password"] {
background: white url(http://i.imgur.com/dlS8w.png)no-repeat;
padding-left: 20px;
}
.user_login_form input[type="password"], .user_login_form input[type="text"] {
border: 1px solid #DDD;
border-radius: 0!important;
cursor: text;
padding: 5px;
top: 0;
}
button, button.button2, input.button2, input[type="button"], input[type="file"], input[type="reset"], input[type="submit"] {
-moz-border-radius: 3px;
-moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
-webkit-border-radius: 3px;
-webkit-box-shadow: inset 0 0 1px 1px #F6F6F6;
background: #E3E3E3;
border: 1px solid #BBB;
border-radius: 3px;
box-shadow: inset 0 0 1px 1px #F6F6F6;
color: #333;
cursor: pointer;
font-family: "helvetica neue",helvetica,arial,sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: bold;
line-height: 1;
padding: 4px .5em!important;
text-align: center;
text-shadow: 0 1px 0 white;
}

Cordialmente ...

Olá!

Aceda á "Folha de estilos CSS":
Painel de Controle Visualização Imagens e Cores Cores Folha de estilos CSS

Código:

.user_login_form input[type="password"],.user_login_form input[type="text"]{border:1px solid #DDD;border-radius:0!important;cursor:text;padding:5px;top:0}.user_login_form input[type="text"]{background:url(https://i.imgur.com/rzOu1.png)no-repeat;padding-left:20px}.user_login_form input[type="password"]{background:#fff url(https://i.imgur.com/dlS8w.png)no-repeat;padding-left:20px}#username{background:#fff url(https://i.imgur.com/rzOu1.png)no-repeat;border:1px solid #DDD;border-radius:0!important;cursor:text;padding:5px 5px 5px 20px;top:0}#password{background:#fff url(https://i.imgur.com/dlS8w.png)no-repeat;border:1px solid #DDD;border-radius:0!important;cursor:text;padding:5px 5px 5px 20px;top:0}

Salve.

Até mais.

Hello,

meu querido acho que não posso te ajudar nessa mais possuo um código bem bonito pra você

painel de controle modulos HTML e java script java script clique em cole o código la coloque no investimento todas menos galeria.

Código:

jQuery(document).ready(function(){if(jQuery('a.mainmenu#logout').length==0){jQuery('#main-content div[style="clear:both;"]:eq(0)').after('<style>#memb_login{float:left;margin-top:12px;padding-left:20px;width:500px}#memb_login li,#memb_login ul{float:left;list-style:none;margin:0;padding:0}#memb_login .login_icon{background:url(http://i.imgur.com/ATlGt.png) 0 50% no-repeat}#memb_login a{color:#888;font-size:12px;line-height:20px;text-decoration:none}#memb_login .login_icon span,#memb_login .signup_icon span{display:block;padding:0 0 0 40px}#memb_login .memb_greeting,#memb_login .uppertext{color:#323436;display:block;font-size:16px;text-transform:uppercase}#memb_login .signup_icon{background:url(http://i.imgur.com/KeBCD.png) 0 50% no-repeat;margin-left:50px}#memb_login a:hover{color:#454545}</style><div id="memb_login" style=" padding: 13px; "><ul><li class="login_icon"><a href="/login"><span class="uppertext">Login <strong>></strong></span><span>Member Login.</span></a></li><li class="signup_icon"><a href="/register"><span class="uppertext">Register <strong>></strong></span><span>Create an Account.</span></a></li></ul></div>')}});

Josh escreveu:Olá!

Aceda á "Folha de estilos CSS":
Painel de Controle Visualização Imagens e Cores Cores Folha de estilos CSS

Código:

.user_login_form input[type="password"],.user_login_form input[type="text"]{border:1px solid #DDD;border-radius:0!important;cursor:text;padding:5px;top:0}.user_login_form input[type="text"]{background:url(https://i.imgur.com/rzOu1.png)no-repeat;padding-left:20px}.user_login_form input[type="password"]{background:#fff url(https://i.imgur.com/dlS8w.png)no-repeat;padding-left:20px}#username{background:#fff url(https://i.imgur.com/rzOu1.png)no-repeat;border:1px solid #DDD;border-radius:0!important;cursor:text;padding:5px 5px 5px 20px;top:0}#password{background:#fff url(https://i.imgur.com/dlS8w.png)no-repeat;border:1px solid #DDD;border-radius:0!important;cursor:text;padding:5px 5px 5px 20px;top:0}

Salve.

Até mais.

não funcionou

Obrigado Resultou Pode Fechar Aqui !

qual resultou

3