Como colocar uma mensagem no banner/logo

por kkmlpk 12.04.15 0:36

Detalhes da dúvida

Versão do fórum : phpBB3
Nível de acesso : Administrador
Navegador usado : Mozilla Firefox
Imagem :

Imagem da minha dúvida:

Membros afetados : Somente comigo
Endereço do fórum : -

Descrição do problema

Eu gostaria de saber como colocar uma mensagem no banner assim como mostra a imagem que, quando passa o mouse pelo banner, o html aparece... https://i.imgur.com/bORl8vM.jpg

por Shaman 12.04.15 0:42

Olá,

Seja bem-vindo ao nosso fórum de Suporte! Como acabou de se inscrever, veja aqui alguns links importantes a saber:

Regras do Fórum, e o que você não deve fazer neste fórum.
Os demais fóruns de Suporte Forumeiros
Lista de Tutoriais e astúcias e Questões frequentes.
Conheça a Staff do Fórum dos Fóruns.
Conheça a função Busca.

Poderia nos fornecer o link de onde viu tal efeito?

Até mais! Muito feliz

por kkmlpk 12.04.15 0:46

http://mythologicalblood.forumeiros.com/

por Sennior 15.04.15 8:20

Boas,

Coloque este código na Home page de teu fórum:

Código:: <style>#tablon { -moz-transition: all 1s ease; -webkit-transition: all 1s ease; height: 270px!important; left: 14.7%; opacity: 0; overflow: hidden; position: absolute; top: 7px; transition: all 1s ease; width: 68.4%; }</style> <div class="mes-txt"> <div id="tablon"> <div style=" width: 908px; height: 290px; margin-top: 20px; margin-left: 20px; background-color: #000000; overflow: hidden;"> <table cellspacing="10px"> <tbody> <tr> <td> <table style=" margin-top: -4px; margin-left: -4px;" cellspacing="4px"> <tbody> <tr> <td> <div style=" width: 20px; height: 336px; overflow: hidden; opacity: 0.999999;"> <div style=" width: 338px; height: 8px; padding-top: 7px; padding-bottom: 7px; margin-left: -160px; margin-top: 110px; margin-right: -1px; margin-bottom: -1px; background-color: #000000; font: 8px Calibri; text-align: center; text-transform: uppercase; letter-spacing: 8px; color: #ffffff; overflow: hidden; opacity: 0.999999; -ms-transform:rotate(270deg); -moz-transform:rotate(270deg); -webkit-transform:rotate(270deg); -o-transform:rotate(270deg);"> Mythological Blood </div> </div> </td> <td> <div style=" width: 415px; height: 336px; overflow: hidden;" class="gossipdivs"> <div style=" width: 407px; height: 328px; border: 4px #000000 solid; overflow: hidden;"> <div style=" width: 407px; height: 328px; border: 2px #000000 solid; margin-top: -2px; margin-left: -2px;"> <img src="http://i.imgur.com/5f5fWqD.png" style=" height: 238px; width: 400px; border: 2px #000000 solid; margin: -2px;" class="gossipimage" /> </div> <div class="gossipinformation" style=" width: 407px; height: 328px; overflow-y: auto; overflow-x: hidden; margin-top: -330px; opacity: 0.999999;"> <div style=" width: 327px; height: 104px; background-color: #000000; text-align: center; text-transform: uppercase; letter-spacing: 0px; color: #ffffff; overflow: hidden; margin-left: 40px; margin-top: 40px;"> <div style=" width: 323px; height: 58px; overflow: hidden; margin: 2px 2px 5px 2px;"> <img src="http://static.tumblr.com/xuynvaq/qgclt0yso/tumblr_lrsbusxmig1qg20evo4_r7_500.gif" style=" width: 327px; -webkit-filter: grayscale(100%); -o-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); margin-top: -15px;" /> </div> <center> <span style=" font: 34px Yanone Kaffeesatz; text-align: center; text-shadow: 1px 0 #090909, -1px 0 #090909, 0 1px #090909, 0 -1px #090909;">Créditos</span> </center> </div> <div style=" width: 287px; height: 70px; padding: 5px 20px; background-color: #000000; text-align: justify; font: 10px Calibri; color: #ffffff; margin-top: 0px; margin-left: 40px; overflow-y: auto; overflow-x: hidden;"> O Mythological Blood RPG agradece à DFRabelo por ter concedido vossa skin para o fórum e servido de suporte para a mesma. Também aos designers customizaram para o uso: Mayu, Virgs e Roger. Todas as imagens utilizadas na parte gráfica foram encontradas no Tumblr, We♥It, Pinterest e Google. Nenhum usuário, convidado, ou tramista/administrador têm direito de levar conteúdos de posse do RPG para fora deste domínio. Caso ocorra, nossos direitos serão proclamados e é protegido pela Creative Commons. © 2015 - Versão 1.0 </div> </div> </div> </div> </td> </tr> </tbody> </table> </td> <td> <table style="margin-top: -4px; margin-left: -8px;" cellspacin="0px"> <tbody> <tr> <td> <div style=" width: 418px; height: 336px; background-color: #090909; overflow-y: auto; overflow-x: hidden;"> <iframe src="http://mythologicalblood.forumeiros.com/h1-awards" style=" border: none; padding: 0px; width: 100%; height: 659px; margin: -4px;" scrolling="no">&lt;p&gt;Awards +81Height por award nuevo.&lt;/p&gt;</iframe> </div> </td> <td> <div style=" width: 20px; height: 336px; overflow: hidden; opacity: 0.999999; margin-top: 0px; margin-left: 2px;"> <div style=" width: 338px; height: 8px; padding-top: 7px; padding-bottom: 7px; margin-left: -158px; margin-top: 110px; margin-right: -1px; margin-bottom: -1px; background-color: #000000; font: 8px Calibri; text-align: center; text-transform: uppercase; letter-spacing: 8px; color: #ffffff; overflow: hidden; opacity: 0.999999; -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg);"> Awards </div> </div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> </div> </div>

