Início
![[TUTORIAL] Adiciocando um novo menu do forum (CSS Menu Maker) Index_12](https://i.servimg.com/u/f66/15/86/37/09/index_12.png) | [TUTORIAL] Adiciocando um novo menu do forum (CSS Menu Maker) |
Olá pessoal, muitos membros daqui do forum, perguntaram se tem como colocar algum menú do CSS Menu Maker no forúm PARA PHPBB3 alguns falaram que não tem como colocar, pois nescessita de edição de template, outros tentarm fazer, chegaram a metade e desistiram, então ninguem mais tocou no assunto. então eu hoje vou estar ensinando a como colocar se próprio Menu no forúm PHPBB3. Espero que gostem...^^
![[TUTORIAL] Adiciocando um novo menu do forum (CSS Menu Maker) Act_bottom](https://2img.net/h/forumeiros.com/i/img/act_bottom.png) |
|
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Adiciocando um novo menu do forum (CSS Menu Maker)
[TUTORIAL] Adiciocando um novo menu do forum (CSS Menu Maker)
1º - Criando seu menu...
Primeiramente vá ao site do CSS Menu maker clicando AQUI. Após isso selecione o estilo do menu que você quer, clique sobre ele e depois clique em customize. A criação do menu é facil, o estilo de navegação é drag and drop o que facilita E MUITO a nossa vida. Crie dois menus com o mesmo estilo, um para quando o membo estiver logado (conectado) e outro para quando o membro estiver deslogado (desconectado). Segue abaixo o padrão:
Desconectado:
Portal >> Forúm >> FAQ >> Membros >> Grupos >> Buscar >> Registrar-se >> Entrar.
Conectado:
Portal >> Forúm >> FAQ >> Membros >> Grupos >> Buscar >> Perfil >> MPs >> Sair.
2º - Apagando o menu antigo e instalando o novo...
Vá em:
Nome do widget : Coloque MyMenu2;Módulos > Portal e Widgets > Gestão dos Widgets do Forúm >> Criar um Widget personalizado.
Utilizar um table type : Marque Não;
Título do widget : Não coloque nada aqui;
Fonte do widget * : Siga os passos abaixo:
Podemos ver quando estamos montando o menu, que tem 3 abas na área de visualização:
![[TUTORIAL] Adiciocando um novo menu do forum (CSS Menu Maker) Imgct](https://2img.net/r/ihimizer/img854/7417/imgct.png)
Vamos primeiro montar o menu para quem está logado. Em Fonte do widget * : cole o código abaixo:
- CLIQUE AQUI PARA VER:
- Código:
<center><script>
jQuery(document).ready(function(){
jQuery(".linklist.navlinks").remove();
jQuery('#search-box').before("HTML DO MENU");
});
</script>
<style>
CSS DO MENU
</style></center>
Onde está escrito HTML DO MENU iremos trocar pelo conteúdo do código que está na aba HTML (ex: img acima). Onde está escrito CSS DO MENU iremos trocar pelo conteúdo do código que está na aba CSS (ex: img acima).
No caso o meu ficou assim:
- CLIQUE AQUI PARA ABRIR:
- Código:
<center><script>
jQuery(document).ready(function(){
jQuery(".linklist.navlinks").remove();
jQuery('#search-box').before("<div id='cssmenu'><ul><li><a href='/portal'><span>Portal</span></a></li><li class='active has-sub '><a href='/forum'><span>Forum</span></a><ul><li class='has-sub '><a href='#'><span>Sub-Forum1</span></a><ul><li><a href='#'><span>Sub-SubForum1</span></a></li> <li><a href='#'><span>Sub-SubForum2</span></a></li></ul></li><li class='has-sub '><a href='#'><span>Sub-Forum2</span></a><ul><li><a href='#'><span>Sub-SubForum3</span></a></li><li><a href='#'><span>Sub-SubForum4</span></a></li></ul></li></ul></li><li><a href='/faq'><span>F.A.Q.</span></a></li><li><a href='/memberlist'><span>Membros</span></a></li> <li><a href='/groups'><span>Grupos</span></a></li><li><a href='/search'><span>Buscar</span></a></li><li><a href='/profile?mode=editprofile'><span>Perfil</span></a></li><li><a href='/privmsg?folder=inbox'><span>MPs</span></a></li><li><a href='/login?logout'><span>Sair</span></a></li></ul></div>");
});
</script>
<style>
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
height: 49px;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
border-bottom: 2px solid #71b00c;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
color: #ffffff;
display: inline-block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 49px;
padding: 0 20px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul {
float: left;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #71b00c;
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#cssmenu > ul > li:hover > a {
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #71b00c;
border-bottom: 1px dotted #aad06d;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
background: #528009;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #528009;
border-bottom: 1px dotted #97b36b;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #345105;
}
</style></center>
Salve o WIDGET!
Após salvar clique no botão destacado na img:
![[TUTORIAL] Adiciocando um novo menu do forum (CSS Menu Maker) Imgco](https://2img.net/r/ihimizer/img507/1790/imgco.png)
Marque as autorizações somente para Administradores > Moderadores > Membros. Deixe Convidados desmarcado!
Após isso é só salvar!
Pronto, já deletamos o menu antigo e já adicionamos o novo, mas para os convidados, o antigo aind está aparecendo, oq fazemos?
Simples, edite seu menu (no próprio CSS Menu Maker) para ficar com as abas só para os convidados, (se não sabe quais são as abas visivei para os convidados, volte para o topo desse passo). Após isso repita os passos acima, e mude só o seguinte:
Ná hora de mudar as autorizações, Marque somente para Convidados e Salve!
No meu caso, meu menu só para convidados ficou assim:
- CLIQUE AQUI PARA ABRIR:
- Código:
<center><script>
jQuery(document).ready(function(){
jQuery(".linklist.navlinks").remove();
jQuery('#search-box').before("<div id='cssmenu'><ul><li><a href='/portal'><span>Portal</span></a></li><li class='active has-sub '><a href='/forum'><span>Forum</span></a><ul><li class='has-sub '><a href='#'><span>Sub-Forum1</span></a><ul><li><a href='#'><span>Sub-SubForum1</span></a></li> <li><a href='#'><span>Sub-SubForum2</span></a></li></ul></li><li class='has-sub '><a href='#'><span>Sub-Forum2</span></a><ul><li><a href='#'><span>Sub-SubForum3</span></a></li><li><a href='#'><span>Sub-SubForum4</span></a></li> </ul></li></ul></li><li><a href='/faq'><span>F.A.Q.</span></a></li><li><a href='/memberlist'><span>Membros</span></a></li><li><a href='/groups'><span>Grupos</span></a></li><li><a href='/search'><span>Buscar</span></a></li> <li><a href='/register'><span>Registrar-se</span></a></li><li><a href='/login'><span>Entrar</span></a></li></ul></div>");
});
</script>
<style>
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
height: 49px;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
border-bottom: 2px solid #71b00c;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
color: #ffffff;
display: inline-block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 49px;
padding: 0 20px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul {
float: left;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #71b00c;
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#cssmenu > ul > li:hover > a {
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #71b00c;
border-bottom: 1px dotted #aad06d;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
background: #528009;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #528009;
border-bottom: 1px dotted #97b36b;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #345105;
}
</style></center>
Salve TUDO!!
3º - Resultado...
![[TUTORIAL] Adiciocando um novo menu do forum (CSS Menu Maker) Imgcz](https://2img.net/r/ihimizer/img833/1363/imgcz.png)
Lembrando que esse é so o menu que eu fiz, o seu pode ser qualquer outro.
- Funciona em quais versões?
POR ENQUANTO PHPBB3
© SH-Skins
![[TUTORIAL] Adiciocando um novo menu do forum (CSS Menu Maker) Act_bottom](https://www.forumeiros.com/i/img/act_bottom.png) | Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Adiciocando um novo menu do forum (CSS Menu Maker) |
![[TUTORIAL] Adiciocando um novo menu do forum (CSS Menu Maker) Vote_lcap](https://2img.net/i/fa/prosilver_grey/vote_lcap.png){kind=small}
![[TUTORIAL] Adiciocando um novo menu do forum (CSS Menu Maker) Voting_bar](https://2img.net/i/fa/prosilver_grey/voting_bar.png){kind=small}
![[TUTORIAL] Adiciocando um novo menu do forum (CSS Menu Maker) Vote_rcap](https://2img.net/i/fa/prosilver_grey/vote_rcap.png){kind=small}