Hiya, currently we have the small (35*35px) userpicture in top right of our customised Essential theme. It's been requested that we resize it up to approx 65*65px, but when I do this with CSS it (naturally) becomes pixellated.
I can't find the code to change it so it puts the 100*100px f1 there instead, which I can then scale down to 65*65. Not sure if it's a theme file or in another folder?
Many thanks
Rather than messing with the code, you could try overriding the image itself by placing a 65px version in the theme pix_core folder. You may also have to add the css that you have already tried in case there is any restricting the size currently in the theme, but at least with the overridden image it wouldn't get pixelised.
See this link for more detail on overriding images in a theme
http://docs.moodle.org/dev/Using_images_in_a_theme#Overriding_core_images
Does the image in pix_core define the size of all other avatars on the site though, or is that just the default one that would be resized? Don't want to have to resize every avatar on the site/avatars of new users or when they update new avatars
That's a lot of avatars!
edit: also, I still want avatars in the news feed/forums to show up as the 35px version, so don't want to overwrite it completely
What CSS are you using? As the avatars are normally 100px x 100px.
img.userpicture {
height: 65px;
width: 65px;
}
This also changes it elsewhere though, such as in the news section - but I'd rather they were all 65px than 35px if it's one or the other (ideally just the top icon would be 65 though)
Right clicking and viewing the image url shows
/pluginfile.php/29006/user/icon/essential/f2?rev=1
when I want it to be
/pluginfile.php/29006/user/icon/essential/f1?rev=1
Hi Andrew,
I'm working an an alternative to how that image is being added and displayed. If you can bear with me I'll hopefully have a fix for this in about an hour or so?
Cheers
Mary
I think my suggestion would reset the default one so that you have a larger f2 which would then cope better with the size changes in the css, but in fact the size of the icons is determined by the css as a user only uploads a single image anyway and that is resized by the css rather than by pointing to f1(100px) or f2 (35px).
You should then be able to target your css size rule just at the one in the header by specifying the css selector correctly and avoid any impact on the user picture in any other areas of the site/page - using firebug gave me this
.socials img {
height:65px;
width:65px;
}
Yes but that makes all the social images 65px doesn't it? Is that what Andrew wants? I thought it was just the User pic?
I did find that by adding...
<?php echo $OUTPUT->user_picture($USER, array('size'=>65)); ?> fixes that directly. The only problem then is that the span1 is too narrow so the whole header needs changing.
By the way I am seeing a whole similarity to Aardvark in this header...and that had it's own problems too.
Thank you both, my issue probably isn't helped with the fact that a. I've already played around with positioning using custom css a fair bit and b. I don't currently have access to the server! I will try both suggestions as soon as I can access it. Mary, you're right in thinking I only want the userpicture to be 65 and the remaining social icons to be 35 - though that seems to be the case in Richard's screenshot (contrary to the CSS posted though, confusingly)
edit: actually, does that css mean it's just the userpicture as its an img and the icons are fontawesome?
edit2: ahh indeed it does! That helps with getting it to just be the image in the socials area 65px - will test out the server f2 replacement asap. Many many thanks - we go live on Monday!
Andrew,
OK...if you do not have access to the server then try this...as this targets only the header profile picture.
#profilepic.span1 ul.socials {
float: right;
height: 65px;
padding: 0;
width: 65px;
}
#profilepic.span1 ul.socials img {
width: 65px;
height: 65px;
}
As far as I can see its the only image in socials - the others are fontawesome icons not img
but you could probably go even more specific with .socials img.userpicture
Putting the larger image as f2.png in essential/pix_core/u/ didn't work (even tried a huge version, don't know if this will make it work with new uploads but certainly not for current avs)
Nor did Mary's CSS (same issue, just scales up the 35px one so it's pixellated)
The only other option is to save all the settings you have made and then change theme to Clean theme then uninstall the Essential theme. Then upload via the Add-on installer a revised version of Essential that has the fix for the header in it. You could at this stage actually add the CSS you have been adding via the Custom CSS settings.
I can up load the revised header.php for you if that is the way you want to go?
Cheers Mary
Thanks Mary, very grateful for the offer and changes you've made but I think we'll just have to stick with the small picture as we're too close to deadline. Really appreciate the help though!
Just thought you perhaps need to delete those plugin_core images all together!
