Menú igual a este

Item: Menú igual a este
Rating: 1

por Chinas 26.12.12 12:28

Qual é minha questão:
Boas,
É possivel colocar um menú igual a este?

http://www.gfx-art.org/

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

Versão do fórum:
PHPBB2

por Holmes 26.12.12 14:52

Saudações,

Painel de controle ► Visualização ► Cabeça;lho & Navegação
"Exibir apenas as imagens no menu de navegação :" marque "Não".

Para que o menu fique correto não devem haver imagens dos botões nele.

Clique no botão "Salvar".

Painel de controle ► Visualização ► Cores ► Folha de estilo CSS

Esse código deve ser colado no final de sua Folha de estilo CSS:

td.bodyline > table[align="center"][border="0"][cellspacing="0"][cellpadding="0"]{position: absolute; top: 0px; left: 0px; width: 100%;}td.bodyline table[align="center"][border="0"] tbody tr td[align="center"]{ background-color: transparent; background-image: url(https://2img.net/r/hpimg11/pics/592133menubg5.png); border-bottom-color: #888; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-collapse: separate; border-left-color: #888; border-right-color: #888; border-top-color: #888; border-top-left-radius: 10px; border-top-right-radius: 10px; display: block; font-family: Verdana, Arial, Helvetica, sans-serif; height: 43px; margin:0 auto!important; overflow-x: hidden; overflow-y: hidden; padding-bottom: 0px; padding-left: 9px; padding-right: 0px; padding-top: 0px; text-shadow: black 1px 1px 5px;max-width: 700px}

Clique no botão "Salvar".

O efeito da flecha é feito com Javascript e não há suporte para isso.

Assombrosamente.

por Chinas 26.12.12 15:09

Não modificou nada.

por Holmes 26.12.12 15:22

Saudações,

Como não? O cabeçalho está no topo agora, veja se isso resolve.

Painel de controle ► Visualização ► Cores ► Folha de estilo CSS

Substitua por esse CSS:

td.bodyline > table[align="center"][border="0"][cellspacing="0"][cellpadding="0"]{position: fixed; top: 0px; left: 0px; width: 100%;}td.bodyline table[align="center"][border="0"] tbody tr td[align="center"]{ background-color: transparent; background-image: url(https://2img.net/r/hpimg11/pics/592133menubg5.png)!important; border-bottom-color: #888; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-collapse: separate; border-left-color: #888; border-right-color: #888; border-top-color: #888; border-top-left-radius: 10px; border-top-right-radius: 10px; display: block; font-family: Verdana, Arial, Helvetica, sans-serif; height: 43px; margin:0 auto!important; overflow-x: hidden; overflow-y: hidden; padding-bottom: 0px; padding-left: 9px; padding-right: 0px; padding-top: 0px; text-shadow: black 1px 1px 5px;max-width: 700px}

td.bodyline table[align="center"][border="0"] tbody tr td[align="center"]{font-size:0px}

td.bodyline table[align="center"][border="0"] tbody tr td[align="center"] a{display:inline-block;
background: url(https://2img.net/r/hpimg11/pics/154979menuline.png) right -8px no-repeat;
height: 28px;
padding: 3px 3px 8px;font-family: Arial, Helvetica, sans-serif;
font-size: 13px!important;
line-height: 1;
text-shadow: 1px 1px 5px black;color:white;text-align:center;min-width:50px;padding:5px 10px;background-size:auto 60px;}

td.bodyline table[align="center"][border="0"] tbody tr td[align="center"] a:hover{text-decoration:none!important;color:#00ABFF;}

td.bodyline table[align="center"][border="0"] tbody tr td[align="center"] a::first-letter {
color: #B3179C;
font-size: 16px;}

a.mainmenu img{display:none}

Clique no botão "Salvar".

Assombrosamente.

por Chinas 26.12.12 15:28

No meu fórum SW funcionou, no entanto queria aplicar noutro e não funcionou. Versão: phpBB3

por Holmes 26.12.12 15:32

Saudações,

Sempre quando você criar uma questão, coloque no campo link o fórum que você quer personalizar, não há como adivinhar o fórum que você quer personalizar e isso faz com que você e eu percamos nosso tempo com códigos errados.

Peço que passe o link que você quer personalizar e que faça o mesmo em seus outros tópicos, caso haja algum que você tenha colocado o link errado.

Assombrosamente.

por Chinas 26.12.12 15:33

tp-ajuda.forumeiros.com

por Holmes 26.12.12 15:41

Saudações,

Painel de controle ► Visualização ► Cores ► Folha de estilo CSS

Esse código deve ser colado no final de sua Folha de estilo CSS:

#page-header .navbar{background-color:transparent;position: fixed; top: -8px; left: 0px; width: 100%;}#page-header .navbar .linklist.navlinks{ background-color: transparent; background-image: url(https://2img.net/r/hpimg11/pics/592133menubg5.png)!important; border-bottom-color: #888; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-collapse: separate; border-left-color: #888; border-right-color: #888; border-top-color: #888; border-top-left-radius: 10px; border-top-right-radius: 10px; display: block; font-family: Verdana, Arial, Helvetica, sans-serif; height: 43px; margin:0 auto!important; overflow-x: hidden; overflow-y: hidden; padding-bottom: 0px; padding-left: 9px; padding-right: 0px; padding-top: 0px; text-shadow: black 1px 1px 5px;max-width: 700px}

#page-header .navbar{font-size:0px}

#page-header .navbar a.mainmenu{display:inline-block;
background: url(https://2img.net/r/hpimg11/pics/154979menuline.png) right -8px no-repeat;
height: 28px;
padding: 3px 3px 8px;font-family: Arial, Helvetica, sans-serif;
font-size: 13px!important;
line-height: 1;
text-shadow: 1px 1px 5px black;color:white;text-align:center;min-width:50px;padding:10px 10px;background-size:auto 60px;margin:0px!important}

#page-header .navbar a.mainmenu:hover{text-decoration:none!important;color:#00ABFF!important;text-shadow:none!important}

#page-header .navbar a.mainmenu::first-letter {
color: #B3179C;
font-size: 16px;}

a.mainmenu img{display:none}

Clique no botão "Salvar".

Assombrosamente.

por Chinas 26.12.12 17:05

Peço desculpa mas será que me pode indicar outro Menú parecido? É que no no Google, IE e Firefox tem alguns erros.

por Holmes 26.12.12 17:09

- Chinas # O8 ! escreveu:
Peço desculpa mas será que me pode indicar outro Menú parecido? É que no no Google, IE e Firefox tem alguns erros.

Poderia listar esse erros ou postar uma imagem mostrando?

Assombrosamente.

por Chinas 26.12.12 17:16

Em todos os navegadores aparece este erro:

No IE ele fica transparente. Que eu saiba não há mais nenhum.

por Holmes 26.12.12 17:27

Saudações,

Use esse CSS:

#page-header .navbar{background-color:transparent;position: fixed; top: -8px; left: 0px; width: 100%;}#page-header .navbar .linklist.navlinks{ background-color: transparent; background-image: url('https://2img.net/r/hpimg11/pics/592133menubg5.png')!important; border-bottom-color: #888; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-collapse: separate; border-left-color: #888; border-right-color: #888; border-top-color: #888; border-top-left-radius: 10px; border-top-right-radius: 10px; display: block; font-family: Verdana, Arial, Helvetica, sans-serif; height: 43px; margin:0 auto!important; overflow-x: hidden; overflow-y: hidden; padding-bottom: 0px; padding-left: 9px; padding-right: 0px; padding-top: 0px; text-shadow: black 1px 1px 5px;max-width:1100px}

#page-header .navbar{font-size:0px}

#page-header .navbar a.mainmenu{display:inline-block;
background: url(https://2img.net/r/hpimg11/pics/154979menuline.png) right -8px no-repeat;
height: 28px;
padding: 3px 3px 8px;font-family: Arial, Helvetica, sans-serif;
font-size: 13px!important;
line-height: 1;
text-shadow: 1px 1px 5px black;color:white;text-align:center;min-width:50px;padding:10px 10px;background-size:auto 60px;margin:0px!important}

#page-header .navbar a.mainmenu:hover{text-decoration:none!important;color:#00ABFF!important;text-shadow:none!important}

#page-header .navbar a.mainmenu::first-letter {
color: #B3179C;
font-size: 16px;}

a.mainmenu img{display:none}

Sobre a transparência no IE, eu não sei dizer o porque do erro ocorrer, é comum vários erros ocorrerem no IE, por isso ele é o pior navegador.

Assombrosamente.

por Chinas 26.12.12 17:33

Muito obrigado pela paciência. só uma última coisa, onde mudo o roxo para azul?

por Holmes 26.12.12 17:40

Saudações,

Use esse CSS:

#page-header .navbar{background-color:transparent;position: fixed; top: -8px; left: 0px; width: 100%;}#page-header .navbar .linklist.navlinks{ background-color: transparent; background-image: url('https://2img.net/r/hpimg11/pics/592133menubg5.png')!important; border-bottom-color: #888; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-collapse: separate; border-left-color: #888; border-right-color: #888; border-top-color: #888; border-top-left-radius: 10px; border-top-right-radius: 10px; display: block; font-family: Verdana, Arial, Helvetica, sans-serif; height: 43px; margin:0 auto!important; overflow-x: hidden; overflow-y: hidden; padding-bottom: 0px; padding-left: 9px; padding-right: 0px; padding-top: 0px; text-shadow: black 1px 1px 5px;max-width:1100px}

#page-header .navbar{font-size:0px}

#page-header .navbar a.mainmenu{display:inline-block;
background: url(https://2img.net/r/hpimg11/pics/154979menuline.png) right -8px no-repeat;
height: 28px;
padding: 3px 3px 8px;font-family: Arial, Helvetica, sans-serif;
font-size: 13px!important;
line-height: 1;
text-shadow: 1px 1px 5px black;color:white;text-align:center;min-width:50px;padding:10px 10px;background-size:auto 60px;margin:0px!important}

#page-header .navbar a.mainmenu:hover{text-decoration:none!important;color:#00ABFF!important;text-shadow:none!important}

#page-header .navbar a.mainmenu::first-letter {
color: #00ABFF;
font-size: 16px;}

a.mainmenu img{display:none}

Assombrosamente.

por Chinas 26.12.12 17:49

Mais uma vez obrigado. Podem bloquear!

Menú igual a este

Menú igual a este

Re: Menú igual a este

Re: Menú igual a este

Re: Menú igual a este

Re: Menú igual a este

Re: Menú igual a este

Re: Menú igual a este

Re: Menú igual a este

Re: Menú igual a este

Re: Menú igual a este

Re: Menú igual a este

Re: Menú igual a este

Re: Menú igual a este

Re: Menú igual a este

Re: Menú igual a este