[TUTORIAL] Caixa de login fixa no fórum
Página 1 de 1 • Compartilhe

[TUTORIAL] Caixa de login fixa no fórum
![]() | Caixa de login fixa no logo |
Neste incrível tutorial você vai desfrutar mais uma vez do que o CSS e os códigos html são capazes. Vamos adicionar uma caixa de login que geralmente encontramos em fóruns pagos, mas, vamos personalizar ao nosso estilo, ao estilo Forumeiros.
--> Tutoriais dicas, e astúcias <--
Caixa de login fixa no logo
Caixa de login fixa no logo
1º - Como usar a folha de estilo CSS para esta aplicação:
Geralmente, apresentamos o código HTML ou Javascript antes do CSS. Neste tutorial vamos então mostrar as propriedades que você poderá alterar na sua folha de estilo CSS.
Painel de controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilo CSS ->>
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
Agora que já conhece a sua folha de estilo CSS, vamos trabalhar com o CSS para finalmente chegar ao resultado esperado. Antes de tudo, veja no código que as propriedades de localização do objeto estão marcas em "0". Isso não significa nada até o momento, pois, ainda não adicionamos o código DIV ID que vai chamar o CSS para fazer o resultado que esperamos.
#flutuante {
position:absolute;
bottom:0%;
margin-left:0%;
float:left;
border-radius:5px;-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#fff;
padding:0 0 2px 0;z-index:10;
}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:100px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
Tabelas de cores do código CSS | |
Índigo | Posição Absolute determina que o objeto fique "fixado" no mesmo local que será configurada nas cordenas de esquerda e direita na cr abaixo |
Verde | Posição do objeto para cima, ou para baixo. Valores maiores, o objeto desce, valores menores o objeto sobe. |
Azul | Posição do objeto para esquerda ou direita. |
Laranja | Lado no qual a tabela ficará (esquerda, direita ou centro). |
Preto | Cor de fundo do objeto flutuante. |
2º - Código HTML fonte de Login:
Vamos ver então, o código ao qual vamos usar e quais alterações poderão ser feitas nele para o gosto do administrador. Vamos aplicar esse código HTML em um widget.
Painel de controle ->> Módulos ->> Portal e Widgets ->> Gestão dos widgets do fórum ->> Criar um widget personalizado ->>
<div id="flutuante">
<div class='sbutton' id='fb'>
<div class="module">
<div class="inner">
<span class="corners-top"><span></span></span>
<div class="h3" style="text-align:left;">Login</div>
<span></span></p><p>
<form action="/login" method="post" name="form_login">
<label for="username"><b>Nome de usuário</b>:</label></dt><dd><input type="text" tabindex="1" name="username" id="username" size="25" maxlength="40" value="" class="inputbox autowidth" /></dd></dl><dl><dt><label for="password"><b>Senha</b>:</label></dt><dd><input type="password" tabindex="2" id="password" name="password" size="25" maxlength="25" class="inputbox autowidth" />
<br></br>
<dd><input type="hidden" name="redirect" value="" /><input type="hidden" name="query" value="" /><input type="submit" name="login" tabindex="6" value="Login" class="button1" /></dd><p>
<a href="/register"><img src ="ENDEREÇO_DA_IMAGEM"/> TEXTO_DE_EXIBIÇÃO</a> - <a href="/profile?mode=sendpassword"><img src ="ENDEREÇO_DA_IMAGEM"/> TEXTO_DE_EXIBIÇÃO</a></p>
</form>
<span class="corners-bottom"><span></span></span></div></div><div style="height:2px"></div></div></div>
Tabelas de cores do código HTML | |
Vermelho escuro | É importante lembrar que estes trechos não devem ser modificados. |
Azul | Nome que localiza-se acima da caixa de texto. É chamada de "Login" e pode ser alterada neste código. |
Verde | Nome que localiza-se abaixo da caixa de texto "Login". Pode ser alterada conforme o administrador desejar. |
Preto | Texto que será exibido junto com uma imagem. Por exemplo: "Ajuda". |
Vermelho | Poderá colocar uma imagem de exibição caso queira. De preferencia, queira colocar uma pequena, por exemplo: ![]() |
Violeta | Endereço das página ao qual o visitante será direcionado após clicar no link. |
- Posso adicionar o cóodigo HTML em outro local?
Sim. Painel de controle ->> Visualização ->> Pagina principal ->> Configuração ->> Conteúdo da mensagem ->>
Pode ser adicionado em uma página HTML caso o administrador queira. - Posso adicionar o cóodigo CSS no mesmo local do HTML?
Sim. Porém, para que o CSS funcione normalmente como se estivesse na folha de estilo CSS é necessário que complemente no começo do código:
<style>SEU_CSS</style> - Resultado esperado:
© Fórum dos Fóruns & Coleman
![]() | Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Caixa de login fixa no fórum |
Luciano98- Membro Proficiente
-
Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049

» [TUTORIAL] Caixa de login ao clicar na barra de ferramentas
» [TUTORIAL] Caixa de login no menu de navegação ao passar o mouse
» Caixa de login no topo do fórum
» Como personalizar a caixa de login no fórum
» [TUTORIAL] Login no topo do fórum
» [TUTORIAL] Caixa de login no menu de navegação ao passar o mouse
» Caixa de login no topo do fórum
» Como personalizar a caixa de login no fórum
» [TUTORIAL] Login no topo do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos