Início
phpBB3 
PunBB
Invision
Forumeiros (Avançado)
Last Post com Avatar do membro |
| Créditos: JScript Nota: Versão beta, fase de implementação. |
Aceda em:
Painel de Controle
Visualização -> Templates -> Geral
Selecione o template index_box, procure pelas tags <!-- BEGIN forumrow --><!-- END forumrow --> e substitua o conteúdo delas pelo código abaixo:
- Código:
<tr data-fname="{catrow.forumrow.FORUM_NAME}" data-fhref="{catrow.forumrow.U_VIEWFORUM}">
<!-- Column for Icons -->
<td class="tc_icon">
<span class="status">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</span>
</td>
<!-- Column for Title & Description -->
<td class="tcl"> <!-- Backup style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};"> -->
<!-- Backup
<span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</span>
-->
<h{catrow.forumrow.LEVEL} class="hierarchy">
<a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
</h{catrow.forumrow.LEVEL}>
<br />
<div class="desc ipsType_small">
{catrow.forumrow.FORUM_DESC}
<!-- BEGIN switch_moderators_links -->
<br />
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
<strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
</div>
</td>
<!-- Backup <td class="tc2"></td> -->
<!-- Column for Topic info -->
<td class="tc3 ipsType_small">
<strong id="index_topics">{catrow.forumrow.TOPICS}</strong> tópicos<br />
<strong id="index_replies">{catrow.forumrow.POSTS}</strong> respostas
</td>
<!-- Column for Last Post -->
<td class="tcr" data-flag_p="{catrow.forumrow.FORUM_NAME}">
<!-- Backup
<span>
<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
{catrow.forumrow.USER_LAST_POST}
</span>
-->
<a id="user_photo" class="ipsUserPhoto" href=""><img src="http://i78.servimg.com/u/f78/18/17/62/92/defaul10.png" alt="User image" class="ipsUserPhoto_mini"></a>
<!-- BEGIN switch_topic_title -->
<ul class="last_post ipsType_small">
<li><a id="topic_title" title="{catrow.forumrow.LATEST_TOPIC_TITLE}" href="{catrow.forumrow.U_LATEST_TOPIC}">{catrow.forumrow.LATEST_TOPIC_NAME}</a></li>
<li id="user_info">Por <a class="url fn name" href="" title=""><span itemprop="name"></span></a></li>
<li class="desc lighter blend_links"><a id="post_date" href="{catrow.forumrow.U_LATEST_TOPIC}" title="Visualizar último post"></a></li>
</ul>
<!-- END switch_topic_title -->
<span id="user_last_post" style="display: none;">{catrow.forumrow.USER_LAST_POST}</li>
</td>
</tr>
- Código:
<script type="text/javascript">
//<![CDATA[
/* IPBoard LastPost Info!
* Mady by JScript at www.jscript.forumeiros.com
*/
var target = $('td.tcr');
target.each(function(index){
var oThis = $(this);
if (oThis.attr('data-flag_p').indexOf(' ') == -1) {
var $topic_title = oThis.find('#topic_title');
/* If no posts... */
if ($topic_title.text() == '') {
$topic_title.addClass('desc lighter blend_links').text('Não há posts para visualizar');
oThis.find('#user_info').css('display', 'none');
} else {
/* Reads the forumeiros lastpost info... */
var $user_last_post = oThis.find('#user_last_post');
var $user_photo = oThis.find('#user_photo');
var last_post_date = $user_last_post.html().split('<br>')[0];
var $user_info = $user_last_post.find('a.gensmall');
var $post_date = oThis.find('#post_date');
var last_post = $user_last_post.find('.last-post-icon').attr('href');
var UserURL = $user_info.attr('href');
var Removed = $user_info.text();
var UserIMG = sessionStorage.getItem(UserURL); /* Gets the avatar saved in local storage */
/* Populate LastPost Info! */
$post_date.text(last_post_date);
$post_date.attr('href', last_post);
$user_info = oThis.find('#user_info').find('a');
$user_info.attr('href', UserURL);
$user_info.find('span').text(Removed);
$user_photo.attr('href', UserURL);
$topic_title.attr('href', last_post);
/* If avatar alread saved, then no request member profile! */
if(UserIMG) {
$user_photo.find('img').attr('src', UserIMG);
} else {
/* if not, then only request per session!!! */
$.get(UserURL, function(data){
var profile_img = $('#profile_tabs p img', data).attr('src');
if (profile_img !== undefined) {
$user_photo.find('img').attr('src', profile_img);
/* Saves the member avatar in local storage */
sessionStorage.setItem(UserURL, profile_img);
} else {
/* Saves the default avatar in local storage */
sessionStorage.setItem(UserURL, 'http://i78.servimg.com/u/f78/18/17/62/92/defaul10.png');
}
});
}
}
} else {
oThis.html('<ul class="last_post ipsType_small"><li></li><li class="desc lighter blend_links" style="font-style:italic;" id="user_info"><em>Fórum protegido!</em></li><li class="desc lighter blend_links"></li></ul>');
}
});
//]]>
</script>
2º - Adicionando CSS
Adicione em sua Folha de Estilos o código abaixo:
- Código:
.tcr .ipsUserPhoto {
float: left;
margin-top: 3px;
}
.ipsUserPhoto_mini {
height: 30px;
width: 30px;
}
.ipsUserPhoto {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #D5D5D5;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
padding: 1px;
}
.desc.lighter, .desc.lighter.blend_links a {
color: #A4A4A4;
}
3º - Resultado
Nota: Para ter o tarja de Fórum protegido!, basta editar o nome do fórum colocando no final do arquivo o caracter vazio que é feito segurando a tecla Alt e digitando 255 no teclado!
Link para visualização: http://jscript.forumeiros.com/
PunBB Forumeiros
| Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Last Post com Avatar do membro |
Última edição por JScript em Ter 24 Set 2013, 5:56 pm, editado 13 vez(es)
