Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» Ninguem consegue se registrar
Hoje à(s) 4:28 por EduardoMGP

» Caixa de Login
Hoje à(s) 3:29 por Shek Crowley

» Melhorar plugin de últimos assuntos
Hoje à(s) 3:17 por iScroll

» Fichas e personagem e :
Hoje à(s) 2:17 por Claudio Arthur

» Utilização de Templates nas Páginas
Hoje à(s) 2:06 por Shek Crowley

» Erro ao postar HTML no tópico
Hoje à(s) 0:31 por Shek Crowley

» Widget equipe online
Ontem à(s) 22:50 por Luiz~

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
169 usuários online :: 1 usuário cadastrado, Nenhum Invisível e 168 Visitantes :: 2 Motores de busca

HouseG4E

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Como fazer esse painel?

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

Resolvido Como fazer esse painel?

Mensagem por Beauxbatons em Sab 29 Nov 2014 - 16:56

Detalhes da dúvida


Versão do fórum : phpBB2
Nível de acesso : Administrador
Navegador usado : Google Chrome
Imagem :
Imagem da minha dúvida:

Membros afetados : Somente comigo
Endereço do fórum : http://rpgbb.forumeiros.com/

Descrição do problema

Bem, eu queria colocar um painel desse gênero, e além dele, a parte de pontuação que está logo acima, no qual, quando passamos o cursor na imagem dos brasões, abre uma caixa de texto com a respectiva informação.
Fórum em que encontrei tal painel (caso ajude em algo): http://hogwartsismagicrpg.forumeiros.com/forum


Última edição por Beauxbatons em Sab 29 Nov 2014 - 21:10, editado 1 vez(es)
avatar

Beauxbatons
Nível 2

Masculino
Inscrito dia : 29/11/2014
Mensagens : 9
Pontos Ativos : 23

http://rpgbb.forumeiros.com/

Resolvido Re: Como fazer esse painel?

Mensagem por Sennior em Sab 29 Nov 2014 - 20:33

Olá amigo,

Utilize este código:
Código:
<div class="gensmall"><div style="background:#C8E2B7;border:1px solid green;padding:5px;color:#666666;text-align:center;font-family:Verdana;font-size:11px"><img src="http://cdn3.iconfinder.com/data/icons/picnic/iPod2.png" height="48" style="vertical-align:middle">Contribua na divulgação do rpg, chame os amigos para participar, a administração do Hogwarts is Magic rpg agradece sua ajuda. (:<br>Sigam o fundador no twitter <a href="https://twitter.com/BrunnFerreira" class="postlink" target="_blank" rel="nofollow"><font color="#0096e6">@BrunnFerreira</font></a></div>')

<center><br><br><div style="color: #3a543a; text-shadow: 1px 0 1px #00000; font-family: Wire One; font-size: 30px; line-height: 20pt; letter-spacing: 4px; text-transform: uppercase;">••Pontos</div><div style="width: 190px; font-family:Bubbleman; font-size:42px; text-transform:none; color: #22b6e3; line-height:85%; font-weight: bold; letter-spacing:-1px; text-align:center; font-style:none; text-shadow: -2px 0 black, 0 1px black, 1px 0 black, 0 -2px black; margin-right:15px; margin-bottom: 20px;"></div>

<a href="" onmouseover="showmenu(event,linkset[0])" onmouseout="delayhidemenu()"><img src="http://i.imgur.com/BZynj.png" border="0"></a>

<a href="" onmouseover="showmenu(event,linkset[1])" onmouseout="delayhidemenu()"><img src="http://img210.imageshack.us/img210/395/teamlion2.png" border="0"></a>


<a href="" onmouseover="showmenu(event,linkset[2])" onmouseout="delayhidemenu()"><img src="http://img837.imageshack.us/img837/8522/teamsnake2.png" border="0"></a>

<a href="" onmouseover="showmenu(event,linkset[3])" onmouseout="delayhidemenu()"><img src="http://img209.imageshack.us/img209/2907/teambadger2.png" border="0"></a>

</center>
<style type="text/css">

#popitmenu{
-moz-border-radius: 12px 12px 12px 12px;
position: absolute;
background-color: #f0f0f0;
text-align: center;
border-left: 3px solid #066170;
border-right: 3px solid #066170;
font: normal 10px verdana;
line-height: 18px;
z-index: 100;
visibility: hidden;
}

