Posted June 16th 2013, 9:09 pm
how can i achive this?
recent topic mini avatar
Message (Page 1 of 1)
#2tommycoo
tommycoo 
Posted June 16th 2013, 10:11 pm
here is see there http://www.avacweb.com/t1239-small-avatar-on-current-topics-invision#11851
#3GummyBear
GummyBear
Posted June 16th 2013, 11:47 pm
i cant make it work. can you please post the complete codes and procedures my forum version is punbb
#5GummyBear
GummyBear
Posted June 17th 2013, 10:24 pm
please include the like button tutorial just like what you have here
#6Mark
Mark
Posted June 18th 2013, 8:12 pm
Again, all what you see here are already on the file, as long as the CSS, Templates and Javascripts are installed. They will have the same output.
EDIT: Anyway, lets stick to the topic. Here:
Replace your mod_recent_topics with this one:
Javascript:
CSS:
EDIT: Anyway, lets stick to the topic. Here:
Replace your mod_recent_topics with this one:
- Code:
<!-- BEGIN scrolling_row -->
<div class="module main">
<div class="main-head"><div class="h3">{L_RECENT_TOPICS}</div></div>
<div class="main-content" id="comments_scroll_div">
<!-- BEGIN recent_topic_row -->
<div class="avt_recent">
<div class="recent_space">
<a onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE}">{scrolling_row.recent_topic_row.L_TOPIC_TITLE}</a><br />
<img src="{ICON_TIME}" alt="" />{scrolling_row.recent_topic_row.S_POSTTIME} {BY}
<!-- BEGIN switch_poster -->
<a onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" href="{scrolling_row.recent_topic_row.switch_poster.U_POSTER}">{scrolling_row.recent_topic_row.switch_poster.S_POSTER}</a><br /><br />
<!-- END switch_poster -->
<!-- BEGIN switch_poster_guest -->
{scrolling_row.recent_topic_row.switch_poster_guest.S_POSTER}<br /><br />
<!-- END switch_poster_guest -->
<!--
<a onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" href="{scrolling_row.recent_topic_row.U_POSTER}">{scrolling_row.recent_topic_row.S_POSTER}</a><br /><br />
-->
</div>
</div>
<!-- END recent_topic_row -->
</div>
</div>
<script type="text/javascript">
//<![CDATA[
$(function(){
div_marquee('comments_scroll_div', 'comments_scroll_container', '{SCROLL_WAY}', '{SCROLL_STEP}', '{SCROLL_DELAY}', '{SCROLL_HEIGHT}');
});
//]]>
</script>
<!-- END scrolling_row -->
<!-- BEGIN classical_row -->
<div class="module main">
<div class="main-head"><h3>{L_RECENT_TOPICS}</h3></div>
<div class="main-content">
<!-- BEGIN recent_topic_row -->
<div class="avt_recent">
<div class="recent_space">
<a href="{classical_row.recent_topic_row.U_TITLE}" class="bottooom"><font style="font-size: 11px;">{classical_row.recent_topic_row.L_TITLE}</font></a><br />
<!-- BEGIN switch_poster -->
<a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}"><font style="font-size: 11px;">{classical_row.recent_topic_row.switch_poster.S_POSTER}</font></a>
<!-- END switch_poster -->
<!-- BEGIN switch_poster_guest -->
{classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
<!-- END switch_poster_guest -->
{ON} <font style="font-size: 11px;" class="bottooom">- {classical_row.recent_topic_row.S_POSTTIME}</font><br /><br />
<!--
<a href="{classical_row.recent_topic_row.U_POSTER}">{classical_row.recent_topic_row.S_POSTER}</a> {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
-->
</div>
</div><br/>
<!-- END recent_topic_row -->
</div>
</div>
<!-- END classical_row -->
Javascript:
- Code:
jQuery(document).on('ready', function() {
jQuery('.avt_recent').prepend('<div class="avt-r"><div>');
jQuery('.avt_recent .avt-r').each(function () {
var profileUserURL = jQuery(this).parent().children('.recent_space').children('a:last').attr('href');
jQuery(this).html('<a href="' + profileUserURL + '" class="avt-r-enlace"><img src="http://r14.imgfast.net/users/1417/27/86/76/avatars/1-19.png" alt="No Avatar" /></a>');
jQuery(this).children('a').load(profileUserURL + ' .module:eq(0) img:eq(0)')
});
});
CSS:
- Code:
.recent_space {
border-bottom: 1px solid #F3F3F3;
margin: -5px;
}
.avt-r {
float: left;
}
.avt-r img {
width: 30px;
height: 30px;
margin: 3px;
padding: 1px;
border: 1px solid #D5D5D5;
background: white;
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.avt-r img:hover {
border-color: #a1a1a1;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
}
#7GummyBear
GummyBear
Posted June 18th 2013, 9:28 pm
avatar is not showing at index page but when i got to sub forums, in topics and etc the avatar is now showing
#8Mark
Mark
Posted June 18th 2013, 9:38 pm
Probably caused by one of your Javascripts. Try unchecking the boxes on each Javascript you put on JS Management, afterwards check it, if it's still not showing, just put back again the check on the boxes then do the same on others.
#10leonidas
leonidas
Posted June 19th 2013, 9:08 am
how do you put a space between the avatar and the topic title?
also, how do you put a line in between the topics - similar to the one in this forum?
thanks!
also, how do you put a line in between the topics - similar to the one in this forum?
thanks!
#11Mark
Mark
Posted June 19th 2013, 5:07 pm
Add this to your CSS:
- Code:
.avt_recent {
border-bottom: 1px solid grey;
}
#12Mark
Mark
Posted August 3rd 2013, 6:18 pm
Since the problem is now solved, i will lock this now.
Message (Page 1 of 1)
Similar topics
Permissions in this forum:
You cannot reply to topics in this forum
