Show Avatar On Last Post Column

[Former Member]

Tested Using Latest Browsers
Windows 10
Chrome - Firefox - Microsoft Edge - IE 11
Show Avatar On Last Post Column 

Screenshots







You can preview it also on my test forum
tcptestingboard.boards.net/


Go TEMPLATES > BOARD > BOARD LIST


Look For {if $[board.last_thread]}

And Replace The Lines Of Code below

$[board.last_thread.recent_link]<br />
by $[board.last_thread.last_post.created_by]<br />
<span class="date">$[board.last_thread.last_post.created_on]</span>

With This Code
<!-- Template Avatar On Last Post Column by xsteveuk -->
<div style="float: left; width: 70px;">$[board.last_thread.last_post.created_by.avatar_small]</div><center>$[board.last_thread.recent_link]<br><br><br>By $[board.last_thread.last_post.created_by]
<br><br><br><hr>$[board.last_thread.last_post.created_on]</center>

If don't want the horizontal bar
Try the code below
You can preview it on my test forum
tcptestingboard.boards.net/

<!-- Template Avatar On Last Post Column by xsteveuk -->
<div style="float: left; width: 70px;">$[board.last_thread.last_post.created_by.avatar_small]</div><center>$[board.last_thread.recent_link]<br><br><br>By $[board.last_thread.last_post.created_by]
<br>$[board.last_thread.last_post.created_on]</center>

 
To Use This Template
It is recommended to use the Shorten Thread Links on homepage
 by Brian

GLOBAL HEADER

<script type="text/javascript">
// Shorten thread links on homepage
$(document).ready(function(){
$('.thread-recent-link').each(function(){
var thMaxL = 40; // Max characters
if($(this).html().length > thMaxL)
$(this).html($(this).html().substring(0,thMaxL)+'...');
});});
</script>


__________________________________________


If you want to circle the avatar



Try adding the code below to very bottom of the Style Sheet

.boards .avatar_size_small { .rounded-corners(50%, 50%, 50%, 50%); }
.boards .avatar_size_small > img { .rounded-corners(50%, 50%, 50%, 50%); }
.boards .avatar_size_small { .rounded-corners(50%, 50%, 50%, 50%); }
.boards .avatar_size_small > img { .rounded-corners(50%, 50%, 50%, 50%);border:1px solid #cccccc; }
.boards .avatar_size_small img {
border-radius: 100%;
height: 100px; width: 100px;
;border:1px solid #cccccc;
}

Steve

Last Edit: 
Added how to circle the avatar

[Former Member]

If you want the avatar to display smaller

Screenshot


Try the code below

<div style="float: left; width: 35px;">$[board.last_thread.last_post.created_by.avatar_quote]</div><center>$[board.last_thread.recent_link]<br><br>By $[board.last_thread.last_post.created_by]
<br>$[board.last_thread.last_post.created_on]</center>

If you want circle the small avatar

Screenshot


Add the code below to bottom of the STYLE SHEET

.boards .avatar_size_quote { .rounded-corners(50%, 50%, 50%, 50%); }
.boards .avatar_size_quote > img { .rounded-corners(50%, 50%, 50%, 50%); }
.boards .avatar_size_quote { .rounded-corners(50%, 50%, 50%, 50%); }
.boards .avatar_size_quote > img { .rounded-corners(50%, 50%, 50%, 50%);border:1px solid #cccccc; }
.boards .avatar_size_quote img {
border-radius: 100%;
height: 100px; width: 100px;
;border:1px solid #cccccc;
}


It is recommended to use the Shorten Thread Links on homepage
With this template
See Post above

[Former Member]

Is it possible for showing avatar on last posting column to allow for long descriptions?
Is the avatar supposed to only show when a member is logged into the forum?
My testing site.

[Former Member]

Dec 12, 2015 6:19:04 GMT -8 @womenonly said:

Is it possible for showing avatar on last posting column to allow for long descriptions?
Is the avatar supposed to only show when a member is logged into the forum?
My testing site.

The avatar should show to guests viewing if you have your board set to who can view "Everyone"
It's recommended to use the Shorten Thread Links on homepage
to save space & size with long long descriptions is why I recommend the Shorten Thread Links on homepage

[shingamix]

hey I added the code to the board list and then previewed it and all this appeared too.




I did everything as instructed. WTF did this??

and for some reason it doubles the last board in each category too.

[Former Member]

Hi, shingamix

A link to your forum may help Did you copy the copy the code and place it as specified

[shingamix]

xsteveuk I tried it again after I reset the code there and I got it to work. thanks

[?adwoman?]

missingawtandgl.proboards.com/
how move the by line up near the top?

[Former Member]

Jan 1, 2016 9:12:06 GMT -8 ?adwoman? said:

missingawtandgl.proboards.com/
how move the by line up near the top?

If you are using the Shorten Thread Links GLOBAL HEADER
Try changing  the var thMaxL = 40; // Max characters  to 20 
It will shorten the thread titles

screenshot Max characters to 20



screenshot Max characters to 15

[?adwoman?]

Jan 1, 2016 11:09:27 GMT -8 @xsteveuk said:

Jan 1, 2016 9:12:06 GMT -8 ?adwoman? said:

missingawtandgl.proboards.com/
how move the by line up near the top?

If you are using the Shorten Thread Links GLOBAL HEADER
Try changing  the var thMaxL = 40; // Max characters  to 20 
It will shorten the thread titles

screenshot Max characters to 20



screenshot Max characters to 15

Thank