#popitmenu a{
text-decoration: none;
padding-left: 6px;
color: #B8B8B8;
display: block;
}

#popitmenu a:hover{ /*hover background color*/
-moz-border-radius: 12px 12px 12px 12px;
background-color: #6B838C;
color: white;
font-style: italic;
}

</style>
<script type="text/javascript">

var defaultMenuWidth="150px" //set default menu width.

var linkset=new Array()
//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT

linkset[0]='<center><span style="font-size: 12px; text-transform:uppercase; line-height: normal"><font color="#183BC7">• Ravenclaw •</font></span></center>'
linkset[0]+='<strong>Pontos:</strong> 000<br>'
linkset[0]+='<strong>Diretor:</strong>--<br>'
linkset[0]+='<strong>Monitores:</strong> --'

linkset[1]='<center><span style="font-size: 12px; text-transform:uppercase; line-height: normal"><font color="#D61515">• Gryffindor •</font></span></center>'
linkset[1]+='<strong>Pontos:</strong> 000<br>'
linkset[1]+='<strong>Diretor:</strong> --<br>'
linkset[1]+='<strong>Monitores:</strong> --'

linkset[2]='<center><span style="font-size: 12px; text-transform:uppercase; line-height: normal"><font color="#056B15">• Slytherin •</font></span></center>'
linkset[2]+='<strong>Pontos:</strong> 000<br>'
linkset[2]+='<strong>Diretor:</strong> --<br>'
linkset[2]+='<strong>Monitores:</strong> --'

linkset[3]='<center><span style="font-size: 12px; text-transform:uppercase; line-height: normal"><font color="#CFAA17">• Hufflepuff •</font></span></center>'
linkset[3]+='<strong>Pontos:</strong> 000<br>'
linkset[3]+='<strong>Diretor:</strong> -- <br>'
linkset[3]+='<strong>Monitores:</strong>--'

////No need to edit beyond here

var ie5=document.all && !window.opera
var ns6=document.getElementById

if (ie5||ns6)
document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function showmenu(e, which, optWidth){
if (!document.all&&!document.getElementById)
return
clearhidemenu()
menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
menuobj.innerHTML=which
menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
menuobj.contentwidth=menuobj.offsetWidth
menuobj.contentheight=menuobj.offsetHeight
eventX=ie5? event.clientX : e.clientX
eventY=ie5? event.clientY : e.clientY
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
else
menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
menuobj.style.visibility="visible"
return false
}

function contains_ns6(a, b) {
//Determines if 1 element in contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function hidemenu(){
if (window.menuobj)
menuobj.style.visibility="hidden"
}

function dynamichide(e){
if (ie5&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}

function delayhidemenu(){
delayhide=setTimeout("hidemenu()",500)
}

function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}

if (ie5||ns6)
document.onclick=hidemenu

</script><div id="popitmenu" onmouseover="clearhidemenu();" onmouseout="dynamichide(event)" style="width: 150px; left: 777px; top: 840px; visibility: hidden;"><center><span style="font-size: 12px; text-transform:uppercase; line-height: normal"><font color="#183BC7">• Ravenclaw •</font></span></center><strong>Pontos:</strong> 000<br><strong>Diretor:</strong>--<br><strong>Monitores:</strong> --</div>






<link href="http://fonts.googleapis.com/css?family=Economica:200,400,700" rel="stylesheet" type="text/css">
<style type="text/css">

