Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» Caixa de resposta rápida nos tópicos
Hoje à(s) 09:53 pm por Harleen

» Categoria do fórum
Hoje à(s) 09:48 pm por Harleen

» Remover "Não há mensagens"
Hoje à(s) 09:45 pm por Harleen

» Template quebra ao ser editado
Hoje à(s) 09:21 pm por Starset

» Aparecer pop-up de login ao clicar em Conectar-se
Hoje à(s) 07:39 pm por Flames

» Bug nos tópicos
Hoje à(s) 07:05 pm por Luiz

» Personalizar barra de ferramentas
Hoje à(s) 06:19 pm por Flames

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Harleen
 
Kyo Panda
 
Luiz
 
Fatalisss
 
Holkis
 
JulioPais
 
Shek
 
Flames
 
APOllO
 
Forumpw
 

Quem está conectado
264 usuários online :: 7 usuários cadastrados, 1 Invisível e 256 Visitantes :: 2 Motores de busca

[SRD]JimClark, Harleen, Holkis, Luiz, Starset, ThedbR, Tiago João

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Melhorar o estilo da caixa de login

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Melhorar o estilo da caixa de login

Mensagem por juleic1123 em 29/03/17, 05:52 pm

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>


avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Melhorar o estilo da caixa de login

Mensagem por juleic1123 em 31/03/17, 10:10 am

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Melhorar o estilo da caixa de login

Mensagem por juleic1123 em 01/04/17, 12:53 am

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? Feliz

avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum
  • 0

Resolvido Re: Melhorar o estilo da caixa de login

Mensagem por Luiz em 01/04/17, 09:50 am

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

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;
}

Tchau
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3553
Pontos Ativos : 4228

https://github.com/lffg/

Resolvido Re: Melhorar o estilo da caixa de login

Mensagem por juleic1123 em 01/04/17, 11:17 am

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

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?)


avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Melhorar o estilo da caixa de login

Mensagem por Luiz em 01/04/17, 11:19 am

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.

Tchau

---
Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3553
Pontos Ativos : 4228

https://github.com/lffg/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum