How to Properly Resize and Upload Logos in Moodle 4.0
Hello, and welcome back to ricoshae.com!
I’m Chris Richter, and in today’s post, we’re diving into a crucial task for Moodle administrators: properly resizing and uploading logos for the Moodle 4.0 Boost theme. If you’re looking to enhance the visual appearance of your Moodle server, adding the right-sized logos is key to maintaining a professional look.
Before we get started, make sure you check out the courses linked in the video description below. We’ve got courses on Moodle 4.0, Adobe Illustrator, and more. If you’re looking to dive deeper into Moodle administration or programming, we also have an “Access All Areas” pass for you. Let’s get into it!
Step 1: Understanding the Logo Requirements
When you’re working with Moodle’s Boost theme, there are two main logos that you’ll need to customize:
- Login Screen Logo – This logo appears on the login page.
- Compact Logo – A square logo displayed in the top left corner of the navigation bar.
The size of these logos may vary based on the screen size of the device being used, but they have set dimensions for optimal display. Let’s break it down.
Step 2: Finding the Correct Logo Sizes
Compact Logo (Top-Left Corner)
To get the best results, you’ll want the compact logo to be at the right dimensions so it doesn’t appear stretched or pixelated.
- Ideal Size: The compact logo should be around 100×100 pixels.
- Maximum Size: While the logo can be upscaled to larger dimensions, resizing it to 100×100 should give you crisp and clear results for most setups.
In the Boost theme, this logo is automatically resized, so even if you upload a larger version, it will scale down to fit. You can always experiment with larger sizes (like 150×150) if needed.
Login Screen Logo
The login screen logo is usually a banner-type logo that spans a larger area.
- Recommended Minimum Size: 600×130 pixels
- Preferred Size: 800×173 pixels for a slightly larger, more impactful logo.
These dimensions allow the logo to look great while fitting neatly within the login page. If you’re planning to switch to a different theme in the future, you may want to create a slightly larger version to accommodate different layout needs.
Step 3: Resizing Your Logos in Adobe Illustrator
Now that we have the ideal dimensions, let’s resize the logos using Adobe Illustrator. Here’s how to do it:
- For the Compact Logo (100×100):
- Open your logo in Illustrator and resize the artboard to 100×100 pixels.
- Make sure the logo fits within this size, ensuring it maintains good visual quality. You can tweak the colors or adjust the design as needed.
- For the Login Screen Logo (800×173):
- Open the login logo in Illustrator and adjust the artboard size to 800×173 pixels.
- If you need to maintain the aspect ratio, lock the ratio before resizing the canvas. Adjust the logo placement and design so it looks good within the new artboard dimensions.
Once you’re happy with the logos, export them as PNG files (for transparency) or JPGs, depending on your preference.
Step 4: Uploading the Logos to Moodle
With your logos resized and ready to go, it’s time to upload them to your Moodle server. Here’s how to do it:
- Log into Moodle as an administrator and go to Site Administration.
- Search for “logo” or navigate to Appearance > Logos.
- You’ll see options for two logos:
- Logo (for the main logo on the login screen)
- Compact Logo (for the top-left corner of the navigation bar)
- Delete the current logos by selecting them and clicking Delete. This ensures you’re uploading your new logos from scratch.
- Upload the New Logos:
- For the main logo, upload the 800×173 PNG or JPG file.
- For the compact logo, upload the 100×100 PNG or JPG file.
- Save Changes.
If caching is enabled on your Moodle site, the changes might take a moment to appear. But typically, you’ll see the new logos almost instantly!
Step 5: Verifying Your Changes
Once your logos are uploaded, you can check their appearance on the front-end of your Moodle site. Log out and visit the login page to verify that your new login logo appears as expected. Check the top left corner to ensure the compact logo is showing up properly.
Recap
To ensure your Moodle site looks polished and professional, it’s important to use the correct image sizes for the Boost theme:
- Compact Logo: 100×100 pixels
- Login Screen Logo: 800×173 pixels
Make sure your logos are in PNG or JPG format (preferably PNG for transparency), and upload them through Site Administration > Appearance > Logos.
By following these steps, you’ll be able to customize your Moodle site’s branding easily and effectively. Whether you’re an administrator or someone just getting started, this guide should help you get your logos resized and uploaded without a hitch!
I hope this guide has been useful. If you need more information, don’t forget to check out the courses in the description below for a deeper dive into Moodle, Illustrator, and more. My name is Chris Richter, and I’ll see you in the next post!
