Como personalizar o menu assim

4 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Como personalizar o menu assim

Mensagem por Pixar 02.04.14 0:51

Qual é minha questão:
Bem, gostaria de saber como faz um menu assim? :
http://demo.nicetheme.com/forum?theme_id=182355

Obs: Não é por meio de Imagens...

Endereço do meu fórum:
http://heroesofolympus.forumeiros.com

Versão do fórum:
PHPBB2


Última edição por Chrome' em 07.04.14 17:44, editado 1 vez(es)
Pixar

Pixar
Super Membro

Membro desde : 25/02/2013
Mensagens : 1144
Pontos : 1634

http://heroesofolympus.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar o menu assim

Mensagem por SC.Sheldon 02.04.14 1:55

tente
Código:
#page-header .navbar ul.linklist {
border-bottom: 0px;
margin-bottom: -4px;
}
#page-header .navbar ul.navlinks {
width: 962px;
height: 36px;
background: url(http://i49.servimg.com/u/f49/16/79/58/45/ie_nav10.png) 50% 0% no-repeat;
left: -30px;
position: relative;
border-bottom: 0px solid rgb(178, 209, 237);
margin-bottom: -100px;
}
#page-header ul.navlinks {
top: -10px;
position: relative;
}
#page-footer, div.navbar, div.navbar ul.linklist {
display: block !important;
}
ul.navlinks {
border-bottom: 1px solid rgb(255, 208, 158);
font-weight: 700;
text-align: center;
}
SC.Sheldon

SC.Sheldon
Novo Membro

Membro desde : 02/04/2014
Mensagens : 27
Pontos : 33

http://www.suportecommunity.com.br/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar o menu assim

Mensagem por Pixar 02.04.14 16:38

Desculpe amigo, mais não funcionou
Pixar

Pixar
Super Membro

Membro desde : 25/02/2013
Mensagens : 1144
Pontos : 1634

http://heroesofolympus.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar o menu assim

Mensagem por Alex Habilidade 02.04.14 23:37

Olá Chrome,

Poderia nos fornece a sua folha CSS?
Alex Habilidade

Alex Habilidade
Hiper Membro

Membro desde : 10/01/2011
Mensagens : 2795
Pontos : 3774

http://www.gzhabilidade.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar o menu assim

Mensagem por SC.Sheldon 03.04.14 1:18

Passe sua CSS

até
SC.Sheldon

SC.Sheldon
Novo Membro

Membro desde : 02/04/2014
Mensagens : 27
Pontos : 33

http://www.suportecommunity.com.br/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar o menu assim

Mensagem por Pixar 03.04.14 2:05

Código:
.bodyline {
-moz-box-shadow: 0px 3px 20px #000000;
-webkit-box-shadow: 0px 3px 20px #000000;
}

a:link,a:active,a:visited {
text-decoration: none;
}


    blockquote {
    border: 2px solid #000000;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    }
.post {
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    }
.button2, .button3{
    border: 2px solid #000000;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    }

    cite {
    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
    }

    .spoiler {
    border: 2px solid #000000;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    }

    .spoiler dt {
    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
    }
    .button2{-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}.codebox{-moz-border-radius:10px;-webkit-  border-radius:10px;border-radius:10px}

a.mainmenu img {
filter:alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 0.4;
}
a.mainmenu img:hover {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}

a:hover {
color: #0000FF;
text-shadow : 0px 0px 15px #000000;
}

/*Menu*/
#page-header .navbar ul.linklist {
border-bottom: 0px;
margin-bottom: -4px;
}
#page-header .navbar ul.navlinks {
width: 962px;
height: 36px;
background: url(http://i49.servimg.com/u/f49/16/79/58/45/ie_nav10.png) 50% 0% no-repeat;
left: -30px;
position: relative;
border-bottom: 0px solid rgb(178, 209, 237);
margin-bottom: -100px;
}
#page-header ul.navlinks {
top: -10px;
position: relative;
}
#page-footer, div.navbar, div.navbar ul.linklist {
display: block !important;
}
ul.navlinks {
border-bottom: 1px solid rgb(255, 208, 158);
font-weight: 700;
text-align: center;
}
Pixar

Pixar
Super Membro

Membro desde : 25/02/2013
Mensagens : 1144
Pontos : 1634

http://heroesofolympus.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar o menu assim

Mensagem por SC.Sheldon 03.04.14 2:30

Substitua por
Código:
.bodyline {
-moz-box-shadow: 0px 3px 20px #000000;
-webkit-box-shadow: 0px 3px 20px #000000;
}

a:link,a:active,a:visited {
text-decoration: none;
}


    blockquote {
    border: 2px solid #000000;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    }
.post {
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    }
.button2, .button3{
    border: 2px solid #000000;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    }

    cite {
    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
    }

    .spoiler {
    border: 2px solid #000000;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    }

    .spoiler dt {
    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
    }
    .button2{-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}.codebox{-moz-border-radius:10px;-webkit-  border-radius:10px;border-radius:10px}

a.mainmenu img {
filter:alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 0.4;
}
a.mainmenu img:hover {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}

a:hover {
color: #0000FF;
text-shadow : 0px 0px 15px #000000;
}

/*Menu*/
#page-header .navbar ul.linklist {
border-bottom: 0px;
margin-bottom: -4px;
}
#page-header .navbar ul.navlinks {
width: 962px;
height: 36px;
background: url(http://i49.servimg.com/u/f49/16/79/58/45/ie_nav10.png) 50% 0% no-repeat;
left: -30px;
position: relative;
border-bottom: 0px solid rgb(178, 209, 237);
margin-bottom: -100px;
}
#page-header ul.navlinks {
top: -10px;
position: relative;
}
#page-footer, div.navbar, div.navbar ul.linklist {
display: block !important;
}
ul.navlinks {
border-bottom: 1px solid rgb(255, 208, 158);
font-weight: 700;
text-align: center;
}
#page-header .navbar ul.navlinks {
width: 962px;
height: 36px;
background: url('http://i49.servimg.com/u/f49/16/79/58/45/ie_nav10.png') no-repeat top center;
left: -30px;
position: relative;
border-bottom: 0px solid #b2d1ed;
margin-bottom: -100px;
}

Até Mais
SC.Sheldon

SC.Sheldon
Novo Membro

Membro desde : 02/04/2014
Mensagens : 27
Pontos : 33

http://www.suportecommunity.com.br/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar o menu assim

Mensagem por Pixar 03.04.14 16:56

Olá novamente, este CSS proposto pelo senhor, ainda não funcionou...
Pixar

Pixar
Super Membro

Membro desde : 25/02/2013
Mensagens : 1144
Pontos : 1634

http://heroesofolympus.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar o menu assim

Mensagem por BrunoH. 04.04.14 3:09

Olá,

O senhor terá que desativar o menu das imagens e ativar o menu de textos, siga os passos:
CPainel ->> Visualização ->> Página inicial ->> Cabeçalho e navegação
Em "Exibir apenas as imagens no menu de navegação" marque a opção não e salve!

Feito isto, aconselho a retirar as imagens do menu.




Agora podemos adicionar o CSS utilizado no estilo do menu. Aceda a folha de estilo CSS:
Código:
#page-header .navbar ul.navlinks {
width: 962px;
height: 36px;
background: url(http://i49.servimg.com/u/f49/16/79/58/45/ie_nav10.png) 50% 0% no-repeat;
left: -30px;
position: relative;
border-bottom: 0px solid rgb(178, 209, 237);
margin-bottom: -100px;
}
#page-header .navbar ul.linklist li a {
color: rgb(255, 255, 255);
font-size: 13px;
text-align: center;
text-shadow: rgb(85, 85, 85) 0.1em 0px 0.2em;
}
CPainel ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de Estilo CSS

Até mais.

#Título do tópico alterado!
BrunoH.

BrunoH.
Membro Entusiasta

Membro desde : 15/06/2012
Mensagens : 7675
Pontos : 10386

http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar o menu assim

Mensagem por Pixar 04.04.14 18:39

Olá amigo... Infelizmente, não está a funcionar.
Pixar

Pixar
Super Membro

Membro desde : 25/02/2013
Mensagens : 1144
Pontos : 1634

http://heroesofolympus.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar o menu assim

Mensagem por Alex Habilidade 05.04.14 1:15

Olá,

Troque o código passado por este:
Código:

.bodyline table:nth-of-type(2) td {
  background: url("http://i49.servimg.com/u/f49/16/79/58/45/ie_nav10.png") no-repeat scroll center top rgba(0, 0, 0, 0);
    border-bottom: 0 solid #B2D1ED;
    height: 36px;
    left: -30px;
    margin-bottom: -100px;
    position: relative;
  width: 962px;}

.bodyline {
    -moz-box-shadow: 0px 3px 20px #000000;
    -webkit-box-shadow: 0px 3px 20px #000000;
    }
Alex Habilidade

Alex Habilidade
Hiper Membro

Membro desde : 10/01/2011
Mensagens : 2795
Pontos : 3774

http://www.gzhabilidade.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos