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

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

Ver o CSS da base do seu fórum - Permite o administrador conferir o estilo padrão do CSS do fórum. Mesmo se você tiver aplicado algum código CSS na folha de estilo, esse CSS base não será alterado. Ele mostra os códigos que personalizam seu fórum sem a necessidade do CSS adicional, que no caso seria a da folha de estilo.

Procurar CSS - Com essa ferramenta, podemos fazer uma busca nos códigos existentes na folha de estilo CSS. Por exemplo, se você adicionou algum código na folha de estilo, e pelo fato dela ser muito grande você não estiver encontrando o código desejado, a partir do momento em que digitar o código no campo "Procurar CSS", o código será encontrado (se digitado corretamente).

Desativar o CSS de base - Caso desabilite essa opção, o CSS base do seu fórum será desativado, deixando apenas o CSS da folha de estilo.

Melhorar seu CSS - Com essa função ativa, a capacidade de carregamento da página é aumentada, facilitando a navegação nas páginas de seu fórum. Mas é importante lembrar que, para que a função funcione normalmente como prometida, você terá que adicionar o código correto na folha de estilo.

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

flutuante">

Login

Nome de usuário:

type="text" tabindex="1" name="username" id="username" size="25"
maxlength="40" value="" class="inputbox autowidth"
/>

for="password">Senha:

type="password" tabindex="2" id="password" name="password" size="25"
maxlength="25" class="inputbox autowidth" />

type="hidden" name="redirect" value="" />name="query" value="" />tabindex="6" value="Login" class="button1" />

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] - [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

class="corners-bottom">

style="height:2px">