Moodle Design and Development
Some things I find interesting about developing in Moodle

Author: Ben Kammerling

Categories
Development

Moodle Dev Environment on Mac with MAMP

Moodle developers will know that the Moodle system requirements are quite high. When I came to set up my Moodle local development environment on my MacBook, it was nothing short of a nightmare.

Using the Moodle 4.3 server and database requirements as an example, I needed:

  • PHP 8+
  • MySQL 8+

The PHP version wasn’t an issue. MAMP has shipped with PHP 8 for as long as I remember (at least since 2021). But pre-July 2024, MAMP only came with MySQL 5.7.39. While the Moodle installation will be able to to run, it will not let you move past a requirements page. Luckily, there is a surprisingly simple and satisfying fix.

Introducing the environment.xml file

The long and rather tedious file lists every version of Moodle and it’s respective environment requirements. You’ll find it here:

admin/environment.xml

Now, I can’t speak for all database vendors and environment setups, but to get Moodle installed and functioning with a lower version of MySQL required just one change.

Changing Moodle’s system requirements

Here’s how you can change Moodle’s system requirement to allow your system setup to run Moodle.

  1. Open the admin/environment.xml file in your chosen editor.
  2. Scroll down to the Moodle version you are trying to install. The opening tag will start something like this <MOODLE version="4.3" ...>
  3. You should see a list of the database vendors.
  4. Change the version of your preferred vendor to whatever version you are able to run.

In my case, I changed the MySQL line in this block:

<DATABASE level="required">
   <VENDOR name="mariadb" version="10.6.7" />
   <VENDOR name="mysql" version="8.0" />
   <VENDOR name="postgres" version="13" />
   <VENDOR name="mssql" version="14.0" />
   <VENDOR name="oracle" version="19" />
</DATABASE>

To this:

<VENDOR name="mysql" version="5.7.39" />

Reload your Moodle installation page and you should be able to move forward in the installation process.

Final thoughts

As I mentioned above, MAMP now ships with MySQL 8 (since July 2024). So, this particular requirement shouldn’t be an issue for Mac users anymore. However, MAMP isn’t the only local server tool for Mac (you can run Moodle with XAMPP and Docker too). And with Moodle’s high requirements, it could easily outpace what these tools can offer in the future. Keep in mind the environment.xml file, and happy Moodling!

Categories
Development

How to Override a Moodle Course Format Template

An orange which has been painted blue on a blue background

Working with Moodle can sometimes be a bit of a nightmare, especially when it comes to knowing what can or can’t be achieved in the platform. The docs, while helpful, are often incomplete and don’t cover everything. Recently, I encountered a challenge with overriding a course format template and wanted to share the process for anyone else facing the same issue. This post specifically focuses on how to override the Moodle grid course format.

Identifying the Problem

At UAL, we aim to not only improve the student experience on Moodle but also the editing experience for our staff. After all, if the staff have a positive experience while creating their content, it should reflect in the final student view.

The grid course format in edit mode outputs a long page with all the content from all the sections, requiring excessive scrolling. This is time-consuming, prone to errors, and generally a bit crap. Feedback from our staff and digital learning teams, received through support tickets, user research interviews, and anecdotally, highlighted this inefficiency and frustration. Our goal was to streamline this editing process. How? Not possible with style alone, we’d have to modify the grid format template itself.

Correct Folder Structure for Template Overrides

When you want to override a template file from a Moodle plugin, you need to place the override file in your theme’s templates directory. However, the directory structure must mimic the plugin’s structure. I read a number of different ways of doing this across Moodle forums and in Moodle docs, but only one folder structure works. Here’s how you do it:

  1. Locate the Original Template Path:
    • For example, the code for each section in editing mode is located at: /course/format/grid/templates/local/content/section/content.mustache
  2. Create the Necessary Directory Structure in Your Theme:
    • You need to replicate the plugin’s directory structure within your theme’s templates folder. The correct path for the override should be: theme/[your_child_theme]/templates/format_grid/local/content/section/content.mustache
  3. Place Your Override File:
    • Copy the content.mustache file from the course format plugin to the newly created directory in your theme and make your modifications.

