Add A Featured Members Container (Random Images)

[Former Member]

Featured Members
Here you can add a container that will show random images (Avatars)
That will link to the members recent threads

Checked
Chrome - Firefox - Microsoft Edge - Internet Explorer 11

Screenshot


You will need to add each members avatar url
Where it says  myimages [1]
Enter the members avatar url

Then add the corresponding recent threads url for that member
where it says imagelinks[1]
Enter the members recent threads url Link

You can add as many you wish
Remember to add the images URL

myimages[6]="Add members Avatar Url Here"

With the corresponding recent threads url for that member

imagelinks[6]="Add Members Recent Threads Link Here"

You can change the text message to suit your forum
______________________

Add The Code Below ON HOME TEMPLATE
Above or Below $[news]

You can change the background colour
background-color: #FAFAFA;



<div class="container">
<div class="title-bar"><h2>Featured Members</h2></div>
<div class="content">
<br /><div>
<div style="float:left; width: 125px; height: 120px; margin: 10px; background-color: #FAFAFA;">
<center><br><center><script language="JavaScript">
<!--
/*
Random Image Link Script
By Website Abstraction (http://www.wsabstract.com)
and Java-scripts.net (http://www.java-scripts.net)
*/
function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="Add members Avatar Url Here"
myimages[2]="Add members Avatar Url Here"
myimages[3]="Add members Avatar Url Here"
myimages[4]="Add members Avatar Url Here"
myimages[5]="Add members Avatar Url Here"

//specify corresponding links below
var imagelinks=new Array()
imagelinks[1]="Add Members Recent Threads Link Here"
imagelinks[2]="Add Members Recent Threads Link Here"
imagelinks[3]="Add Members Recent Threads Link Here"
imagelinks[4]="Add Members Recent Threads Link Here"
imagelinks[5]="Add Members Recent Threads Link Here"

var ry=Math.floor(Math.random()*myimages.length)

if (ry==0)
ry=1
document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" width="50" height="50" border=0></a>')
}
random_imglink()
//-->

</script><br /><b>Featured Member</b><br></center><br /></center>
</div><br /><p>Testing random images - Linking to members recent threads - Featured Members<br>
Clicking on the small avatar to the left will link to members recent threads
<br /><br />Add more text info a links here
</p>
</div>
<br /></div></div><br />


When adding changing the text do not remove the <p>  </p>
Add the text and info in between the paragraph tags
<p>Like So</p>


Steve

Last Edit:
Checked Browsers Chrome - Firefox - Microsoft Edge - Internet Explorer 11

Attachments:

[Former Member]

A Little Update

Checked using latest browsers
Chrome - Firefox - Microsoft Windows Edge - IE 11

This will Show Members Random Avatars
With The Link & Username Under The Avatar

Screenshot

You can also preview it on my test forum

Also on my forum

thecreativepen.proboards.com


You will need to enter the avatar of each user
With the corresponding recent threads url

Then enter the username for the image

You can add as many as you like
But you must update the images = new Array(7);
For the amount of image links
Here we have it set to display 7 image links counting from the 0

All Image Links Must Be On The ONE LINE

When adding changing the featured member text do not remove the <p> </p>
Add the text and info in between the paragraph tags
<p>Like So</p>


Add The Code Below ON THE HOME TEMPLATE
Above or Below $[news]

You can also use Headers & Footers
Depending on where you want the code

If you have rather long usernames
Try increasing  the width: 140px; to something like 200px;

Or try changing
letter-spacing: 3px; text  to  letter-spacing: 1px; text



<div class="container">
<div class="title-bar"><h2>Add Table Tittle Here</h2></div>
<div class="content">
<div style="float:left; width: 140px; height: 90px; margin: 10px; background-color: #FAFAFA;">
<center><br>
<script language="JavaScript">

images = new Array(7);

images[0] = "<a style='font: bold 10px/10px verdana, sans-serif; color: #666; letter-spacing: 3px; text-decoration: none; 'href = 'ADD RECENT THREADS URL LINK HERE'><img src='ADD AVATAR IMAGE URL HERE' title='ADD USERNAME HERE'width='50' height='50' border='0'><br />ADD USERNAME HERE</a>";

images[1] = "<a style='font: bold 10px/10px verdana, sans-serif; color: #666; letter-spacing: 3px; text-decoration: none; 'href = 'ADD RECENT THREADS URL LINK HERE'><img src='ADD AVATAR IMAGE URL HERE' title='ADD USERNAME HERE' width='50' height='50' border='0'><br />ADD USERNAME HERE</a>";

images[2] = "<a style='font: bold 10px/10px verdana, sans-serif; color: #666; letter-spacing: 3px; text-decoration: none; 'href = 'ADD RECENT THREADS URL LINK HERE'><img src='ADD AVATAR IMAGE URL HERE' title='ADD USERNAME HERE' width='50' height='50' border='0'><br />ADD USERNAME HERE</a>";

images[3] = "<a style='font: bold 10px/10px verdana, sans-serif; color: #666; letter-spacing: 3px; text-decoration: none; 'href = 'ADD RECENT THREADS URL LINK HERE'><img src='ADD AVATAR IMAGE URL HERE' title='ADD USERNAME HERE' width='50' height='50' border='0'><br />ADD USERNAME HERE</a>";

images[4] = "<a style='font: bold 10px/10px verdana, sans-serif; color: #666; letter-spacing: 3px; text-decoration: none; 'href = 'ADD RECENT THREADS URL LINK HERE'><img src='ADD AVATAR IMAGE URL HERE' title='ADD USERNAME HERE' width='50' height='50' border='0'><br />ADD USERNAME HERE</a>";

images[5] = "<a style='font: bold 10px/10px verdana, sans-serif; color: #666; letter-spacing: 3px; text-decoration: none; 'href = 'ADD RECENT THREADS URL LINK HERE'><img src='ADD AVATAR IMAGE URL HERE' title='ADD USERNAME HERE' width='50' height='50' border='0'><br />ADD USERNAME HERE</a>";

images[6] = "<a style='font: bold 10px/10px verdana, sans-serif; color: #666; letter-spacing: 3px; text-decoration: none; 'href = 'ADD RECENT THREADS URL LINK HERE'><img src='ADD AVATAR IMAGE URL HERE' title='ADD USERNAME HERE' width='50' height='50' border='0'><br />ADD USERNAME HERE</a>";

index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>

</center><br /><br />
</div><br /><p>Testing random images - Linking to members recent threads<br>
Clicking on the small avatar or username to the left will link to members recent threads
<br /><br />A Test Showing Random Avatars Link And Username</p>
</div></div>



Last Edit: Updated Screenshots - How to change width - And letter spacing
 
Steve