Changing admin avators.

[Sylvie Brett]

Forum URL: mollys.freeforums.net/

I did check the help guide first and there was a post about avators, but it didn't quite answer my question. Apologies if I'm wrong in creating this thread, if so feel free to delete this. But, It doesn't say about changing the avatar size for just admins/staff. Is that possible. Or are you only able to change the size for all.

Either way, thanks in advance.

[Retread]

Hi Sylvie Brett

EDIT: Upon further investigation, this strategy will NOT work. If a mini-profile for a staff member appears anywhere on the page, it will modify the css for ALL avatars on the page.

NO NOT USE!

If you have some css modifications that will successfully accommodate larger avatars for everyone, you can place those in the mini-profile Layout Template instead of in the Style Sheet. That way you can use an {if} loop and employ a template variable for the decision-making process.

You would append something like this to the very top or very bottom of the mini-profile layout template:

{if $[user.is_staff]}
<style>
   /* CSS TO ACCOMODATE LARGER AVATARS GOES BELOW THIS LINE */
   
   
</style>
{/if}

Insert the css where indicated.

[Sylvie Brett]

I'm not a huge expert on coding, I'm still learning, but I don't have a CSS modification for that. Where would I look for something like that. I've only ever had Invision Free boards in the past, so this is slightly different from what I'm used to.

[Retread]

Hi Sylvie Brett

After giving this a good long think, I believe it will be necessary to identify posts that are created by staff members but there isn't currently a way to do that in a parent element to the left panel. So we'll create one. This means we'll need a modification of two layout templates as well as the CSS in the Style Sheet.


Step-1

From your Admin panel, navigate:
Admin Home> Themes> Layout Templates
Click on Thread, then click on the Post List tab.

Select the desired theme in the dropdown to the right of the words: Current Theme

Line 2 should look like this:

<tr id="$[post.content_id]" class="$[post.content_class]{if $[post.even]} even{/if}{if $[viewing_recent_posts]} recent{/if}"
Replace that line with this line:

<tr id="$[post.content_id]" class="{if $[post.created_by.is_staff]}staffer {/if}$[post.content_class]{if $[post.even]} even{/if}{if $[viewing_recent_posts]} recent{/if}">

Click the Save Changes button at the bottom of the page or the Save Theme button near the top.

---

Step-2

From your Admin panel, navigate:
Admin Home> Themes> Layout Templates
Click on Conversations Page, then click on the Message List tab.

Select the desired theme in the dropdown to the right of the words: Current Theme

Line 2 should look like this:

<tr id="$[message.content_id]" class="$[message.content_class]{if $[message.even]} even{/if}">
Replace that line with this line:

<tr id="$[message.content_id]" class="{if $[message.created_by.is_staff]}staffer {/if} $[message.content_class]{if $[message.even]} even{/if}"> <td>


Click the Save Changes button at the bottom of the page or the Save Theme button near the top.

---

Step-3

From your Admin panel, navigate:
Admin Home> Themes> Advanced Styles & CSS
Click on the Style Sheet tab.

Select the desired theme in the dropdown to the right of the words: Current Theme

Scroll to the very bottom of the page and add this:

/* CSS modification to accomodate larger staff avatars */
/* (requires modifications of Message List and Post List layout templates) */
.posts .staffer .left-panel,
.messages .staffer .left-panel { width:222px; }
.staffer .mini-profile,
.staffer .avatar-wrapper.avatar_size_default{
   width:200px;
   margin:auto;
}
.staffer .mini-profile .avatar,
.staffer .avatar_size_default img{
       max-width:200px;
       max-height:200px;
   }
/* End of Section */
Click the Save Changes button at the bottom of the page or the Save Theme button near the top.

---

Notes:

This designed to accommodate avatars that are 200px high and 200px wide.

If you wish to limit the height to a different value, just change the max-height:200px to the desired maximum height.

If you wish to limit the width to a different value, you will need to make three changes.
Change width:200px; and max-width:200px; to the desired width.
Then change width:222px; such that it's 22px larger than the desired width.

All avatars hosted on ProBoards are resized to a maximum of 150px in height or width. If your staff members want to use larger avatars they will need to upload their avatar to an image hosting service and link to that avatar rather than uploading it.

---

Please let me know if you are successful or if you have any difficulties.

[Sylvie Brett]

AHH thank you so much, it's working. Thanks for your help with this.