Melhorar o estilo da caixa de login

Detalhes da questão

Endereço do fórum: http://online-winxclub.com
Versão do fórum: phpBB3

Descrição

Olá a todos!

Tive uma pequena ideia para melhorar a caixa de login do meu website / fórum, nomeadamente quando os membros iniciam sessão no fórum, apenas. A minha caixa de login já está personalizada, contudo queria dar alguns retoques que penso só vocês o conseguem fazer.

Então, vou explicar a minha ideia e aguardo ansiosamente pela vossa ajuda!

A minha ideia é re-organizar certos botões de modo a que fiquem com uma aparência mais organizada, atraente e chamativa.



O botão "Help", não existente na caixa de logia atual, iria levar os usuários para o nosso FAQ, sendo que é o portal /?pid=97

A caixa poderá ser um pouco pequena, então tentem colocá-la do tamanho que eu na foto de como a imaginei coloquei. Podem precisar de reformular certas partes do código para a aumentar, sendo que existem algumas partes da estrutura da caixa localizadas num servidor de um amigo meu que me ajuda com o site.

Por fim, mas não menos importante, peço-vos para ter, como sempre, um cuidado redobrado com este código em si. Alguns códigos, como este, estão ligados a um servidor como já mencionei acima e cada parte é essencial. O código em si tem particularidades que a caixa de login normal da forumeiros não tem, como redirecionar para o portal quando fazemos login ou log out e acima de tudo um sistema multi-linguagem... então peço-vos para manterem sempre cuidado.

Eu confio em vocês... mas o código, feito por esse amigo meu, parece ser complexo e é sempre bom prevenir que remediar (também, este fórum nunca me decepcionou então não estou muito preocupado rsrs).

O código:

Código:

<div class="LoginBox">
                                                                   <script>
usernameTxt = 'E-mail';
passwordTxt = 'Password';
rememberTxt = 'Remember me';
FPTxt = 'Forgot password?';
ClickHereTxt = 'Click here';
SignInTxt = 'Sign in';
SignUpTxt = 'Sign Up';

if(lang_=="en")
{
usernameTxt = 'Email';
passwordTxt = 'Password';
rememberTxt = 'Remember me';
FPTxt = 'Forgot password?';
ClickHereTxt = 'Click here';
SignInTxt = 'Sign in';
SignUpTxt = 'Sign Up';
}
if(lang_=="fr")
{
usernameTxt = 'Email';
passwordTxt = ' Mot de passe*';
rememberTxt = 'Se souvenir';
FPTxt = 'MDP* oublié?';
ClickHereTxt = 'Clique ici';
SignInTxt = 'Se connecter';
SignUpTxt = 'S\'inscrire';
}
if(lang_=="es")
{
usernameTxt = 'Correo Electrónico';
passwordTxt = 'Contraseña';
rememberTxt = 'Recuérdame';
FPTxt = '¿Contraseña olvidada?';
ClickHereTxt = 'Haz click';
SignInTxt = 'Iniciar sésion';
SignUpTxt = 'Inscribirse';
}
if(lang_=="pt")
{
usernameTxt = 'CORREIO ELETRÓNICO';
passwordTxt = 'PALAVRA PASSE';
rememberTxt = 'Login automático';
FPTxt = 'Senha esquecida?';
ClickHereTxt = 'Clica aqui    ';
SignInTxt = 'Entrar';
SignUpTxt = 'Inscrever-me';
}
if(lang_=="ru")
{
usernameTxt = 'Эл. адрес';
passwordTxt = 'пароль';
rememberTxt = 'Запомни меня';
FPTxt = 'Забыли пароль';
ClickHereTxt = 'щелчок';
SignInTxt = 'авторизоваться';
SignUpTxt = 'регистр';
}
if(lang_=="br")
{
usernameTxt = 'Email';
passwordTxt = 'Senha';
rememberTxt = 'Auto-conexão';
FPTxt = 'Perdeu a senha?';
ClickHereTxt = 'Clique aqui    ';
SignInTxt = 'Entrar';
SignUpTxt = 'Se inscreva!';
}
if(lang_=="pl")
{
usernameTxt = 'E-mail';
passwordTxt = 'Hasło';
rememberTxt = 'Zapamiętaj mnie';
FPTxt = 'Zapomniałeś hasła??';
ClickHereTxt = 'Kliknij tu!    ';
SignInTxt = 'Zaloguj';
SignUpTxt = 'Zarejestruj';
}
if(lang_=="it")
{
usernameTxt = 'Email';
passwordTxt = 'Password';
rememberTxt = 'Ricordami &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp';
FPTxt = 'Hai dimenticato la password?';
ClickHereTxt = 'Clicca qui!';
SignInTxt = 'Entra';
SignUpTxt = 'Registrati!';
}
if(lang_=="tr")
{
usernameTxt = 'E-posta:';
passwordTxt = 'Parola:';
rememberTxt = 'Beni Hatırla &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp';
FPTxt = 'Parolanı mı unuttun?';
ClickHereTxt = 'Buraya tıkla!';
SignInTxt = 'Giriş yap';
SignUpTxt = 'Üye ol!';
}
if(lang_=="de")
{
usernameTxt = 'Email:';
passwordTxt = 'Passwort:';
rememberTxt = 'Passwort merken &nbsp&nbsp&nbsp';
FPTxt = 'Passwort vergessen?';
ClickHereTxt = 'Klick hier!';
SignInTxt = 'Anmelden';
SignUpTxt = 'Registrieren';
}
</script>                                                                                       
   <div style="width: 310px; height: 20px; background: url(http://web-server.ovh/wco/images_site/boxTop.png)">
                                                                                                                                                               
   </div>
                                                                                                                                                            
   <!--                                                                              CONTENT                                                                              -->                                                                           
   <div style="width: 310px; height: 190px; background: url(http://web-server.ovh/wco/images_site/boxContent.png)">
                                                                                                                                                               
      <form action="/login" method="post" name="form_login">
                                                                                     <span style="color:#444444;">                                                                           
            <!--                                                                              USERNAME                                                                              --><span style="font-family: arial,helvetica,sans-serif; font-size:13px;"><span style="margin-left: 15px;"><span id="username-txt" class="username-txt" style="font-weight: bold; font-size:13px;">Username</span></span></span><br /><input class="inputbox" id="username" maxlength="40" name="username" size="25" style="margin-left: 15px; width: 230px; height: 20px; font-size:13px;" tabindex="1" type="text" value="" /><br />                                                                             
            <!--                                                                              PASSWORD                                                                              --><span style="font-family: arial,helvetica,sans-serif; font-size:13px;"><br /><span style="margin-left: 10px;"><span id="password-txt" class="password-txt" style="font-weight: bold; font-size:13px;">Password</span></span><br /><input class="inputbox" id="password" maxlength="40" name="password" size="25" style="margin-left: 15px; width: 230px; height: 20px; font-size:13px;" tabindex="2" type="password" value="" /><br /><br /><span id="autologin-checkbox" style="margin-left: 25px; font-family:arial,helvetica,sans-serif; font-size:13px;"><input checked="checked" class="radio" id="autologin" name="autologin" tabindex="4" type="checkbox" /> Remember me</span></span><input type="hidden" name="redirect" value="/portal" /><input id="signin-txt" type="submit" value="Sign In" name="login" tabindex="6" style="font-size:13px; margin-left: 35px; background: url(http://web-server.ovh/wco/images_site/button-submit.png); width: 87px; height: 31px; border:none; font-weight: bold; color: white;" /><br /><span style="font-family:arial,helvetica,sans-serif; font-size:13px;"><span style="margin-left:13px;"><span id="forgotpsswd-txt" style="color:#444444; font-size:13px;">Forgot password?</span><br /><a href="/profile?mode=sendpassword"><span id="clickhere-txt" style="color:#ff0099; margin-left: 15px; font-size:13px;">Click here</span></a></span></span><input id="signup-txt" type="button" onclick="window.location='/register';" value="Sign Up" style=" font-size:13px; margin-left: 48px; background: url(http://web-server.ovh/wco/images_site/button02.png); width: 127px; height: 31px; border:none; font-weight: bold; color: #444444;" />                                                                             
            <!--                                                                              END                                                                              --></span>                                                                           
      </form>
                                                                                                                                                             
   </div>
                                                                         <script>
