Detalhes da questão

Endereço do fórum: http://cronicasre.forumeiros.com
Versão do fórum: Invision

Descrição

Bom dia. Eu abri o meu fórum à poucos dias e estou personalizando a aparência dele, o problema é que não sei nada de html ou código CSS. Eu gostaria de colocar esse menu no meu fórum, mas não sei como vincular cada link ao respectivo botão, com o início na casa e o botão busca direto no campo de texto. Eu também quero que, cada vez que alguém passe o mouse sobre um dos botões, que ele escureça como o botão "calendário".



Alguém pode me ajudar? Obrigado.

Olá @br.uno,

Poderia nos ceder o Fórum que viu o tal efeito?

Cordialmente,
GSCode - Best Skins.

Olá @GSCode

Antes de começar a personalizar a aparência do meu fórum, eu tinha instalado o tema "Rock N' Forum 2.0" e, como dá pra ver pela pré-visuaização, os botões do menu ganham um 'highlight' quando o mouse passa por eles. eu tirei esse efeito, então consigo te adiantar qual é o CSS Code dele:

Código:

a:hover{background-color:#F9D838;color:black!important;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;padding:5px}

ele tá no final da primeira linha da folha de estilos.

obrigado!

Olá!

Mas o senhor viu esse menu aplicado em algum fórum? Se sim, poderia fornecer o link?
Isso nos ajudaria com o desenvolvimento rápido de sua questão.

Até mais.

Olá, @RafaelS.

eu vi nesse fórum: www.novaerarpg.com

não é exatamente igual, mas acredito que o princípio seja o mesmo.

obrigado.

Olá amigo!

Não é nada igual, vendo pela aparência. Eu acho que não entendi
Você deseja personalizar o seu menu, ou saber como vincular os links do menu?

Até mais.

Olá,

eu desejo vincular os links no menu que eu coloquei no primeiro post,

e que os botões tenham o efeito que está sobre o calendário, que é, pelo que eu entendi, chamado de hover. o código que eu postei do tema "rock n' forum" faz isso com menu. eu deixei o link para a prévia do tema também, não sei se vocês virem. acho que dá para vocês entenderem o que eu quero de forma mais clara.

obrigado!

Olá @br.uno

Agora eu entendi, mas vamos separar as dúvidas por tópico, okay? Pois são dúvidas diferentes. Peço que crie um novo tópico para depois adicionar o efeito hover.

Bom quanto vincular os links é através do painel de controle, leia esta FAQ:
https://ajuda.forumeiros.com/t16325-

Até mais.

bom dia @RafaelS.

obrigado pela ajuda, eu já tinha visto a opção de colocar as imagens. foi bom ter certeza de que funcionariam, mas aconteceu o que eu imaginei: os botões não ficaram juntos, mas espaçados, e a busca não é feita direta no campo botão, mas ela serve apenas para abrir a busca real. você sabe como arrumar essas duas coisas?

obrigado.

Olá Bruno!

Vamos por partes... acrescente esse CSS:

Código:

#submenu ul li a {
margin-left: -15px !important;
}

Até mais.

Olá Mateus!

Muito obrigado pelo código, ficou perfeito! Existe algum outro código que permita mover todos os botões para a esquerda ou direita sem desalinhá-los? Eles ficaram juntos, mas tão mais pra esquerda agora. Me desculpem pedir tantas coisas, mas eu ainda tou aprendendo sobre html e CSS.

EDIT: eu testei o mesmo código, mas movendo os botões para a direita também, e funcionou. Eu só preciso saber se consigo vincular a busca direto no campo do último botão. Se não for, eu penso em outra coisa para o menu.

obrigado!

Olá e boa tarde Bruno!

Fiz algo bem básico, para evitar lag e ser mais prático, adicione em sua CSS:

Código:

   
form[action="/search"] table tbody tr td input.button {z-index: 555;position: relative; top: -45px; left: -75px;opacity: 0; height: 30px; margin-top: -10px;}

 #search_menu {border: none !important;background: none !important;box-shadow: none !important;}
 #search_menu * {border: none !important;background: none !important;color: gray !important }
#search_menu > form > table > tbody > tr:nth-child(3) > td > span, #search_menu > form > table > tbody > tr:nth-child(4) > td > span {display: none }


form[action="/search"] table tbody tr td input.post {z-index: 555;opacity: 1 !important;height: 20px; margin-top: 6px; margin-right: 3px; top: -38px; position: relative; left: -70px; /* display: none; */ width: 120px;}


E crie um novo js, com o investimento em todas as páginas:

Código:

$(function(){
showhide(document.getElementById('search_menu')); document.getElementById("search_menu").style.visibility = "hidden";
});

É normal possíveis erros - apesar de nos testes funcionar perfeitamente.
Qualquer coisa, basta reportar!

Olá mateus,

desculpa a demora em responder. funcionou, muito obrigado!

podem trancar o tópico.