Resultou?
Até mais.

por kkmlpk 15.04.15 17:19

Não funcionou, onde eu devo colocar exatamente? Obrigada ^^

por Sennior 15.04.15 17:21

Boa tarde,

Deverá aceder em:
Painel de Controle Visualização Página inicial Geral
Procurar pela home page e colocar o código.
Até mais. Positivo

por kkmlpk 15.04.15 17:30

Ainda não funcionou ;;

por Sennior 16.04.15 7:46

Saudações,

Poderia deixar o código ativo em teu fórum?
Quero ver qual o problema.

Até mais.

por kkmlpk 20.04.15 14:56

Eu consegui esse código, que pelo menos aparece a baixo do banner, mas ainda sim não cria o efeito desejado.

Código:: <center> <div id="tablon-header"> <div id="contenido1"> <br class="clear" /> <div class="panel introduction"> <div class="inner"> <span class="corners-top"><span> <style></style> </span></span> <div style="" class="mes-txt"> <div id="tablon"> <div style=" width: 908px; height: 290px; margin-top: 20px; margin-left: 20px; background-color: #000000; overflow: hidden;"> <table cellspacing="10px"> <tbody> <tr> <td> <table style=" margin-top: -4px; margin-left: -4px;" cellspacing="4px"> <tbody> <tr> <td> <div style=" width: 20px; height: 336px; overflow: hidden; opacity: 0.999999;"> <div style=" width: 338px; height: 8px; padding-top: 7px; padding-bottom: 7px; margin-left: -160px; margin-top: 110px; margin-right: -1px; margin-bottom: -1px; background-color: #000000; font: 8px Calibri; text-align: center; text-transform: uppercase; letter-spacing: 8px; color: #ffffff; overflow: hidden; opacity: 0.999999; -ms-transform:rotate(270deg); -moz-transform:rotate(270deg); -webkit-transform:rotate(270deg); -o-transform:rotate(270deg);"> Mythological Blood </div> </div> </td> <td> <div style=" width: 415px; height: 336px; overflow: hidden;" class="gossipdivs"> <div style=" width: 407px; height: 328px; border: 4px #000000 solid; overflow: hidden;"> <div style=" width: 407px; height: 328px; border: 2px #000000 solid; margin-top: -2px; margin-left: -2px;"> <img src="http://i.imgur.com/5f5fWqD.png" style=" height: 238px; width: 400px; border: 2px #000000 solid; margin: -2px;" class="gossipimage" /> </div> <div class="gossipinformation" style=" width: 407px; height: 328px; overflow-y: auto; overflow-x: hidden; margin-top: -330px; opacity: 0.999999;"> <div style=" width: 327px; height: 104px; background-color: #000000; text-align: center; text-transform: uppercase; letter-spacing: 0px; color: #ffffff; overflow: hidden; margin-left: 40px; margin-top: 40px;"> <div style=" width: 323px; height: 58px; overflow: hidden; margin: 2px 2px 5px 2px;"> <img src="http://static.tumblr.com/xuynvaq/qgclt0yso/tumblr_lrsbusxmig1qg20evo4_r7_500.gif" style=" width: 327px; -webkit-filter: grayscale(100%); -o-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); margin-top: -15px;" /> </div> <center> <span style=" font: 34px Yanone Kaffeesatz; text-align: center; text-shadow: 1px 0 #090909, -1px 0 #090909, 0 1px #090909, 0 -1px #090909;">Créditos</span> </center> </div> <div style=" width: 287px; height: 70px; padding: 5px 20px; background-color: #000000; text-align: justify; font: 10px Calibri; color: #ffffff; margin-top: 0px; margin-left: 40px; overflow-y: auto; overflow-x: hidden;"> O Mythological Blood RPG agradece à DFRabelo por ter concedido vossa skin para o fórum e servido de suporte para a mesma. Também aos designers customizaram para o uso: Mayu, Virgs e Roger. Todas as imagens utilizadas na parte gráfica foram encontradas no Tumblr, We♥It, Pinterest e Google. Nenhum usuário, convidado, ou tramista/administrador têm direito de levar conteúdos de posse do RPG para fora deste domínio. Caso ocorra, nossos direitos serão proclamados e é protegido pela Creative Commons. © 2015 - Versão 1.0 </div> </div> </div> </div> </td> </tr> </tbody> </table> </td> <td> <table style="margin-top: -4px; margin-left: -8px;" cellspacin="0px"> <tbody> <tr> <td> <div style=" width: 418px; height: 336px; background-color: #090909; overflow-y: auto; overflow-x: hidden;"> <iframe src="http://mythologicalblood.forumeiros.com/h1-awards" style=" border: none; padding: 0px; width: 100%; height: 659px; margin: -4px;" scrolling="no"><p>Awards +81Height por award nuevo.</p></iframe> </div> </td> <td> <div style=" width: 20px; height: 336px; overflow: hidden; opacity: 0.999999; margin-top: 0px; margin-left: 2px;"> <div style=" width: 338px; height: 8px; padding-top: 7px; padding-bottom: 7px; margin-left: -158px; margin-top: 110px; margin-right: -1px; margin-bottom: -1px; background-color: #000000; font: 8px Calibri; text-align: center; text-transform: uppercase; letter-spacing: 8px; color: #ffffff; overflow: hidden; opacity: 0.999999; -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg);"> Awards </div> </div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> </div> </div><span class="corners-top"><span></span></span> </div> </div> </div> </div><style> #tablon-header { position: CENTER; right: 10px; top: 10px; transition: all 1s ease 0s; } #contenido1 { width: auto; height: auto; } .headerbar .inner:hover #tablon-header { margin: 0; } </style> <script> jQuery(function () { jQuery(".headerbar .inner").append(jQuery("#tablon-header")); }); </script> </center>

