Menu de acesso

Qual é minha questão:


Olá, gostaria de saber qual o codigo para fazer um menu de acesso igual este do forum abaixo. Obrigado!



http://mermora-online.forumeiros.com/

Endereço do meu fórum:
Www.jogodostronos.forumeiros.com

Versão do fórum:
PHPBB3

olá este é o codigo

Código:

<div class="panel introduction"><div class="inner"><span class="corners-top"><span></span></span><div class="h3">Menu de acesso</div><div class="mes-txt"><div style="width: 500px; padding: 15px; margin: 0 auto; background-color: #616161;">

<style type="text/css">.anotaciones {float:right; width:160px; font-family: 'Gentium Basic', serif; font-size:12px; text-align: center; background-color: #101010; border: 2px #616161 solid; padding-top:3px; padding:3px; color: #101010; text-transform: uppercase; overflow: hidden; -moz-transition:all 1.5s ease-in-out; -webkit-transition:all 1s ease-in-out; } .anotaciones:hover {float:right; width:160px; font-family: 'Gentium Basic', serif; font-size:12px; text-align: center; background-color: #616161; border: 2px #101010 solid; color: #101010; padding-top:3px; padding:3px; text-transform: uppercase; -moz-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; } </style><div class="anotaciones"><a href="http://mermora-online.forumeiros.com/t6-regras-provisorio">Regras</a></div><div class="anotaciones"><a href="http://mermora-online.forumeiros.com/t3-classes-do-jogo">Classes</a></div><div class="anotaciones"><a href="http://mermora-online.forumeiros.com/t2-atributos-e-pontos">Atributos</a></div><div class="anotaciones"><a href="http://mermora-online.forumeiros.com/t9-trama-e-enredo">História</a></div><div class="anotaciones"><a href="http://mermora-online.forumeiros.com/t5-requisitos-minimos-em-uma-ficha-de-personagem#5">Ficha de Personagem</a></div><div class="anotaciones"><a href="http://mermora-online.forumeiros.com/t10-pericias-e-habilidades">Perícias e Habilidades</a></div><div style="text-align: center; font-size: 40px; font-family: 'Gentium Basic', cursive; color: #A2A496; text-transform:uppercase; letter-spacing: 2px; padding-bottom:5px;">Menu</div><div style="text-align: center; font-size: 34px; font-family: Gentium Basic', cursive; color: #5F6553; text-transform:uppercase; letter-spacing: 2px; padding-bottom:5px;"> de Acesso </div>

</div></div><span class="corners-bottom"><span></span></span></div></div>

Olá,. funcionou perfeitamente. Mas voce pode me ajudar em outra coisa? Eu queria saber o que pode ser alterado nesse codigo. O que é imagem e etc. Brigado

Saudações senhor!

O código CSS é este:

Código:

.anotaciones {float:right; width:160px; font-family: 'Gentium Basic', serif; font-size:12px; text-align: center; background-color: #363636; border: 2px #4F4F4F solid; padding-top:3px; padding:3px; color: #4F4F4F; text-transform: uppercase; overflow: hidden; -moz-transition:all 1.5s ease-in-out; -webkit-transition:all 1s ease-in-out; } .anotaciones:hover {float:right; width:160px; font-family: 'Gentium Basic', serif; font-size:12px; text-align: center; background-color: #8B6914; border: 2px #101010 solid; color: #8B4513; padding-top:3px; padding:3px; text-transform: uppercase; -moz-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; }

O senhor poderá implementa-lo em sua folha de estilo CSS.

Para isto, aceda à sua "Folha de estilo CSS": Painel de Controle Visualização Imagens e Cores Cores Aba 'Folha de estilo CSS'

Para modificar o estilo do 'menu de acesso', é pelo código CSS que lhe indiquei acima. Basta usar sua criatividade e modificar como desejado.

Atenciosamente!

Eu coloquei ele na mensagem de inicio do forum e os widget sumiram. Como posso colocar o menu e os widgetS?

Saudações novamente senhor!

Adentrei em seu fórum e os widgets constam em meu navegador. Poderia enviar-nos uma print screen? No caso, lhe aconselho limpar o seu cachê e/ou adentrar por outro navegador.

Substitua o código passado pelo nosso amigo, por este:

Código:

<div class="panel introduction"><div class="inner"><div class="h3">Menu de acesso</div><div class="mes-txt"><div style="width: 500px; padding: 15px; margin: 0 auto; background-color: #616161;">

<div class="anotaciones"><a href="http://mermora-online.forumeiros.com/t6-regras-provisorio">Regras</a></div><div class="anotaciones"><a href="http://mermora-online.forumeiros.com/t3-classes-do-jogo">Classes</a></div><div class="anotaciones"><a href="http://mermora-online.forumeiros.com/t2-atributos-e-pontos">Atributos</a></div><div class="anotaciones"><a href="http://mermora-online.forumeiros.com/t9-trama-e-enredo">História</a></div><div class="anotaciones"><a href="http://mermora-online.forumeiros.com/t5-requisitos-minimos-em-uma-ficha-de-personagem#5">Ficha de Personagem</a></div><div class="anotaciones"><a href="http://mermora-online.forumeiros.com/t10-pericias-e-habilidades">Perícias e Habilidades</a></div><div style="text-align: center; font-size: 40px; font-family: 'Gentium Basic', cursive; color: #A2A496; text-transform:uppercase; letter-spacing: 2px; padding-bottom:5px;">Menu</div><div style="text-align: center; font-size: 34px; font-family: Gentium Basic', cursive; color: #5F6553; text-transform:uppercase; letter-spacing: 2px; padding-bottom:5px;"> de Acesso </div>

</div></div></div></div>

Mas lembre-se de colocar o código CSS que recomendei em minha mensagem anterior na sua Folha de estilo CSS.

Atenciosamente!

Ok, mas me ensina como troca aquele fundo cinza do menu e troco a cor da letra e do fundo quando o mouse fica por cima.

Saudações novamente!

Modifique o seu CSS para este:

Código:

.anotaciones {float:right; width:160px; font-family: 'Gentium Basic', serif; font-size:12px; text-align: center; background-color: #101010; border: 2px #616161 solid; padding-top:3px; padding:3px; color: #101010; text-transform: uppercase; overflow: hidden; -moz-transition:all 1.5s ease-in-out; -webkit-transition:all 1s ease-in-out; } .anotaciones:hover {float:right; width:160px; font-family: 'Gentium Basic', serif; font-size:12px; text-align: center; background-color: #616161; border: 2px #101010 solid; color: #101010; padding-top:3px; padding:3px; text-transform: uppercase; -moz-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; }

Para a cor cinza, procure no CSS por "#616161" e modifique para a cor desejada. Para a cor da letra, procure no código HTML "#A2A496" e modifique para a cor desejada. Procure por ".anotaciones:hover {" no CSS para modificar a cor e o fundo quando o mouse fica por cima.

Atenciosamente!

Oi, amigo! Então, os widget desceram lá pra baixo da pagina. Ficou desconfigurado... :/

Bem, agora resolveu. Obrigado amigo! E até mais!