IP.Board Tutorials

[IPS4.1x] Change Avatar Style

Submitted by zLuckr0x, , Thread ID: 34465

Thread Closed
zLuckr0x
Newbie
Level:
0
Reputation:
0
Posts:
10
Likes:
1
Credits:
12
17-05-2017, 07:06 AM
#1
In this tutorial, I'll show you how you can create a different view to your board avatar on AuthorPane_info. Let's get started.

1- CSS Modifications

Go into core->front->custom->custom.css and add this code:

Code:
.cAuthorPane_photo img{
max-width: 170px;
}

2- Now, we'll edit the Templates of your theme. Go to forums->front->topics->postContainer and replace this code:

Code:
<li class='cAuthorPane_photo'>
{template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
</li>


To this:

Code:
<li class='cAuthorPane_photo'>
     {{if $comment->author()->pp_main_photo}}
         <a href='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}" seoTemplate="profile" seoTitle="$seoName"}' data-ipsHover data-ipsHover-target='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}&do=hovercard" seoTemplate="profile" seoTitle="$seoName"}' title="{lang="view_user_profile" sprintf="$name"}">
             <span class='ipsUserPhoto ipsUserPhoto_variable'>
                 <img src="{setting="base_url"}uploads/{$comment->author()->pp_main_photo}" />
             </span>
         </a>
     {{else}}
         <a href='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}" seoTemplate="profile" seoTitle="$seoName"}' data-ipsHover data-ipsHover-target='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}&do=hovercard" seoTemplate="profile" seoTitle="$seoName"}' title="{lang="view_user_profile" sprintf="$name"}">
             <span class='ipsUserPhoto ipsUserPhoto_variable'>
                 <img src="<Path_to>/default_photo.png" />
             </span>
         </a>
     {{endif}}
</li>


3- let's go to board configuration now. Go to: ACP > Users > Groups > EACH_USER_GROUP > Social and change the Maximum profile photo width/height to 300.

Done! Now, create a 170 x 300 avatar image and enjoy your new style.

Users browsing this thread: 2 Guest(s)