[IPS4.1x] Change Avatar Style

zLuckr0x · 17-05-2017, 07:06 AM

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.

[IPS4.1x] Change Avatar Style

Submitted by zLuckr0x, 17-05-2017, 07:06 AM, Thread ID: 34465