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

shoki · 02-06-2017, 07:45 PM

are there any limits to the dimensions this can be changed to ?

creepyhanzo · 17-08-2017, 09:17 AM

yes i love it great thx 15/15

deathart · 27-12-2017, 07:32 PM

Thanks you for the sharing script code, fonctional for 4.2 version?

sinister · 30-01-2018, 04:48 PM

Thank you for the share buddy, really useful!!!!!!!!

gujjerji · 07-03-2018, 06:32 AM

thank you soo much geat one i like that realt help full keep posting this please thank you again

mpro. · 15-04-2018, 11:44 PM

Thanks for sharing.

Best Regards,
mpro.

Deadwood · 29-09-2018, 11:58 PM

Thanks!!

But my hovercard doesn't work. How to fix?
https://i.imgur.com/ACaA1jN.png

RubensCM · 19-12-2018, 10:54 PM

Do not have one for the latest versions?
In any case, it may be useful for study

Jamesprush · 06-11-2021, 11:15 PM

This was the first time I've ever actually edited any custom html/css on IPB. Thank you so much, I really appreciate it.

[IPS4.1x] Change Avatar Style

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

RE: [IPS4.1x] Change Avatar Style

RE: [IPS4.1x] Change Avatar Style

RE: [IPS4.1x] Change Avatar Style

RE: [IPS4.1x] Change Avatar Style

RE: [IPS4.1x] Change Avatar Style

RE: [IPS4.1x] Change Avatar Style

RE: [IPS4.1x] Change Avatar Style

RE: [IPS4.1x] Change Avatar Style

RE: [IPS4.1x] Change Avatar Style