Extra Steps to Ensure the Override Works

  1. Activate Your Theme (hopefully, an obvious one):
    • Make sure your custom theme is activated in Moodle. Go to Site administration > Appearance > Theme selector and select your theme.
  2. Purge All Caches:
    • After placing the override template, go to Site administration > Development > Purge caches and purge all caches to ensure Moodle picks up the new template. You should also be fine to just purge your theme cache. Alternatively, you can go into theme designer mode. I do this by adding (or uncommenting) a line in my root config.php file: $CFG->themedesignermode = true;
  3. Enable Debugging:
    • If the override doesn’t seem to work, enable debugging in Moodle. This can be done via Site administration > Development > Debugging. When working locally, I will often check my php error log, which for MAMP is located in: /MAMP/logs/php_error.log

Example Override

To verify that your override is effective, add a simple comment or unique text to your content.mustache file:

...
<h2>MY CUSTOM OVERRIDE</h2>
<div id="coursecontentcollapse{{num}}"
    class="content course-content-item-content collapse">
...

After purging caches, check the relevant course page to see if the overridden content is displayed.

Helpful Links

For more detailed information and community support, check out these Moodle resources:

  • Moodle Themes Plugins
  • Moodle Templates – this actually outlines the correct folder structure. If it doesn’t work at first, check and double check for typos. I lost precious minutes (ok, hours) on this.

So there you have it. That’s how you can successfully override Moodle course format templates, making your Moodle site more tailored to your needs. Happy customising!

Categories
Development

Add an Extra Class to Root Selector in SCSS

An AI generated colourful cave like structure with the text #{&} stylistically over the top

This isn’t specific to Moodle development, but it’s still a great tip!

SCSS is one of my favourite tools for web development. It’s faster and cleaner than writing raw CSS. However, like many others, I often use only a few of its many features. Recently, I discovered a powerful SCSS feature: interpolation combined with the parent selector (.parent-of-root &). In this post, we’ll explore how to use SCSS interpolation to prepend a class to a root selector from within a nested block. This technique can streamline your styling process and keep your code concise and organised.

Let’s dive in and see how it works!

What is SCSS Interpolation?

SCSS interpolation is a feature that allows you to use variables or expressions as part of property names or selector names. It’s like putting placeholders in your CSS code that get replaced with the actual values of your variables when the SCSS is compiled into CSS.Here’s a simple example:

$color: red;

.box {
  border: 1px solid $color; // This will be compiled to: border: 1px solid red;
}

$side: top;

.element {
  padding-#{$side}: 10px; // This will be compiled to: padding-top: 10px;
}

In the first example, the variable $color is used directly in the border property value. In the second example, the variable $side is interpolated into the property name padding-#{$side}, resulting in padding-top.

Using SCSS Interpolation to Prepend a Class to Root Selector

We all know about the parent selector (&) in SCSS. It makes it super easy to add pseudo-classes to the outer selector or style the outer selector in a certain context, with a specific parent. However, did you know you can combine it with interpolation to prepend a class to the root selector. This is especially useful for theming or modifying styles based on certain conditions.

An Example For Y’all

SCSS

.parent-class {
    .child-element {
        color: white;
        .additional-class#{&} {
            color: black;
        }
    }
}

This SCSS code will compile to the following CSS:

CSS

.parent-class .child-element {
  color: white;
}
.additional-class.parent-class .child-element {
  color: black;
}

Breaking Down the Example

  1. Root Selector (.parent-class): This is the main class we are working with. This could, for example, be the body tag.
  2. Nested Selector (.child-element): Inside the root selector, we define styles for a nested element. This can be however deep you are.
  3. Using Interpolation and Parent Selector:
    • #{&} inside .additional-class#{&} combines .additional-class with the parent selector’s current context, resulting in .additional-class.parent-class.
    • This allows us to prepend .additional-class to the existing root selector.

Practical Use Case

In our scenario, we had all of our SCSS wrapped in a body selector e.g. body.page-group { }. We needed to change the style of a nested element, which was a few levels deep. This style change should only appear on certain page types within our group of pages e.g. body.page-group.specific-page-type { }.

Note: If you are using the element selector on your root e.g. body, nav, main, you will have to change that to make sure whatever selector is prepended will work as a selector. That’s because .additional-classbody.original-class won’t give you what you desire.

Conclusion

Using SCSS interpolation to prepend a class to a root selector provides a flexible way to manage and apply styles conditionally. This technique enhances the maintainability of your stylesheets and can be particularly useful in complex projects with nested elements and dynamic styles.

By leveraging the power of SCSS, you can create more modular and maintainable styles, making your front-end development workflow more efficient and more FUN. Happy styling!

Useful Resources