.tituloyu {
padding-bottom:6px;
font-family: Wire One;
font-weight:400;
text-transform:uppercase;
text-align:center;
color: #3a543a;
font-size: 36px
}
#quicklinks a {
font-family: tahoma;
font-size:10px;
text-transform: uppercase;
color: #3a543a;
line-height:110%;
letter-spacing:1px;
}
#quicklinks a:hover {
color: #3a543a;
font-weight:bold;
}
#quickshout a {
font-family: tahoma;
font-size:11px;
color: #3a543a;
line-height:115%;
letter-spacing:1px;
}
#quickshout a:hover {
color: #3a543a;
font-weight:bold;
}

.subtituloyu {
font-family: Economica;
font-weight:200;
text-align:right;
color:#3a543a;
font-size:24px;
text-transform:lowercase;
padding-top:5px;
}

.links1 {
float:left; width: 115px; border-right: double 4px #3a543a; text-align:center;
}

.links2 {
float:right; width: 115px; border-right: double 4px #3a543a; text-align:center;
}
</style>
<table style="width:620px; padding:10px 20px; margin: 0 auto;"><tbody><tr><td style="width:290px;"><div class="tituloyu">
Welcome
</div><div style=" font-family:tahoma; letter-spacing:1px; font-size:11px; line-height:110%; color:dimgray; text-align:justify;">

Seja bem vindo ao Hogwarts is magic rpg,segue abaixo alguns links importantes do fórum.

</div><div class="subtituloyu">Links</div><div style="height:60px; background:#222; padding:20px;" id="quicklinks"><div class="links1">
<a href="http://hogwartsismagicrpg.forumeiros.com/h8-contato">Contato</a><br>
<a href="http://hogwartsismagicrpg.forumeiros.com/t209-teste-do-chapeu">Chapéu Seletor</a><br>
<a href="http://hogwartsismagicrpg.forumeiros.com/t111-mudanca-de-nome">Troca de Nome</a><br>
<a href="http://hogwartsismagicrpg.forumeiros.com/t371-regras-gerais">Regras</a><br>
<a href="http://hogwartsismagicrpg.forumeiros.com/t39-trama-rpg">Trama</a><br>
<a href="http://hogwartsismagicrpg.forumeiros.com/f32-5-nivel">Registro de avatares</a><br>


</div></div><div class="subtituloyu">ULTIMOS ANUNCIOS</div><div style="height:110px;background:#222; padding:10px; text-align:center; color:#666; font-size:10px; line-height:150%;" id="quickshout">

<a href="#">Nenhum anuncio</a><br>Fecha # Explicacion<br>
<a href="#">Nenhum anuncio</a><br>Fecha # Explicacion<br>
<a href="#">Nenhum anuncio</a><br>Fecha # Explicacion<br>
<a href="#">Nenhum anuncio</a><br>Fecha # Explicacion<br>

</div></td><td style="width:20px;"></td><td style="width:290px;"><div class="subtituloyu">Comunicado rápido</div><div style="height:200px;background:#222; padding:10px; text-align:justify; color:#aaa; font-size:10px; line-height:110%; overflow:auto; opacity:0.8">


aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto
aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto

aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto aqui tu texto

</div><div class="subtituloyu">créditos</div><div style="height:50px;background:#222; padding:10px; text-align:center; color:#666; font-size:10px; line-height:110%;">

Todos os tópicos e imagens deste fórum são de totais direitos do Hogwarts is Magic e seus respectivos idealizadores evite copiar para não haver qualquer tipo de constrangimento futuro.

</div></td></tr></tbody></table>










 </div>
Coloque em:
Painel de Controle Seta Visualização Seta Página inicial Seta Geral

Até mais.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16261
Pontos Ativos : 20762

http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Como fazer esse painel?

Mensagem por Shek Crowley em Sab 29 Nov 2014 - 21:11

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para Questões resolvidas.


ShekAdmineiro - Fórum dos Fóruns
avatar

Shek Crowley
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 16086
Pontos Ativos : 20669

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

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