Fancy Categories for Moodle LMS 4.x
Are your Moodle LMS category descriptions looking a little blah? Spice them up a little with this month’s tip.
Fancy Banners for Moodle LMS Categories
Let’s face it, Categories in Moodle 4.1’s Boost theme can be a little on the boring side.
But it doesn’t have to be. It is super easy to give it a professional-looking facelift. All it takes is an image and a little HTML with inline styles to make your category descriptions look like this:
You might be thinking to yourself, anyone with a photo editor and a few mouse clicks can do this, right? Of course, but this technique has the advantage of the text actually being text, not an image of text. Because it is just plain text, a screen reader can read it and it won’t become super tiny on a mobile device. This also makes it compliant with WCAG and other accessibility guidelines.
Instructions:
Step 1: Navigate into the category’s settings. In the description field, add two elements:
- A description for the category.
- An image 1650px wide by 150px high.
How you do this will depend on whether you are using the Atto editor or the new TinyMCE editor included with Moodle 4.1+.
Step 2: Switch to the HTML source code view of the WYSIWYG editor. It should look something like this:
<p>Want to just try something? Experiment a little? Create fancy banners for your categories.</p>
<p><img class="img-fluid align-top" role="presentation" src="https://yourmoodlesite/draftfile.php/5/user/draft/207905565/category-banner.jpg" alt="" width="1650" height="150"></p>Step 3: After the last line, press ENTER twice and copy and paste the following source code:
<div style="background-image: url('IMAGE-GOES-HERE')!important; background: no-repeat right; -webkit-background-size: cover; background-size: cover; min-height: 150px; max-width: 1650px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: inset 360px 0 50px 10px #fff; box-shadow: inset 360px 0 50px 10px #fff;">
<div style="padding-left: 20px; max-width: 360px; height: 166px; display: table-cell; vertical-align: middle;">
<p>CATEGORY-DESCRIPTION-GOES-HERE</p>
</div>
</div>Step 4: Replace CATEGORY-DESCRIPTION-GOES-HERE with the category description that you previously added, and replace IMAGE-GOES-HERE with the URL of the image that you previously added.
Step 5: Delete everything before the <div….
The source code should now look similar to the following:
<div style="background-image: url('https://yourmoodlesite/draftfile.php/5/user/draft/207905565/category-banner.jpg')!important; background: no-repeat right; -webkit-background-size: cover; background-size: cover; min-height: 150px; max-width: 1650px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: inset 360px 0 50px 10px #fff; box-shadow: inset 360px 0 50px 10px #fff;">
<div style="padding-left: 20px; max-width: 360px; height: 166px; display: table-cell; vertical-align: middle;">
<p>Want to just try something? Experiment a little? Create fancy banners for your categories.</p>
</div>
</div>Step 6: Click the Save Changes button at the bottom of the page. Depending on the image you chose and the amount of text you need to display, the result will look something like this. The text will even wrap as needed because it is not part of the image:
Taking it one fancy step further
To ensure that your Moodle website has a consistent look and feel throughout, use this technique on all of your categories.
Adding the following styles to your theme will make it easier to adjustment globally across your site:
div.category-banner {
background: no-repeat right;
-webkit-background-size: cover;
background-size: cover;
min-height: 150px;
max-width: 1650px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 360px 0 50px 10px #fff;
box-shadow: inset 360px 0 50px 10px #fff;
}
div.category-banner-summary {
padding-left: 20px;
max-width: 360px;
height: 150px;
display: table-cell;
vertical-align: middle;
}Then use a simplified version of HTML for each of your category description banners:
<div style="background-image: url('IMAGE-GOES-HERE')!important;" class="category-banner">
<div class="category-banner-summary">
<p>CATEGORY-DESCRIPTION-GOES-HERE</p>
</div>
</div>What about other themes? This code is pretty generic and should work with most Boost-based themes in Moodle 4.0 and 4.1, and even category descriptions in releases of Moodle 3.x. However, in some cases, you may prefer to increase the 3 instances of “360px” if your theme is on the wider side. Doing this with the CSS-in-your-theme option makes management of this a lot easier.
Fancy Headings, section headings, pages, lessons, books and more
You can even use similar code for a course heading, section heading or page/lesson/book heading in your course. In a course outline, add it to a Text and Media Area or Label resource module (as it was known in previous versions of Moodle). You can even try it in a block on the Dashboard.
Did you know? If you haven’t heard by now, Moodle 4.1 LTS was launched on November 28, 2022. If you are looking to make the most of your LMS implementation strategy and reduce your cost of ownership, implementing a Long-Term Support (LTS) release of Moodle is a great investment. Moodle 4.1 LTS includes the usual bug fixes until November 2023 (12 months) and security fixes until 2025 (36 months!). For comparison, a non-LTS release only comes with 18 months of security fixes. To learn more about this latest release, visit the Moodle 4.1 New Features page at Moodle.org.
That’s it for this month and for 2022. Hope you found this helpful. I’m off to have some Christmas cookies with my wife and spend some quality time with my family. From my family to yours, wishing you all the best over this holiday season, with good health and fulfilment in the new year.
See you next month!
Michael Milette
- Moodle LMS Email Deliverability in 2024: Best Practices, Authentication Standards and Troubleshooting – 23rd February 2024
- Terminology for Those New to Moodle LMS – 20th January 2024
- Enhancing E-Learning in Moodle LMS with an AI Chat Block and FilterCodes – 20th November 2023
Hi Annie,
There could be a few reasons why the image is disappearing. The URL for the image is a unique temporary URL that is generated and managed by Moodle. The URL may change from one page load to the next, when enabling/disabling edit mode, when viewing the page as a different user, etc. You cannot copy it from one category and have it work in another. You cannot remove it, save the description, edit the page again and paste it back in. If you do anything like that, the image URL will fail. Maybe not immediately, but it will likely fail anywhere from within minutes to the next day.
In order to ensure that it will work reliably, you must follow the exact steps:
1) Upload the image into the editor for the category description.
2) Edit the HTML and paste in your new HTML code.
3) Cut and paste the URL from the original HTML code into the new HTML code.
4) Delete the original HTML.
5) Save.
If you deviate from this process, Moodle looses track of the temporary URL and will eventually fail.
I’ve done this on multiple recent versions of Moodle. If this does not work for you, please share the version of Moodle as well as the name of the theme that you are using.
Hope you find this helpful. Let me know how it goes.
Best regards,
Michael
Hi Michael, Thank you very much.
I used your example and the following happened:
Being in the edit view, I see the image and text as in your description. When I turn off the edit function and look at it from the participant view, I only see the text unformatted in a line without an image. Why is that? I look forward to your feedback. Thank you a lot. Annie
Great post Michael !
I can see this is something many Moodle administrators could use to make their site look great, without having to dig down and learn CSS and advanced Theme skills 🙂