Botão login / centralizar menu

Item: Botão login / centralizar menu
Rating: 1

por Mesuko 30.05.12 23:21

Qual é minha questão:
Eu queria botar um botão de login , onde eu clico e ali abre uma pequena janela para logar. Numero 2 na imagem.

E queria centralizar aquele Menu. Imagem numero 1

Medidas que eu tomei para corrigir o problema:
---

Links e imagens do meu problema:
https://i.imgur.com/HJFZh.jpg

Endereço do meu fórum:
http://WorldZumbie.forumeiro.com

Versão do meu fórum:

por Sr.pepek 30.05.12 23:27

Olá ,

Painel De Controle > Visualização > Pagina Inicial > Cabeçalho & Estrutura .

Posição do menu :
"Centralizar"

por Josh 30.05.12 23:36

Boa noite,

Senhor Mesuko, leia o conteúdo do spoiler por favor:

Spoiler:

Botão login / centralizar menu Permissions

Caixa de login

Neste tutorial iremos aprender a abrir uma caixa de login rápida, que funcionará passando o mouse sobre o botão "Entrar" do menu de navegação do vosso fórum.

--> Tutoriais, dicas e astúcias <--
Caixa de login no menu de navegação ao passar o mouse

1º - Código utilizado:

Código:: $(function(){$('#search-box').before(' ');$('.user_login_form').closest('.panel').addClass('loginPanel');$('input.button1[name="post"]').closest('.panel').removeClass('row2').addClass('loginPanel');$('.left-box').closest('.panel').addClass('introduction');$('a.mainmenu[href="/login"]').hover(function(){$('.quick_connex').remove();$('<div class="quick_connex panel introduction"><img class="connec_close" src="http://2img.net/i/fa/fdf3/suppri12.png" alt="(X)" title="Fechar caixa" onclick="$(\'.quick_connex\').remove();" /><form name="form_login" method="post" action="/login"><dl><dt><label for="username">Nickname:</label></dt><dd><input type="text" class="inputbox autowidth" value="" maxlength="40" size="25" id="username" name="username" tabindex="1"></dd></dl><dl><dt><label for="password">Senha:</label></dt><dd><input type="password" class="inputbox autowidth" maxlength="25" size="25" name="password" id="password" tabindex="2"></dd></dl><dl><dt> </dt><dd><input type="hidden" value="" name="redirect"><input type="hidden" value="" name="query"><input type="submit" class="button1" value="Conectar" tabindex="6" name="login"></dd></dl></form></div>').appendTo('.navbar')})})

2º - Páginas .JS:
Para prosseguirmos com o tutorial, teremos de utilizar um código JavaScript para efetuar as modificações da caixa:
Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts

Sobre o título, escreva o que desejar, não afetará em nada, o investimento selecione "Em todas as páginas" para que não apresente erros e em "Código JavaScript" será o campo destinado a receber o código JavaScript e jQuery, que trabalhamos no item anterior.

3º - Código para folha de estilo CSS:
Agora, para finalizar vamos aplicar um CSS para personalizar a caixa, apesar que o código JS ela já funcionar.
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilos CSS

.quick_connex{
box-shadow:0 0 10px!important;
padding:5px;
position:absolute;
right:200px;
top:185px;
width:160px
}

.quick_connex .connec_close{
bottom:3px;
float:right;
left:5px;
position:relative
}