Data/hora atual: 19.03.24 10:33

4 resultados encontrados para submenu

Fazer o Navbar Sticky funcionar

Boas!

Creio que não funcionou pois as classes do seu menu estão diferentes com a do código.
Por exemplo, no código temos:

" // TARGET NODES BY VERSION
// PHPBB2 : .bodyline > table + table
// PHPBB3 : #page-header .navlinks
// PUNBB : #pun-navlinks
// INVISION : #submenu"


E no seu fórum a classe do menu é ".navi". Poderiamos fazer a transição, mas na minha opinião poderia dar Bugs no seu template, isto é, se funcionar.

Quer tentar?
Abraços! Café
por Sennior
em 17.01.18 15:21
 
Procurar em: Questões resolvidas sobre códigos Javascript e jQuery
Tópico: Fazer o Navbar Sticky funcionar
Respostas: 12
Vistos: 1083

Espaço entre tópicos

Aqui está.

Folha de estilo:
por BadCompany
em 06.06.15 18:04
 
Procurar em: Questões resolvidas sobre a aparência do fórum
Tópico: Espaço entre tópicos
Respostas: 5
Vistos: 2927

Problema com separador de mensagens

Aqui está.
Aguardando resposta.

CSS:
por BadCompany
em 27.04.15 18:06
 
Procurar em: Questões resolvidas sobre a aparência do fórum
Tópico: Problema com separador de mensagens
Respostas: 23
Vistos: 2940

Efeito de opacidade nas imagens do menu

Este tutorial irá lhe ensinar como poderá deixar a imagem do menu de navegação do seu fórum com diferentes níveis de cor, variando de uma cor total até uma cor mais opaca. Como o menu principal é um ponto onde muitos membros acedem, é interessante que seja feita algumas modificações no mesmo.



--> Tutoriais e astúcias <--
Efeito de opacidade nas imagens do menu




- Teremos de aceder à "Folha de estilo CSS":
Para que possamos personalizar as caixas de texto do Fórum, é necessário adicionar códigos CSS para criarmos o efeito desejado, sendo assim, teremos de aceder a:
Painel administrativo -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

(clique na imagem para aumentar)
Tópicos com a tag submenu em Fórum dos Fóruns Css11
[table class=table1][tr][td vAlign=top width="30px"]Tópicos com a tag submenu em Fórum dos Fóruns 110111[/td][td]Seta 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 serial a da folha de estilo.[/td][/tr][/table][table class=table1][tr][td vAlign=top width="30px"]Tópicos com a tag submenu em Fórum dos Fóruns 110210[/td][td]Seta 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).[/td][/tr][/table][table class=table1][tr][td vAlign=top width="30px"]Tópicos com a tag submenu em Fórum dos Fóruns 110310[/td][td]Seta 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.[/td][/tr][/table][table class=table1][tr][td vAlign=top width="30px"]Tópicos com a tag submenu em Fórum dos Fóruns 110410[/td][td]Seta 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.[/td][/tr][/table]

Tópicos com a tag submenu em Fórum dos Fóruns Act_bottom Segue a tua versão, pois cada versão tem um código diferente. referimos-nos ás versões: PhpBB 2, PhpBB 3, PunBB e Invision.



- Ter uma noção de CSS para modifcar á opacidade:
Antes de adicionarmos o código, temos de saber o que estamos a personalizar, pois teremos um efeito diferente para cada estado da imagem, um quando a mesma estiver normal e outra quando o mouse estiver sobre ela.

Para que possa compreender como terá de estruturar o seu código, quando após a indicação da classe adicionamos o sufixo:
:hover
Isso indica que este efeito será aplicado quando o mouse estiver sobre a secção envolvida pela classe. Existem outros indicadores além deste demonstrado mas, como não é nosso objetivo agora, ficaremos somente com este.

Para as imagens, iremos utilizar estas propriedades:
filter:alpha(opacity=X);
-moz-opacity: Y;
opacity: Y;

Vermelho -> Deverá definir um valor entre 0 e 100, o 0 será totalmente opaco e o 100 seria a iamgem normal. Esta propriedade funcionará somente para o Internet Explorer 7 ou superior.
Violeta -> Será o valor explicado acima dividido por 100 (entre 0 e 1, sendo que valores intermédios, são por exemplo 0.5), estas propriedades serão responsáveis por aplicar este efeito em navegadores como Mozilla Firefox para a primeira propriedade e para Opera e Internet Explorer 6 ou inferior, etc, para a segunda propriedade.



- Agora deverão copiar o código correspondere à versão:
Tendo em conta a versão, e como as classes variam consoante estas, deverse-à escolher a que se adequa ao Fórum onde será aplicada:

Tópicos com a tag submenu em Fórum dos Fóruns Versio11 PhpBB 2
a.mainmenu img {
propriedades
}
a.mainmenu img:hover {
propriedades
}



Tópicos com a tag submenu em Fórum dos Fóruns Versio12 PhpBB 3
ul.linklist li a img {
propriedades
}
ul.linklist a img:hover {
propriedades
}



Tópicos com a tag submenu em Fórum dos Fóruns Versio15 PunBB
#pun-navlinks ul.clearfix a.mainmenu img {
propriedades
}
#pun-navlinks ul.clearfix a.mainmenu img:hover {
propriedades
}



Tópicos com a tag submenu em Fórum dos Fóruns Versio14 Invision
#submenu ul li a img {
propriedades
}
#submenu ul li a img:hover {
propriedades
}




- Definir o menu apenas com imagens (sem texto):
Para podermos definir um menu disposto apenas por imagens, devemos aceder a:
Painel administrativo -> Visualização -> Home Page -> Cabeçalho & Navegação
E na opção: "Exibir apenas as imagens no menu de navegação", optam pela opção "Sim".



- Vejamos agora um exemplo:
Imaginemos que pretendemos colocar uma Fórum na versão PhpBB 3, com o menu normal com 40% de opacidade e quando estiver o mouse sobre o menu que este esteja 100%, ou seja com a cor real. Neste caso utilizaríamos o código:
ul.linklist li a img {
filter:alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 0.4;
}
ul.linklist a img:hover {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
Por comparação será mais fácil agora construírem o vosso código de forma a poderem dar o efeito de opacidade que pretenderem. Como é óbvio poderão fazer um efeito contrário, o menu ter a cor real e quando o mouse estiver sobre ele, a imagem perder a cor, para isso basta trocar os códigos, definindo para o não hover a opacidade de 100.
Vejamos um exemplo de um tema que dispõe deste efeito:
PHPBB3 Hi-Tech



:copyright: Fórum dos Fóruns



Tópicos com a tag submenu em Fórum dos Fóruns Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Efeito de opacidade nas imagens do menu
por Solkis
em 27.05.09 1:43
 
Procurar em: Topo do fórum
Tópico: Efeito de opacidade nas imagens do menu
Respostas: 0
Vistos: 11492

Ir para o topo

Ir para: