Avatar size

[Elena-Viorica]

Hi

Can anyone tell me how to change the size / dimensions of the avatars in topic view? They are set to 200x200 pixels in my ACP but they appear to be smaller than that.

[Elena-Viorica]

Nobody knows how to make the avatars larger on IPB 4.1? Seriously? 

[opentype]

The actual display of whatever pixel size is delivered with the image is defined in the theme’s CSS. You can override it like this (for topic display in this example).

ipsUserPhoto_large img, img.ipsUserPhoto_large, .ipsUserPhoto_large::after {
    border-radius: 50px;
    height: 100px;
    width: 100px;
}

 

[Elena-Viorica]

On 1/10/2016 at 2:16 PM, opentype said:

The actual display of whatever pixel size is delivered with the image is defined in the theme’s CSS. You can override it like this (for topic display in this example).

ipsUserPhoto_large img, img.ipsUserPhoto_large, .ipsUserPhoto_large::after {
    border-radius: 50px;
    height: 100px;
    width: 100px;
}

 

Where exactly would I have to add that code?

[pilotguy]

37 minutes ago, Elena-Viorica said:

Where exactly would I have to add that code?

I could be wrong here but you should be able to place that in your custom.css for whatever theme you are editing. 

[Robert Angle]

On 1/22/2016 at 8:37 AM, Elena-Viorica said:

Where exactly would I have to add that code?

Go to AdminCP -> Customization -> Themes -> {YourTheme} and click the <> edit code link.

Search for "userPhoto_Large" and toggle from Templates to CSS. The file you are looking for should be CSS -> Core -> Framework -> misc.css and you'll see various entries, such as userPhoto_small, userPhoto_medium, and userPhoto_large which is used on larger screens/PC view. You can increase the dimensions here....

.ipsUserPhoto_large img, img.ipsUserPhoto_large, .ipsUserPhoto_large:after {
	width: 90px;
	height: 90px;
	{{if theme.rounded_photos}}
		border-radius: 45px;
	{{endif}}
}

If you use rounded photos, you want the border-radius value to be half of your height and width dimensions. For example, if I increase mine from 90px to 100px, then I would want to change my border-radius to 50px or else your avatars will look more like a hamburger, lol.

[Tracy Perry]

Normally editing (especially for CSS) the core template files is not a recommended method since they will be removed on an upgrade.  You should use the custom.css for any CSS customizations.

[Robert Angle]

Just now, Tracy Perry said:

Normally editing (especially for CSS) the core template files is not a recommended method since they will be removed on an upgrade.  You should use the custom.css for any CSS customizations.

This makes sense. Do we just copy the lines from another.css file over to the custom.css file and when the pages get served the values in the custom.css file will trump/overwrite the values in the other .css files?

[Tracy Perry]

Just now, Robert Angle said:

This makes sense. Do we just copy the lines from another.css file over to the custom.css file and when the pages get served the values in the custom.css file will trump/overwrite the values in the other .css files?

Generally what is in custom.css will take precedence over the default stuff CSS.  

But... and you knew there would be one of these... I HAVE had to, upon occasion, force the CSS with the !important parameter.

[Elena-Viorica]

Uhm... You do realize that for your average admin, who has zero knowledge about coding, you're talking a foreign language, right?

How exactly did we get from an admin-friendly, plug-and-play script in which all we had to do was type the avatar size in the ACP and it would apply to all the themes (IPB 3.4) to a script in which we have to manually edit pages of CSS to achieve the same result (IPB 4.1)?

[opentype]

24 minutes ago, Elena-Viorica said:

How exactly did we get from an admin-friendly, plug-and-play script in which all we had to do was type the avatar size in the ACP and it would apply to all the themes (IPB 3.4) to a script in which we have to manually edit pages of CSS to achieve the same result (IPB 4.1)?

Probably because that’s the better way to do it. One could have different themes available on the same installation, where the layout only makes sense with different sizes. Forcing a certain size globally could essentially break the theme layout or make it a pain to work with. 

[Elena-Viorica]

IPB 3.4 has existed for over 5 years. Has anyone ever complained about global avatar size for all themes? I've been on dozens of IPB 3-based communities and I have never seen an IPB 3.4 theme ever having the issue you mentioned.

I'm sorry, but for me, this is a bigger pain to work with. See this thread? There are 11 posts in it, several members contradicting each other, and I still have no idea how to change the avatar size in topic view.

I was never informed before upgrading to IPS 4.1 that I would have to learn coding. I have neither the time nor the inclination towards learning to code, and I find having to scroll through CSS pages rather annoying.

[opentype]

4 minutes ago, Elena-Viorica said:

I was never informed before upgrading to IPS 4.1 that I would have to learn coding. 

You weren’t informed, because it’s not true. 
 

[Robert Angle]

Here's some revised instructions. Based on what @Tracy Perry said above, your modification here will be protected if you upgrade your template.

1) Go to AdminCP -> Customization -> Themes -> {YourTheme} and click the <> edit code link.

2) Click on the CSS tab.

3) Find this file Core -> Front ->Custom -> custom.css and add the following ANYWHERE in the file and save it....

*/ OVERRIDE AVATAR SIZE ON POSTS */

.ipsUserPhoto_large img, img.ipsUserPhoto_large, .ipsUserPhoto_large:after {
	width: 90px;
	height: 90px;
	{{if theme.rounded_photos}}
		border-radius: 45px;
	{{endif}}
}

If you use rounded photos, you want the border-radius value to be half of your height and width dimensions. For example, if I increase mine from 90px to 100px, then I would want to change my border-radius to 50px.

I can make a video on how this is done, or can do it for you if you are comfortable giving me such permissions temporarily.

[Alexander Scott]

Regarding Avatar sizes, is there a way to make them look like this: http://imgur.com/HBObJIO  this is from my 3.4.8 Forum. I'd like for avatars to be like that in topics for 4.1.7

[Morrigan]

I brought this up before release @Shintaro Unfortunately there is no way, by default, to do this but it is possible. Instructions are here:

 

 

[Tracy Perry]

On 1/25/2016 at 8:16 AM, Elena-Viorica said:

Uhm... You do realize that for your average admin, who has zero knowledge about coding, you're talking a foreign language, right?

Uhmmm... I'm more used to an admin being an actual admin and not a site owner/moderator.  Admin entails certain abilities and knowledge to perform those duties.  But I do come from a script (and use a second one) that does not follow the plug & play philosophy, so I admit my attitude may be "jaded" in that aspect.

As for editing CSS - that's nowhere near "coding".  An admin of any script should have a working knowledge of CSS & HTML.

[Elena-Viorica]

23 hours ago, Tracy Perry said:

As for editing CSS - that's nowhere near "coding".  An admin of any script should have a working knowledge of CSS & HTML.

We all have knowledge of different subjects and ares of expertise. Expecting the owner of a literature-related forum to have CSS and HTML skills is like expecting a programmer who casually reads novels in his free time to be able to write a critical analysis about the characters, themes and motifs.

[Tracy Perry]

4 hours ago, Elena-Viorica said:

We all have knowledge of different subjects and ares of expertise. Expecting the owner of a literature-related forum to have CSS and HTML skills is like expecting a programmer who casually reads novels in his free time to be able to write a critical analysis about the characters, themes and motifs.

You said the watchword (highlighted) above.  There is a difference between a site OWNER and a site ADMIN.  They don't necessarily comport to being one and the same.
You may frequently have site owners that want to claim ADMIN title - but in my way of thought, if they can't perform the functions, then it is an empty title.

And there's nothing at all wrong with referring to oneself as a Site Owner instead of Site Admin/Administrator

[Elena-Viorica]

 

 

On 1/23/2016 at 11:26 PM, Robert Angle said:

Go to AdminCP -> Customization -> Themes -> {YourTheme} and click the <> edit code link.

Search for "userPhoto_Large" and toggle from Templates to CSS. The file you are looking for should be CSS -> Core -> Framework -> misc.css and you'll see various entries, such as userPhoto_small, userPhoto_medium, and userPhoto_large which is used on larger screens/PC view. You can increase the dimensions here....

.ipsUserPhoto_large img, img.ipsUserPhoto_large, .ipsUserPhoto_large:after {
	width: 90px;
	height: 90px;
	{{if theme.rounded_photos}}
		border-radius: 45px;
	{{endif}}
}

If you use rounded photos, you want the border-radius value to be half of your height and width dimensions. For example, if I increase mine from 90px to 100px, then I would want to change my border-radius to 50px or else your avatars will look more like a hamburger, lol.

I followed your instructions on the dark theme made by IPS, but it didn't change the avatar size in topic view.

[Netherlord]

23 minutes ago, Elena-Viorica said:

 

 

I followed your instructions on the dark theme made by IPS, but it didn't change the avatar size in topic view.

I fiddled with the dark theme myself it seemed to ignore custom css. so add that code to the dark.css template instead. that might do it.

[Robert Angle]

26 minutes ago, Elena-Viorica said:

I followed your instructions on the dark theme made by IPS, but it didn't change the avatar size in topic view.

I just downloaded and installed IPS4 Dark theme and tried this...

It's working just fine for me.

EDIT: I think my mistake was the comment field should be slash then asterisks, not the other way around....

/* THIS IS A PROPER COMMENT */

*/ THIS IS NOT A PROPER COMMENT */ 

Funny how the smallest thing will throw it all off

[Elena-Viorica]

Interesting. It seems to be working on some themes, but not on all. Thank you for your instructions.