uCoz is planing in future to add this feature, so when it will be ready I suggest you to switch on it, but now you can use this one, its not perfect, but it helps to find your friend fast. If you are using module "Blog" than this is not for you! We will need to use Blog to add this feature on your profile page!
You must follow all 8 steps, it's very important, if you skip one step, I guess I will see a post with question: "Help me, I did all what was in tutorial and it didn't work!"
Ok, let's start!
1. step.
Go to your sites CP and install module "Blog"
2. step.
Go to Main » Blog » Module settings and set Fields of a new entry form: like it is in screenshot
+ Enable capability to search entries of a particular user: Save it! 3. step.
Go to Main » Users » User groups » Set permissions for all groups and check following:
Add new entries (All users can add friends)
Remove own entries (Users can remove friends)
And uncheck:
Pre-moerate new entries (must be verified) (so that user don't need to wait for admins to moderate his friends
Edit own entries (No need to edit friend!)
4. step.
Go to Main » Customize design » Editing templates >> Blog >> Page of the entries archive and replace all code with this:
Code
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>$TITLE_BAR$ - $SITE_NAME$</title>
<?$META_DESCRIPTION$?>
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
<style>
#puzadpn {display:none;}
</style>
</head>
<body>
<table style="width: 100%;"><tr><td>
$BODY$
</td></tr>
<tr><td>
<center>
$POWERED_BY$
</center>
</td></tr>
</table>
<!-- Friends -->
<script type="text/javascript">
if('$PAGE_ID$' == 'add') {
if(document.getElementById('blM16')) document.getElementById('blM16').style.display = 'none'; // Это чтоб не было Страницы добавления
document.getElementById('blF1').value = parent.document.getElementById('favik2').innerHTML; // Имя пользователя $TITLE$
document.getElementById('blF12').value = parent.document.getElementById('favik3').innerHTML; // ID пользователя $OTHER2$
document.getElementById('blF13').value = parent.document.getElementById('favik3').innerHTML; // Логин $OTHER3$
document.getElementById('blF11').value = parent.window.location.href; // Ссылка пользователя $OTHER1$
document.getElementById('doSmbBt').click();
alert('This user is now in your friends list!'); // Это алерт
}
</script>
</body>
</html>
5. step.
Go to Main » Customize design » Editing templates >> Blog >> Appearance of entries and replace all code with this:
Code
<div class="u-friends" style="width: 33%; float: left;">
<!-- Friends -->
<style>
.mbord {border: 1px solid #DAE1E8;padding: 5px 5px 5px 5px;background: #FFFFFF;}
.mbord:hover {border: 1px solid #C2CFDB;padding: 5px 5px 5px 5px;background: #FFFFFF;}
#photo {width:5px;}
.photo {
text-decoration:none;
color:black;
border-bottom: 1px solid #DCDCDC;
border-top: 1px solid #DCDCDC;
border-left: 1px solid #DCDCDC;
border-right: 1px solid #DCDCDC;
background: #ffffff;
padding: 5px 5px 5px 5px;
text-align:left;
}
.photo:hover {
background: #FFFFFF;
color:#374547;
border-bottom: 1px solid #3787B5;
border-top: 1px solid #3787B5;
border-left: 1px solid #3787B5;
border-right: 1px solid #3787B5;
text-decoration:none;
}
.avatar2 img { width: 100px; height: auto; }
#ava$ID$ img {width: 100px; height: auto;}
.proava {
text-decoration:none;
background: #ffffff;
display: block;
border: 1px solid #FFFFFF;
color:black;
padding: 4px 4px 4px 4px;
text-align:left;
}
.proava:hover {
background: transparent url('/');
border: 1px solid #1C436E;
color: #000000;
font-weight: bold;
padding: 4px 4px 4px 4px;
text-decoration:none;
}
</style>
<style>
.vibfr {display:block;padding-bottom: 3px;padding-top: 3px;border-bottom: 1px solid #DAE1E8;}
.vibfr:hover {display:block;padding-bottom: 3px;padding-top: 3px;background: #EEF2F4;border-bottom: 1px solid #DAE1E8;}
</style>
<div class="mbord">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td style="padding-left: 10px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">
<div colspan="2" style="padding-bottom: 2px;" align="left">
<!-- Username and link -->
<b><a href="$OTHER1$">$TITLE$</a></b> $MODER_PANEL$ <span id="sta$ID$"></span>
<!-- Username and link -->
</div>
</td>
</tr>
<tr>
<td valign="top">
<div style="border-top: 1px solid rgb(218, 226, 232); padding-top: 1px; padding-bottom: 1px;" align="center">
<div class="photo">
<div class="avatar2">
<!-- Avatars -->
<span id="ava$ID$"></span>
<!-- Avatars -->
</div></div>
</div></td>
<td align="right" valign="top" width="150">
<div style="border-top: 1px solid rgb(218, 226, 232); padding-top: 10px; padding-bottom: 10px;" align="left">
<a href="/index/8-$OTHER2$" class="proava">Profile</a>
<a href="/index/14-$OTHER2$-0-1" class="proava">Send PM</a>
<a href="/blog/0-1-0-0-17-$OTHER2$" class="proava">His friends</a>
</div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
<script>$('#ava$ID$').load('$OTHER1$ #avatar');</script>
<script>$('#sta$ID$').load('$OTHER1$ #status');</script>
</div>
6. step.
Go to Main » Customize design » Editing templates >> Users >> User personal page and add this code where you want button "Add to friends list" to appear!
Code
<!-- Friends -->
<?if(!$_IS_OWN_PROFILE$)?>
<td>
<!-- to add -->
<span id="favik"></span>
<span id="favik2" style="display:none;">$_USERNAME$</span>
<span id="favik3" style="display: none;">$_USER_ID$</span>
<span id="favik4" style="display: none;">$_USERNAME$</span>
<script language="JavaScript">
function add_fr() {
if(document.getElementById('favik')) document.getElementById('favik').innerHTML = '<iframe style="width:1px;height:1px;" frameborder="0" scrolling="no" hspace="0" vspace="0" allowtransparency="true" src="/blog/0-0-0-0-1"></iframe>';
}
</script>
<!-- to add/ -->
<div onmouseover="this.className='MmenuOver';" class="MmenuOut" onmouseout="this.className='MmenuOut'">
<!-- button -->
<a href="javascript://" onClick="add_fr();"><img alt="Add to friends list" src="/profile_user/icons/add_friend.png" height="16px"></a>
<!-- button/ -->
</div>
</td>
<?endif?>
<!-- Friends/ -->
/profile_user/icons/add_friend.png Change to your image
7. step.
Where you want friends list with avatar and all other things to appear you will need to add this code:
Code
<!-- Friends -->
<?if($_BLOG_ENTRIES$>0)?> <hr>
<center><a href="javascript:openLayerA('ID','/blog/0-0-0-0-17-$_USER_ID$','My Friends','900','700','auto')"><?if($_IS_OWN_PROFILE$)?>My Friends<?else?>His Friends<?endif?></a></center>
<?endif?>
<hr>
<table style="width: 100%;">
<?if($_BLOG_ENTRIES$>0)?>
<tr><td>
<div style="overflow:auto; height:150px;width:100%;">
<span id="friends"></span>
<script type="text/javascript">$.get('/blog/0-0-0-0-17-$_USER_ID$', function(photo){$('#friends').append($('div.u-friends:lt(100)', photo))});</script>
</div>
</td></tr>
<?endif?>
<!-- Friends -->
8. step.
Now if you want to see all your friends avatars in your friends list to show up you will need to remake your avatar code in profile page
By default it is:
Code
<?if($_AVATAR$)?>$_AVATAR$
<?endif?>
Now you will need to make it like this:
Code
<span id="avatar"><?if($_AVATAR$)?>$_AVATAR$<?else?><img src="/images/noavatar.png" border="0"><?endif?></span>
/images/noavatar.png you will need to replace with your image!
Thats all!
I'am author of this tutorial I made a big changes to this codes
Source of default codes
forucoz.com This tutorial in Latvian language you can find
here!
If I will see this tutorials copy on other sites without my permission your site will be reported for Copyright Violations
Tutorial Copyright By uCozers