[TUTORIAL] Custom Size Avatar (4.x.x) - Two Methods

Mazzoni · 05-04-2022, 05:27 PM

1st Method
Go to your AdminCP > Customization > Themes > Edit HTML & CSS
- Search for postContainer and search for this code:

Code:
<li data-role='photo' class='cAuthorPane_photo'>
 <div class='cAuthorPane_photoWrap'>
 {template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
 {{if $comment->author()->modShowBadge()}}
          <span class="cAuthorPane_badge cAuthorPane_badge--moderator" data-ipsTooltip title="{lang="member_is_moderator" sprintf="$comment->author()->name"}"></span>
          {{elseif $comment->author()->joinedRecently()}}
 <span class="cAuthorPane_badge cAuthorPane_badge--new" data-ipsTooltip title="{lang="member_is_new_badge" sprintf="$comment->author()->name"}"></span>
 {{endif}}
 {{if !$comment->isAnonymous() and $comment->author()->canHaveAchievements() and \IPS\core\Achievements\Rank::show() and $rank = $comment->author()->rank()}}
 {$rank->html( 'cAuthorPane_badge cAuthorPane_badge--rank ipsOutline ipsOutline:2px' )|raw}
 {{endif}}
 </div>
 </li>

https://i.imgur.com/CEsBQum.png

Replace that code for this one and save it!

Content locked

This content has been locked. Please login or register in order to unlock it.

Now go to CSS, Custom.css and paste this code and save it!

Content locked

This content has been locked. Please login or register in order to unlock it.

And there you go xD
[Image: Hz2nj3H.png]

https://i.imgur.com/Hz2nj3H.png
____________________________________________________________________________________________________________

2nd Method

Go to your AdminCP > Customization > Themes > Edit HTML & CSS
In CSS, search for Misc.css and then for User Photos!
[Image: 3ebNl7D.png]

https://i.imgur.com/3ebNl7D.png

Now, in .ipsUserPhoto change line-height: 1px; to line-height: 0px;
and margin: 2px; to margin-top: -8px; and margin-bottom:-8px;

It will look like this:
[Image: QfmYaMo.png]

https://i.imgur.com/QfmYaMo.png

Save!

Now scroll down a bit, until you find:

Code:
.ipsUserPhoto_large {
 width: 90px;
 height: 90px;
 }

Just change the width and height values from 90px to 160px and save it!

It will look like this:
[Image: o5NJrCM.png]

https://i.imgur.com/o5NJrCM.png

Rounded Photo example for this 2nd Method.
[Image: 94d0HmJ.png]

https://i.imgur.com/94d0HmJ.png

This hidden content has been reported as still working 0 times this month.

1 times in total

[TUTORIAL] Custom Size Avatar (4.x.x) - Two Methods

Submitted by Mazzoni, 05-04-2022, 05:27 PM, Thread ID: 239794