1![[TUTORIAL] "Quem está online?" personalizado Empty](https://2img.net/i/empty.gif)
[TUTORIAL] "Quem está online?" personalizado 08/11/12, 08:49 pm
RMBR
Administrador
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | [TUTORIAL] "Quem está online?" personalizado |
Olá, muita gente me pediu para para personalizar a área de quem está conectado do forum, então nese tutorial eu decidi fazer uma edição simples nessa área, é bem básico, só que mais profissional, organizado e elegante.
| [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | CRÉDITOS!! Esse código foi inteiramente construído por HenRyqUé referente à: RMBR cópias permitidas se permanecerem os devidos créditos!! (HenRyquUéè, ©RMBR) |
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] "Quem está online?" personalizado
[TUTORIAL] "Quem está online?" personalizado
1º - Modificando o template...
Vá em:
Procure por:Visualização > Templates > Geral >> index_body
- Código:
<!-- BEGIN disable_viewonline -->
- Código:
<!-- END disable_viewonline -->
- CLIQUE AQUI PARA ABRIR:
- Código:
<div class="fundo"><center><b class="letras">ESTATÍSTICAS</b></center><div style="" id="stats2">
<b> » </b>{TOTAL_POSTS} <p/>
<b> » </b>{TOTAL_USERS} <p/>
<b> » </b>{NEWEST_USER}
</div>
<!--<div id="pun-info" class="main">
<div class="main-content"> -->
<table border="0" cellspancing="auto" cellpadding="auto">
<tr><td width="50%" colspan="2"><center><b class="letras">QUEM ESTÁ ON?</b></center><div id="onlinelist2">
{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}
<br />
{LOGGED_IN_USER_LIST}</div></td>
<td width="50%" colspan="2"><center><b class="letras">QUEM PASSOU POR AQUI?</b></center><div id="onlinelist3">{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br /></div></td></tr></table><center><b class="letras">LEGENDAS</b></center>
<div id="onlinelist4">{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
<p>{LEGEND} : {GROUP_LEGEND}</p></div></div>
<div class="fundo2"><!-- BEGIN switch_chatbox_activate -->
<p class="page-bottom">
{TOTAL_CHATTERS_ONLINE} :
{CHATTERS_LIST}<br />
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
</script>
<!-- END switch_chatbox_popup -->
</p>
<!-- END switch_chatbox_activate -->
</div>
2º - Inserindo o código css...
Vá em:
Adicione o seguinte código à folha:Visualização > Imagens e Cores > Cores >> Folha de estilo CSS
- CLIQUE AQUI PARA ABRIR:
- Código:
/*QUEM ESTÁ ONLINE? -PERSONALIZAÇÃO*/
.letras{
border-bottom:2px solid white;
color:#8C8C8C;
text-shadow:1px 0px 1px #CFCFCF;
background: none repeat scroll 0 0 #FCFCFC;
position:relative;
bottom:-1px;
border:2px solid #787878;
border-radius: 5px 5px 0px 0px;
padding:5px;
padding-bottom:0px!Important;
}
#onlinelist2, #onlinelist3{
min-height:100px!Important;
}
#stats2{
margin-bottom:10px!Important;
border: 1px solid #D9D9D9;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
max-width:100%;
width:auto;
border:2px solid #787878;box-shadow:2px 1px 3px grey;border-radius:5px;padding:2px;margin-bottom:5px;
}
#onlinelist2{
margin-bottom:10px!Important;
border: 1px solid #D9D9D9;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
min-height:80px;
margin-left:-2px;
height:auto;
width:97.6%/*350px*/!Important;
border:2px solid #787878;box-shadow:2px 1px 3px grey;border-radius:5px;padding:2px;margin-bottom:5px;
}
#onlinelist3{ margin-bottom:10px!Important;
border: 1px solid #D9D9D9;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
min-height:80px;
margin-right:-2px;
height:autopx;
margin-left:3px;
width:97.6%/*350px*/!Important;
border:2px solid #787878;box-shadow:2px 1px 3px grey;border-radius:5px;padding:2px;margin-bottom:5px;
}
#onlinelist4{
border: 1px solid #D9D9D9;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
max-width:100%;
width:98.9%;
max-height:50%;
border:2px solid #787878;box-shadow:2px 1px 3px grey;border-radius:5px;padding:2px;margin-bottom:5px;
}
#stats2, #onlinelist2, #onlinelist3, #onlinelist4, .letras{
height:auto;
background: #F7F7F7 url(http://i48.servimg.com/u/f48/16/58/89/73/alt210.gif);
background-repeat: repeat-x repeat-y;
}
.fundo{
margin-bottom:5px;
background: none repeat scroll 0 0 #F3F3F3;
border: 1px solid #D9D9D9;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
margin-top: 10px;
padding:10px;
}
.fundo2{
margin-top:5px;
background: none repeat scroll 0 0 #F3F3F3;
border: 1px solid #D9D9D9;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
margin-top: 10px;
padding:10px;
}/*www.rmbr.forumeiros.com*/
2º - Inserindo o código JavaScript...
Vá em:
Módulos > HTML e JavaScript > Gestão de Códigos Javascript >> Novo Javascript
Título * : Dê qualquer título (escolha um título que descreve a função do codigo).
Investimento : No índice.
Código JavaScript * : Adicione este código à folha:
- CLIQUE AQUI PARA ABRIR:
- Código:
jQuery(document).ready(function(){jQuery('.fundo #stats2').prev().hide();jQuery('.fundo #stats2').hover(function(){jQuery(this).prev().show()},function(){jQuery(this).prev().hide()})});
jQuery(document).ready(function(){jQuery('.fundo #onlinelist2').prev().hide();jQuery('.fundo #onlinelist2').hover(function(){jQuery(this).prev().show()},function(){jQuery(this).prev().hide()})});
jQuery(document).ready(function(){jQuery('.fundo #onlinelist3').prev().hide();jQuery('.fundo #onlinelist3').hover(function(){jQuery(this).prev().show()},function(){jQuery(this).prev().hide()})});
jQuery(document).ready(function(){jQuery('.fundo #onlinelist4').prev().hide();jQuery('.fundo #onlinelist4').hover(function(){jQuery(this).prev().show()},function(){jQuery(this).prev().hide()})});
3º - Resultado...
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
- Funciona em quais versoes?
PUNBB e PHPBB2.
- Quais as vantagens deste código?
As vantagens é que a área fica bem mais elegante, profissional e organizado.
©RMBR
| [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [TUTORIAL] "Quem está online?" personalizado |
Última edição por RMBR em 12/11/12, 01:00 pm, editado 1 vez(es)
Destaque do Fórum