Login igual esse

Qual é minha questão:
Oi,queria um login igual este:



Como faço?

Endereço do meu fórum:
Não é necessário.

Versão do fórum:
PUNBB

Olá!

Informe o endereço de vosso fórum, é o endereço que viu tal função.
'SIM SEMPRE E NECESSÁRIO INFORMAR O ENDEREÇO'.

Até mais.

Olá,

Amigo, veja este que eu achei:

Painel de Controle Visualização Imagens e Cores Cores Folha de estilo CSS

Adicione o seguinte código a folha de estilo de valide:

Código:

.login-form-ative{
  background-color: #03859E;
  border-radius: 5px 5px 5px 5px;
border: 1.9px solid #00778F;
}

.margin-login{
  margin-left: 10px;
}

#username.login-field{
  padding: 1.9px 2px;
margin-left: 2px;
}

depois vá em:

Painel de Controle Módulos Portal & Widgets Gestão dos widgets do fórum

Crie um novo widget personalizado:

1. Nome do widget :  O que preferir
   
2. Utilizar um table type :  Não
   
3. Título do widget :  O que preferir
   

Na fonte do widget adicione o seguinte código:

Código:

<div class="login-form-ative"><div style="margin:auto;text-align:center;width:100%"><span style="font-size: 15px; line-height: normal"><br><font color="#FFFFFF"><strong><div class="title-login"><font face="Arial">Faça login agora!</font></div></strong></font></span></div><br><div class="margin-login"><form action="/login" method="post" name="form_login">

<p><label for="username">Nome: </label></dt><input type="text" tabindex="1" name="username" id="username" size="15" maxlength="40" value="" class="inputbox autowidth" /></dl></p><p><label for="password">Senha:</label></dt><input type="password" tabindex="2" id="password" name="password" size="15" maxlength="40" class="inputbox autowidth" /></p>
<center><input type="submit" name="login" tabindex="6" value="Login" class="login-buttom"></center><div style="margin:auto;text-align:center;width:100%"><table style="margin:auto;"><tr><td align="left"> <img src="http://img714.imageshack.us/img714/928/semttulocpiac.png" width="35px" height="83px" border="0" alt="" /> </td><td align="left"><p><img src="http://images.habbo.com.br/c_images/catalogue/icon_55.png" style="width: 18px;height: 18px" border="0"><a href="/register" class="postlink"><strong>Registre-se</strong></a></p><p align="center"><img src="http://images.habbo.com.br/c_images/catalogue/icon_65.png" width="18px" height="18px"border="0" alt="" /><a href="/profile?mode=sendpassword" rel="nofollow">Esqueci a senha</a></p><p><img src="http://images.habbo.com/c_images/catalogue/icon_115.png" style="width: 18px;height: 18px" border="0"><a href="/h17-historia" class="postlink" target="_blank" rel="nofollow">Quem somos?</a></form></td></tr></table></div></span></span></div></div>

Salve, depois volte para a administração dos widgets e adicione o widget que acabou de criar a estrutura e salve.

Até mais.

Tópico movido de 'Questões sobre códigos' para 'Questões sobre a aparência do fórum'