por Pastrana 22.04.15 13:00

Olá, @kkmlpk

Aconselho a fazer no seu fórum teste primeiro, ok?

No seu template overall_header procure por:

Código:: <div class="headerbar">

e

Código:: <div class="navbar">

Remova tudo entre isso (inclusive <div class="headerbar">, mas mantenha <div class="navbar">) :

Agora adicione acima de <div class="navbar">

Código:: <div class="headerbar"> <div class="quadro"> <center> <div class="table"> <div id="tablon-header"> <div id="contenido1"> <br class="clear" /> <div class="panel introduction"> <div class="inner"> <span class="corners-top"><span> <style></style> </span></span> <div style="" class="mes-txt"> <div id="tablon"> <div style=" width: 908px; height: 290px; margin-top: 20px; overflow: hidden;"> <table cellspacing="10px"> <tbody> <tr> <td> <table style=" margin-top: -4px; margin-left: -4px;" cellspacing="4px"> <tbody> <tr> <td> <div style=" width: 20px; height: 336px; overflow: hidden; opacity: 0.999999;"> <div style=" width: 338px; height: 8px; padding-top: 7px; padding-bottom: 7px; margin-left: -160px; margin-top: 110px; margin-right: -1px; margin-bottom: -1px; background-color: #000000; font: 8px Calibri; text-align: center; text-transform: uppercase; letter-spacing: 8px; color: #ffffff; overflow: hidden; opacity: 0.999999; -ms-transform:rotate(270deg); -moz-transform:rotate(270deg); -webkit-transform:rotate(270deg); -o-transform:rotate(270deg);"> Mythological Blood </div> </div> </td> <td> <div style=" width: 415px; height: 336px; overflow: hidden;" class="gossipdivs"> <div style=" width: 407px; height: 328px; border: 4px #000000 solid; overflow: hidden;"> <div style=" width: 407px; height: 328px; border: 2px #000000 solid; margin-top: -2px; margin-left: -2px;"> <img src="http://i.imgur.com/5f5fWqD.png" style=" height: 238px; width: 400px; border: 2px #000000 solid; margin: -2px;" class="gossipimage" /> </div> <div class="gossipinformation" style=" width: 407px; height: 328px; overflow-y: auto; overflow-x: hidden; margin-top: -330px; opacity: 0.999999;"> <div style=" width: 327px; height: 104px; background-color: #000000; text-align: center; text-transform: uppercase; letter-spacing: 0px; color: #ffffff; overflow: hidden; margin-left: 40px; margin-top: 40px;"> <div style=" width: 323px; height: 58px; overflow: hidden; margin: 2px 2px 5px 2px;"> <img src="http://static.tumblr.com/xuynvaq/qgclt0yso/tumblr_lrsbusxmig1qg20evo4_r7_500.gif" style=" width: 327px; -webkit-filter: grayscale(100%); -o-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); margin-top: -15px;" /> </div> <center> <span style=" font: 34px Yanone Kaffeesatz; text-align: center; text-shadow: 1px 0 #090909, -1px 0 #090909, 0 1px #090909, 0 -1px #090909;">Créditos</span> </center> </div> <div style=" width: 287px; height: 70px; padding: 5px 20px; background-color: #000000; text-align: justify; font: 10px Calibri; color: #ffffff; margin-top: 0px; margin-left: 40px; overflow-y: auto; overflow-x: hidden;"> O Mythological Blood RPG agradece à DFRabelo por ter concedido vossa skin para o fórum e servido de suporte para a mesma. Também aos designers customizaram para o uso: Mayu, Virgs e Roger. Todas as imagens utilizadas na parte gráfica foram encontradas no Tumblr, We♥It, Pinterest e Google. Nenhum usuário, convidado, ou tramista/administrador têm direito de levar conteúdos de posse do RPG para fora deste domínio. Caso ocorra, nossos direitos serão proclamados e é protegido pela Creative Commons. © 2015 - Versão 1.0 </div> </div> </div> </div> </td> </tr> </tbody> </table> </td> <td> <table style="margin-top: -4px; margin-left: -8px;" cellspacin="0px"> <tbody> <tr> <td> <div style=" width: 418px; height: 336px; background-color: #090909; overflow-y: auto; overflow-x: hidden;"> <iframe src="http://mythologicalblood.forumeiros.com/h1-awards" style=" border: none; padding: 0px; width: 100%; height: 659px; margin: -4px;" scrolling="no"><p>Awards +81Height por award nuevo.</p></iframe> </div> </td> <td> <div style=" width: 20px; height: 336px; overflow: hidden; opacity: 0.999999; margin-top: 0px; margin-left: 2px;"> <div style=" width: 338px; height: 8px; padding-top: 7px; padding-bottom: 7px; margin-left: -158px; margin-top: 110px; margin-right: -1px; margin-bottom: -1px; background-color: #000000; font: 8px Calibri; text-align: center; text-transform: uppercase; letter-spacing: 8px; color: #ffffff; overflow: hidden; opacity: 0.999999; -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg);"> Awards </div> </div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> </div> </div> <span class="corners-top"><span></span></span> </div> </div> </div> </div> </div> </center> </div>  </div>

Agora no seu CSS, adicione:

Código:: .headerbar {background-image: url("http://i.imgur.com/67HDS52.jpg"); background-repeat: no-repeat; height: 450px; margin-left: -5px; margin-top: -15px; width: 926px;} .quadro{ display: none; } .headerbar:hover .quadro{ display: block; }

Pastrana

por Sennior 25.04.15 21:20

Saudações,

Senhora, poderia nos dizer se sua dúvida foi sanada?
Até mais.
Sennior

por kkmlpk 26.04.15 3:11

Sim, obrigada. ^^

por Sennior 30.04.15 20:07

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.

Como colocar uma mensagem no banner/logo