document.getElementById('username-txt').innerText = usernameTxt;
document.getElementById('password-txt').innerText = passwordTxt;
document.getElementById('autologin-checkbox').innerHTML = '<input type="checkbox" tabindex="4" name="autologin" id="autologin" class="radio" checked="checked"> '+rememberTxt;
document.getElementById('forgotpsswd-txt').innerText = FPTxt;
document.getElementById('clickhere-txt').innerText = ClickHereTxt;
document.getElementById('signin-txt').value = SignInTxt;
document.getElementById('signup-txt').value = SignUpTxt;
</script>                                                                                   
   <div style="width: 310px; height: 38px; background: url(http://web-server.ovh/wco/images_site/boxBottom.png)">
                                                                                                                                                               
   </div>

up

UPDATE! Consegui fazer tudo sozinho!

Aliás... quase tudo, Ficou tal como eu queria, excepto uma coisa bastante simples, mas que por algum motivo não estou a conseguir editar e colocar ao meu gosto. Quando nós passamos o rato (penso que aí "rato" se chama "mouse" como em Inglês) pela caixa onde colocamos as nossas informações, o contorno cinzento desaparece, devo ter algum código ou até nas cores que faça isto acontecer, e queria saber como corrigir e continuar cinzento.

Vejam:


Conseguem arranjar?

É até que bem simples...
A senhora fez a parte mais difícil.

Adicione este código ao final de sua Folha de Estilo CSS:

Código:

input#username:hover,
input#password:hover {
  border: solid 1px #BCBCBC!important;
}

Senhor, rs' mas eu entendo a sua confusão devido ao site/fórum que eu possuo.

Muito obrigado! Resultou! (Eu ainda tenho mais um pedido a fazer, mas é sobre a caixa de login para usuários, moderadores e administradores, estou em dúvida... crio outro tópico ou deixo já aqui? Já que se trata de um assunto bem similar e a caixa é exactamente igual, porém para membros?)

Olá,

Como a questão a qual este tópico trata-se foi resolvida, irei arquivá-lo.
Já sobre a outra questão, o senhor deverá criar outro tópico.



---

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas".