Início
Curtir
Versões de funcionamento: Todas as versões.
1º Passo - Instalando o estilo com CSS
O CSS é um tipo de código designado ao design e posicionamento, e este não é diferente, na forumeiros você encontra a sua página de edição em Painel de controle > Visualização > Imagens & cores > Cores > Folha de estilo CSS ...
Adicione o código a baixo no topo da folha de estilos CSS.
- Código:
/* Menu de Navegação por D'Leandro™ V1.0 */
#rsrbspo:hover {
background-color: rgba(0, 0, 0, 0.2);
position: relative;
top: 1px;
padding: 12px 5px;
color: #fff;
text-shadow: 0px 0px 1px #fff;
}
#rsrbspo {
position: relative;
top: 1px;
padding: 12px 5px;
margin-right: 5px;
}
#linkshow {
border-left: 1px solid rgba(255, 255, 255, 0.1);
padding: 0px 5px;
height: 15px !important;
margin-right: 5px;
}
#logcrear {
text-align: right;
margin-top: -18px;
}
#navbarflout {
position: absolute;
top: 170px;
left: 100px;
right: 100px;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 16px rgb(0, 0, 0) inset;
padding: 14px 20px;
font-size: 11px;
border-radius: 4px;
}
/* TUTORIAL = (http://staffergroupbr.stuning.net/t1384-menu-de-navegacao-por-d-leandro-v10) */
2º Passo - Criando a barra de login
A "barra de login", assim chamada, é a parte que o usuário não logado pode ver, nela temos o botão para fazer login ou registro, entre outros links.
Vamos criar um novo módulo de Widget para instalar esta parte. Para isto vá em painel de controle > Módulos > Portal & Widgets > Gestão dos widgets do fórum > ...
Crie um novo widget personalizado com as seguintes informações:
Nome do widget: Menu de Navegação por D'Leandro™ V1.0
Utilizar um table type: Não
Título do widget: Menu de Navegação por D'Leandro™ V1.0
Fonte do widget * : Utilize o código a baixo.
Importante: Clique em
e selecione apenas convidados.- Código:
<div id="navbarflout">
<a id="rsrbspo" href="#">Index</a>
<a id="rsrbspo" href="#">Forum</a>
<a id="rsrbspo" href="#">Portal</a>
<a id="rsrbspo" href="#">Membros</a>
<a id="rsrbspo" href="#">Grupos</a>
<a id="rsrbspo" href="#">Perfil Pessoal</a>
<a id="rsrbspo" href="#">Mensagens</a>
<a id="rsrbspo" href="#">Novo Link 01</a>
<a id="rsrbspo" href="#">Novo Link 02</a>
<a id="rsrbspo" href="#">Novo Link 03</a>
<div id="logcrear">
<a id="linkshow" href="/login"><img src="http://i56.servimg.com/u/f56/17/71/75/73/user_l10.png"/> Sign In</a>
<a id="linkshow" href="/register?agreed=true&step=2"><img src="http://i56.servimg.com/u/f56/17/71/75/73/user_r10.png"/> Create Account</a>
</div>
</div>
3º Passo - Criando o menu definitivo
O chamado menu definitivo é formado pelos links visualizados pelos membros já logados no fórum, eles também são totalmente editáveis. Novamente teremos que adicionar um módulo. Para isto vá em painel de controle > Módulos > Portal & Widgets > Gestão dos widgets do fórum > ...
Crie um novo widget personalizado com as seguintes informações:
Nome do widget: Menu de Navegação por D'Leandro™ V1.0
Utilizar um table type: Não
Título do widget: Menu de Navegação por D'Leandro™ V1.0
Fonte do widget * : Utilize o código a baixo.
Importante: Clique em
e Desselecione apenas convidados.- Código:
<div id="navbarflout">
<a id="rsrbspo" href="#">Index</a>
<a id="rsrbspo" href="#">Forum</a>
<a id="rsrbspo" href="#">Portal</a>
<a id="rsrbspo" href="#">Membros</a>
<a id="rsrbspo" href="#">Grupos</a>
<a id="rsrbspo" href="#">Perfil Pessoal</a>
<a id="rsrbspo" href="#">Mensagens</a>
<a id="rsrbspo" href="#">Novo Link 01</a>
<a id="rsrbspo" href="#">Novo Link 02</a>
<a id="rsrbspo" href="#">Novo Link 03</a>
<div id="logcrear">{USERLINK}
<a id="linkshow" href="/login?logout=1"><img src="http://www.breatheheavy.com/exhale/public/style_images/animate/user_login.png"/> Sign Out</a>
</div>
</div>
- Resultado:
(Ao logar-se o menu será alterado)
PRECISA DE SUPORTE?
 | Criador: D'Leandro™ Site: http://staffergroupbr.stuning.net/t1384-menu-de-navegacao-por-d-leandro-v10 |
