[TUTORIAL] Caixa de informação como ShiftActif
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1 • Compartilhe
[TUTORIAL] Caixa de informação como ShiftActif
Caixa de informação |
Muitos usuários querem saber como criar tal efeito de quando um visitante está no fórum, uma caixa vermelha que geralmente encontramos em fóruns IPBoard aparece e deixa uma informação, e ao passar o mouse sobre ela, sua cor muda. Neste tutorial, vamos conhecer tal proeza e aplicar no fórum com possibilidade de mudar as permissões.
--> Tutoriais <--
Caixa de informação como ShiftActif
Caixa de informação como ShiftActif
1º - Aplicação do CSS:
Pode ser aplicado em Painel de controle > Visualização > Imagens e Cores > Cores > Folha de estilo CSS > ou podemos colocar dentro das tags <style></style> em um widget personalizado (Painel de controle > Módulos > Portal e WIdgets > Gestão dos widgets personalizados) ou na mensagem da home-page (Visualização > Home page > Página principal).
- 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;
}
Você pode personalizar os termos background: #cf3737; border: 1px solid #771b1b;. Antes de tudo, leia o seguinte tópico: http://ajuda.forumeiros.com/t62408-
2º - Código HTML personalizado:
Podemos aplicar então o código HTML em Painel de controle > Módulos > Portal e Widgets > Gestão dos widgets do fórum > Criar um widget personalizado > e colar o seguinte 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>
- Posso hospedar o arquivo JavaScript do site maonyn.yemenforums.net/22141.js em minha página JS?
Sim, inclusive se você adicionar no Investimento de uma página JS, você pode determinar onde o Javascript vai agir. - Resultado:
© ShiftActif
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Caixa de informação como ShiftActif |
Tópicos semelhantes
» [TUTORIAL] Mensagem padrão na caixa de respostas
» [TUTORIAL] Efeito hover em caixa de texto com CSS
» [TUTORIAL] Personalizar caixa de cores com Javascript externo
» [TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog
» [TUTORIAL] Caixa de fãs do Facebook com lightbox
» [TUTORIAL] Efeito hover em caixa de texto com CSS
» [TUTORIAL] Personalizar caixa de cores com Javascript externo
» [TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog
» [TUTORIAL] Caixa de fãs do Facebook com lightbox
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|