IPS4-Tutorial Change Avatar Style

[ADMIN 354]

 

Change Avatar Style

Preview

 
 
Modifie in  CSS:

• Select the skin you want to modify, then go to Core >> front >> custom> custom.css and add this code:

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

Modifie in Template

• Go to Forums >> front >> topic >> postconainer and search for:

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

Change:

<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>

Once done, save everything, and now go to the Groups. Click edit and go to the Social tab, search for:

Maximum profile photo width/height

Place 300 and go, save it and you're done. New size of the Avatars of your Forum will be 170x300, to change:

Here changes the Length

Maximum profile photo width/height

And here the Width

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