Rpg Maker BRasil
RPG Maker Brasil - RMBR

Seja Bem vindo ao Forúm! Faça seu cadastro e desfrute sobre o mundo do RPG Maker!
P.S.: PARA MELHOR VIZUALIZAÇÃO DO FORUM SEM BUGS, RECOMENDO QUE USEM O MOZILLA FIREFOX OU O GOOGLE CHROME!
Rpg Maker BRasil

Evoluindo cada vez mais!


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

HenRyqUéè

avatar
Administrador
Avaliador
Helper

[Você precisa estar registrado e conectado para ver esta imagem.]

[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 [Você precisa estar registrado e conectado para ver este link.] 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...^^

[Você precisa estar registrado e conectado para ver esta imagem.]

CRÉDITOS!

HenRyqUéè - Criador do code.
SPDesign & RMBR
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Adiciocando um novo menu do forum (CSS Menu Maker)


- Criando seu menu...
Primeiramente vá ao site do CSS Menu maker clicando [Você precisa estar registrado e conectado para ver este link.]. 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.


- Apagando o menu antigo e instalando o novo...
Vá em:

Módulos > Portal e Widgets > Gestão dos Widgets do Forúm >> Criar um Widget personalizado.
Nome do widget : Coloque MyMenu2;
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:
[Você precisa estar registrado e conectado para ver esta imagem.]

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>
Dica: o código HTML vem cheio de "enter's" e espaços, então use a tecla del para ir retirando todos eles e evitar erros futuros.

Salve o WIDGET!

Após salvar clique no botão destacado na img:
[Você precisa estar registrado e conectado para ver esta imagem.]

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!!


- Resultado...
[Você precisa estar registrado e conectado para ver esta imagem.]
Lembrando que esse é so o menu que eu fiz, o seu pode ser qualquer outro.

  • Funciona em quais versões?
    POR ENQUANTO PHPBB3




© RMBR & SPDesign


[Você precisa estar registrado e conectado para ver esta imagem.] Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[DÚVIDA] Adiciocando um novo menu do forum (CSS Menu Maker)

http://rmbr.forumeiros.com/

Montillo

avatar
Designer
Vlw.. Nao Tava Sabendo como por

Arikarindokuta

avatar
Iniciante
obrigado eu estava procurando isso vlw msm



[Você precisa estar registrado e conectado para ver esta imagem.]

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum