Como personalizar o menu assim

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

Resolvido Como personalizar o menu assim

Mensagem por Apple' em 01/04/14, 08:51 pm

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, 01:44 pm, editado 1 vez(es)
avatar

Apple'
Membro do Fórum

Masculino
Inscrito dia : 25/02/2013
Mensagens : 1020
Pontos Ativos : 1442

Ver perfil do usuário http://heroesofolympus.forumeiros.com/

Resolvido Re: Como personalizar o menu assim

Mensagem por SC.Sheldon em 01/04/14, 09:55 pm

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;
}
avatar

SC.Sheldon
Nível 4

Masculino
Inscrito dia : 01/04/2014
Mensagens : 27
Pontos Ativos : 33

Ver perfil do usuário http://www.suportecommunity.com.br/

Resolvido Re: Como personalizar o menu assim

Mensagem por Apple' em 02/04/14, 12:38 pm

Desculpe amigo, mais não funcionou
avatar

Apple'
Membro do Fórum

Masculino
Inscrito dia : 25/02/2013
Mensagens : 1020
Pontos Ativos : 1442

Ver perfil do usuário http://heroesofolympus.forumeiros.com/

Resolvido Re: Como personalizar o menu assim

Mensagem por Alex Habilidade em 02/04/14, 07:37 pm

Olá Chrome,

Poderia nos fornece a sua folha CSS?
avatar

Alex Habilidade
Usuário experiente

Masculino
Inscrito dia : 10/01/2011
Mensagens : 2795
Pontos Ativos : 3774

Ver perfil do usuário http://www.gzhabilidade.com/

Resolvido Re: Como personalizar o menu assim

Mensagem por SC.Sheldon em 02/04/14, 09:18 pm

Passe sua CSS

até
avatar

SC.Sheldon
Nível 4

Masculino
Inscrito dia : 01/04/2014
Mensagens : 27
Pontos Ativos : 33

Ver perfil do usuário http://www.suportecommunity.com.br/

Resolvido Re: Como personalizar o menu assim

Mensagem por Apple' em 02/04/14, 10:05 pm

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;
}
avatar

Apple'
Membro do Fórum

Masculino
Inscrito dia : 25/02/2013
Mensagens : 1020
Pontos Ativos : 1442

Ver perfil do usuário http://heroesofolympus.forumeiros.com/

Resolvido Re: Como personalizar o menu assim

Mensagem por SC.Sheldon em 02/04/14, 10:30 pm

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
avatar

SC.Sheldon
Nível 4

Masculino
Inscrito dia : 01/04/2014
Mensagens : 27
Pontos Ativos : 33

Ver perfil do usuário http://www.suportecommunity.com.br/

Resolvido Re: Como personalizar o menu assim

Mensagem por Apple' em 03/04/14, 12:56 pm

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

Apple'
Membro do Fórum

Masculino
Inscrito dia : 25/02/2013
Mensagens : 1020
Pontos Ativos : 1442

Ver perfil do usuário http://heroesofolympus.forumeiros.com/

Resolvido Re: Como personalizar o menu assim

Mensagem por BrunoH. em 03/04/14, 11:09 pm

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

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Como personalizar o menu assim

Mensagem por Apple' em 04/04/14, 02:39 pm

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

Apple'
Membro do Fórum

Masculino
Inscrito dia : 25/02/2013
Mensagens : 1020
Pontos Ativos : 1442

Ver perfil do usuário http://heroesofolympus.forumeiros.com/

Resolvido Re: Como personalizar o menu assim

Mensagem por Alex Habilidade em 04/04/14, 09:15 pm

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;
    }
avatar

Alex Habilidade
Usuário experiente

Masculino
Inscrito dia : 10/01/2011
Mensagens : 2795
Pontos Ativos : 3774

Ver perfil do usuário http://www.gzhabilidade.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

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