Início
phpBB3 
PunBB
Invision
Forumeiros (Avançado)
Tutorial Temporário!
Olá pessoal!
Devido ao grande pedido sobre o código que usamos aqui para mostrar o seguinte recurso:
![[ONLINE] / [OFFLINE] nas mensagens/tópicos! IDJizCz](https://i.imgur.com/IDJizCz.png)
Passarei o código que uso aqui, mas não darei muitas explicações pois deixarei apenas para o tutorial final.
- Spoiler: Versão com JavaScript!:
Nota: Todos os códigos abaixo, menos o CSS, são para o template Viewtopic_body, presumo que saibam como adicioná-los dentro do arquivo!
CSS: Adicionem o código abaixo na folha de estilos
- Código:
.ipsBadge {
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
display: inline-block;
font-size: 9px;
font-weight: bold;
height: 15px;
line-height: 15px;
padding: 0 5px;
text-transform: uppercase;
vertical-align: middle;
}
.reset_cursor {
cursor: default;
}
.ipsBadge_lightgrey {
background: none repeat scroll 0 0 #B3B3B3;
}
.ipsBadge_green {
background: none repeat scroll 0 0 #7BA60D;
}
- Código:
<div id="p{postrow.displayed.U_POST_ID}" class="posthead"{postrow.displayed.THANK_BGCOLOR}>
<h2>
<strong>{postrow.displayed.COUNT_POSTS}</strong>
{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a> {postrow.displayed.POST_DATE_NEW}
</h2>
</div>
- Código:
<div class="posthead"{postrow.displayed.THANK_BGCOLOR} id="p{postrow.displayed.U_POST_ID}">
<h2>
<span class="ipsBadge ipsBadge_lightgrey reset_cursor" style="float: left; margin-top: 10px; margin-right: 10px;" data-tooltip="">offline</span>
<div style="float: left; font-size: 16px; font-family: Arial;" class="username">{postrow.displayed.POSTER_NAME}</div>
<strong>{postrow.displayed.IP_IMG}</strong> <a href="{postrow.displayed.POST_URL}" title="{TOPIC_TITLE}: post #{postrow.displayed.COUNT_POSTS}">
<font style='font-size: 12px; font-family: Arial;'>
<strong>#<span class="count-post">{postrow.displayed.COUNT_POSTS}</span></strong>
</font>
</a>
<!-- Backup {postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a> -->
</h2>
</div>
- Código:
$(function () {
/***
* Show the state ONLINE/OFFLINE
*/
target = $('.main-content.topic').find('div.post');
target.each(function(index) {
var oThis = $(this);
var USER_URL = oThis.find('.username').children('a').attr('href');
if (USER_URL == undefined) {return false}
/*Get and sets state*/
$.get(USER_URL, function(data){
var state = 'Desconectado';
if($('#user_status', data).length){ /* Ipboard Perfil! */
state = $('#user_status', data).text();
} else if ($('.frm-set.left.profile-view dl:eq(1)', data).length) { /* Simple Perfil */
state = $('.frm-set.left.profile-view dl:eq(1) dd:last-child strong', data).text();
} else if ($('#profile-advanced-right em', data).length) { /* Advanced Perfil */
state = 'conectado';
}
if($.trim(state) == 'conectado') {
oThis.find('div.posthead .ipsBadge').html('online').addClass('ipsBadge_green').removeClass('ipsBadge_lightgrey');
};
});
});
});
1- Percebam que modifiquei meu código para tentar ler os 3 tipos de perfil (Simples, Avançado e IPBoard), verifiquem qual é o que vocês usam e eliminem os trechos de código no qual não pertence ao tipo de perfil que usam em seus fóruns, dessa forma o código ficará otimizado!
2- Se estão usando o perfil IPBoard que fiz, atualize-o com a nova versão: http://jscript.forumeiros.com/t15-perfil-ipb-v14-20b
- Spoiler: Versão sem JavaScript!:
Vá em: Painel de Controle -> Imagens e Cores -> Gestão das imagens -> Modo Avançado
E adicione esta imagem https://i.servimg.com/u/f71/18/17/62/92/online11.png no campo conectado conforme a figura abaixo:![[ONLINE] / [OFFLINE] nas mensagens/tópicos! Online12](https://i.servimg.com/u/f71/18/17/62/92/online12.png)
Clique em salvar!
HTML: No template viewtopic_body, substitua
- Código:
<div id="p{postrow.displayed.U_POST_ID}" class="posthead"{postrow.displayed.THANK_BGCOLOR}>
<h2>
<strong>{postrow.displayed.COUNT_POSTS}</strong>
{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a> {postrow.displayed.POST_DATE_NEW}
</h2>
</div>
- Código:
<div class="posthead"{postrow.displayed.THANK_BGCOLOR} id="p{postrow.displayed.U_POST_ID}">
<h2>
<span class="reset_cursor" style="float: left; margin-top: 10px; margin-right: 10px;" data-tooltip="">
<img title="Offline" alt="Offline" src="http://i71.servimg.com/u/f71/18/17/62/92/offlin10.png">
</span>
<span class="reset_cursor" style="float: left; margin-top: 10px; margin-right: 10px; margin-left: -61px;" data-tooltip="">{postrow.displayed.ONLINE_IMG}</span>
<div style="float: left; font-size: 16px; font-family: Arial;" class="username">{postrow.displayed.POSTER_NAME}</div>
<strong>{postrow.displayed.IP_IMG}</strong> <a href="{postrow.displayed.POST_URL}" title="{TOPIC_TITLE}: post #{postrow.displayed.COUNT_POSTS}">
<font style='font-size: 12px; font-family: Arial;'>
<strong>#<span class="count-post">{postrow.displayed.COUNT_POSTS}</span></strong>
</font>
</a>
<!-- Backup {postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a> -->
</h2>
</div>
Em breve farei um tutorial permanente pois ainda irei modificar a estrutura do código!
So long,
JS
Última edição por JScript em Qui 29 Ago 2013, 12:17 am, editado 4 vez(es) (Motivo da edição : Acrescentado versão sem JavaScript!)
![[ONLINE] / [OFFLINE] nas mensagens/tópicos! Vote_lcap](https://2img.net/i/fa/prosilver_grey/vote_lcap.png){kind=small}
![[ONLINE] / [OFFLINE] nas mensagens/tópicos! Voting_bar](https://2img.net/i/fa/prosilver_grey/voting_bar.png){kind=small}
![[ONLINE] / [OFFLINE] nas mensagens/tópicos! Vote_rcap](https://2img.net/i/fa/prosilver_grey/vote_rcap.png){kind=small}