How can I change the size of the avatars in the topic view? Currently they are 50 x 50, can I change this to be larger, and will the avatars fill up the whole size? Let’s say to 80 x 80?
Support Forum
The avatar size is handled by a max-width rule in the forum admin menu, so you can change that in Forum > Profiles > Avatars > Maximum Avatar Display Width (Pixels)..
This will resize the avatar throughout the forum though, not just in topic view. You could make it larger only in topic view with a bit of a CSS change if that interests you? If so, do you have a child theme set up?
Ike said
The avatar size is handled by a max-width rule in the forum admin menu, so you can change that in Forum > Profiles > Avatars > Maximum Avatar Display Width (Pixels)..This will resize the avatar throughout the forum though, not just in topic view. You could make it larger only in topic view with a bit of a CSS change if that interests you? If so, do you have a child theme set up?
Yes, I have a child theme already in place for sp topic view in reboot. I want to change the size of the avatars only in topic view.
I believe I need to edit this in the reboot.php? I tried it by using using the inspect element and changing the value from 50 to 100, though it won’t scale it. I see one user has an avatar which is 100 x 100, but all others are using the 50x ones.
It won’t scale it because the rule set in the admin panel happens inline and will overwrite the CSS.
To get around this, you’ll first have to add a new max-width rule then the actual size. Try something like:
#spMainContainer .spTopicPostSection .spPostUserAvatar img {
max-width: 80px !important;
width: 80px;
}
The !important will overwrite the inline max-width, then your width underneath can be anything up to and including whatever your new max-width setting is.
You should really try and do this via the template displkay function – sp_UserAvatar() (see: https://simple-press.com/documentation/codex/api/template-functions-and-the-api/display-template-functions/common-view/sp_useravatar/) which has a ‘size’ argument that should be changed.
Ike said
It won’t scale it because the rule set in the admin panel happens inline and will overwrite the CSS.To get around this, you’ll first have to add a new max-width rule then the actual size. Try something like:
<br />#spMainContainer .spTopicPostSection .spPostUserAvatar img { max-width: 80px !important; width: 80px; }<br />The !important will overwrite the inline max-width, then your width underneath can be anything up to and including whatever your new max-width setting is.
I changed it in reboot.php to this:
#spMainContainer .spTopicPostSection .spPostUserAvatar img { max-width: 50px !important; width: 100px; }
But it did not change the setting.
Mr Papa said
did you follow Andy’s suggestion for the template function?
Yea, I read it but didn’t quite get it, so I didn’t want to start messing with stuff that will break the forum. One thing though, which is the main reason why I didn’t do anything else, is that I have the user’s avatars show up in the forum view instead of the stock ones provided, so I did not want those to change in size. I only want the avatar to change in size when viewing the topic.
Sorry Alex,
I wasn’t aware you could change the size using the template function, Andy is right that’s really the correct way to do it. So – Open your spTopicViewDesktop.php from your child theme and locate the function on line 134 –
sp_UserAvatar('tagClass=spPostUserAvatar spCenter&context=user', $spThisPostUser);
Add the argument ‘size=80px’ so it will then appear –
sp_UserAvatar('tagClass=spPostUserAvatar spCenter&context=user&size=80px', $spThisPostUser);
It’s worth noting that this only allows you to use 80 x 80px avatars in topic view, it doesn’t force it as the argument imposes a max-width rule not a width rule. This means that a user who has a 50 x 50px avatar will not see a change, but a user using an 80 x 80px avatar before will now see it full size as it will no longer be restricted to 50 x 50px.
So if you wanted to force 80 x 80px avatars in topic view, you would still need to add the CSS rule I posted before changing the width of .spPostUserAvatar img to 80px, you just don’t need to add the max-width CSS rule to the stylesheet.
And yes this will only affect topic view, everything posted in this topic so far has been topic view specific so you will retain the size constraints elsewhere.
Ike said
So if you wanted to force 80 x 80px avatars in topic view, you would still need to add the CSS rule I posted before changing the width of .spPostUserAvatar img to 80px, you just don’t need to add the max-width CSS rule to the stylesheet.
And yes this will only affect topic view, everything posted in this topic so far has been topic view specific so you will retain the size constraints elsewhere.
So like this:
#spMainContainer .spTopicPostSection .spPostUserAvatar img { max-width: !important; width: 80px; }
No, you don’t need the max-width rule at all since it’s now defined by the template function ‘size’ argument.. All you’d need is –
#spMainContainer .spTopicPostSection .spPostUserAvatar img {
width: 80px;
}
So I changed in reboot.php this:
#spMainContainer .spTopicPostSection .spPostUserAvatar img {
width: 100px;
}
and then in sptopicview this:
sp_UserAvatar('tagClass=spPostUserAvatar spCenter&context=user&size=100px', $spThisPostUser);
Yet it will not force the avatars to scale. Only the ones which were already larger are scaling.
It definitely works as it’s the way I did it locally to make sure before posting the fix.
I assume were talking about the website your email is associated with (from your profile popup here).
I had a quick look and I can see the 100px rule in-line.
Inspecting the avatar though, the only rule I see is the standard Reboot ‘margin: auto;’ rule which is the only CSS applied to the avatar as standard.
So, where exactly did you put your code? It looks like the only stylesheet loaded is reboot.php from the reboot folder, so if you are running a child theme I’m not seeing the code loaded at all.
Ike said
It definitely works as it’s the way I did it locally to make sure before posting the fix.I assume were talking about the website your email is associated with (from your profile popup here).
I had a quick look and I can see the 100px rule in-line.
Inspecting the avatar though, the only rule I see is the standard Reboot ‘margin: auto;’ rule which is the only CSS applied to the avatar as standard.
So, where exactly did you put your code? It looks like the only stylesheet loaded is reboot.php from the reboot folder, so if you are running a child theme I’m not seeing the code loaded at all.
The child theme is there. I have used it for a while now, as you can see from the mods to reboot. I changed it in reboot.php (child) and in sptopicview for desktop (child).
Here are the screenshots:






