I have searched but can't find anything about a suggested image size for badges. When I upload a badge image, moodle resizes it and that's fine, but are there suggested pixel dimensions that the uploaded file should be?
The default value for a badges width and height is 90x90 pixels but you can set them to whatever size you want with this css rule:
Questions regarding your css. I'm currently running the 'Clean Theme' on Moodle 2.5. To which CSS file are you adding the above code?
I've also been having issues with my badges appearing blurry. I created a test badge in Adobe Illustrator, exported as a png file - 90x90, yet when I uploaded it to Moodle, it was blurry. Is there a way to fix this, or is my actual workflow process not right?
Thanks very much
Well, depending on the theme you are using, you may be able to go to your theme settings and add the CSS rule there. If you go to Site administration > Appearance > Theme > Your theme ... If you click on the name of the theme you are using, there may be a box for custom css where you can put the CSS rule. If not, you can find the style-sheet in your themes style folder... It may be called custom.css, master.css, layout.css, etc... You may need to use the !important statement on the width and height attributes of that CSS rule to override the original rule.
Using a webkit based browser (Safari, Chrome) right-click on the badge and select "inspect element" or using FireFox I would recommend inspecting with FireBug (http://getfirebug.com/). That should give you dimensions the badge is being displayed at. If it's higher than 90x90 then that is why the image is blurry and why you would want to create the CSS rule to set it to the size you want. Some themes I've run into have the base size of badges set to 90x90 and some other at 100x100.
If it's not that then I'm not really sure why the images are coming out blurry for you. I'm assuming the badge is a vector based since it was created with illustrator. Are you saving optimized for the web? Perhaps whatever compression method you are using? Do you preview the image after export before uploading into Moodle and everything looks fine? Could you put the image into just a plain HTML page and view it to see if it looks alright?
Hope that helps.
I use 100 X 100 px images for badges . . . in iMoot2013 everyone used 100X100 px for badges as well
they looks good with no problem
One point to note in resizing -- I uploaded a file 67x90px and it was resized so that the width was 90px and the height ... was cropped both top and bottom. I added transparent space in the width (in photoshop) to make a pure 90x90px image and the display was perfect.
Not sure if it helps, but just wanted to let you know that badges use the same function that prepares and crops user profile images. There is no really a limit to image size, but it will be cropped to make sure that images that are too big won't be uploaded.
I too found the badges are cropped to 90x90 when upload.
So changing CSS only changing the size of the image which was already cropped.
I'm trying to set 314x114. However when upload the badge size became cropped to 90x90 and then enlarged to 314x114 according to CSS.
Anyway to prevent moodle crop the badge when upload?