Make GLOBAL CSS changes in MOODLE to format content in your courses

How to Make Global CSS Changes in Moodle 4.0

If you’re a Moodle administrator, you might find yourself needing to make global CSS changes to your site. Whether it’s to give your platform a new look, highlight important elements, or adjust a theme to better fit your needs, the process is easier than you might think.

In this blog post, we’ll walk you through the steps to change the CSS across your entire Moodle platform, using Moodle 4.0 and the Boost theme as an example.

Getting Started

First, you need to log in to your Moodle site as an administrator. To make these changes, administrative access is required.

  1. Login to your Moodle site.
  2. In the navigation bar, go to Site Administration.
  3. Under Appearance, find Themes, then select Boost (or whichever theme you’re using).

Once you’ve selected the theme you wish to modify, you’ll see several options, including Advanced Settings. Here is where you’ll find the fields you need to inject your custom CSS.

Raw Initial SCSS vs Raw SCSS

In the Advanced Settings section, you’ll see two fields related to CSS:

  • Raw Initial SCSS: This allows you to inject styles before any existing CSS rules, which is useful for setting foundational styles.
  • Raw SCSS: This field injects CSS at the end of the stylesheet, which means any styles here will override other styles that are already applied.

Typically, if you’re making changes to the appearance of your platform, you’ll use the Raw SCSS field.

Making Your First CSS Change

Now let’s say you want to change the appearance of the navigation bar at the top of your Moodle site. For example, you might want to change the bottom border of the navbar to make it stand out. Here’s how you can do that:

  1. Go to the page where the navbar is located (like the home page).
  2. Right-click and select Inspect to open the browser’s developer tools.
  3. Find the navbar-fixed-top code and note the styling you want to change. For example, you might want to make the bottom border of the navbar red and 3px thick.
  4. Change the values in the inspector to see the result live. Once you’re happy with the change, copy the modified code.

Example:

cssCopyEdit.navbar-fixed-top {
    border-bottom: 3px solid red;
}
  1. Now, go back to Moodle’s Raw SCSS field and paste your CSS code there.
  2. Click Save Changes.

If everything is set up correctly, you should see the change reflected on your site immediately.

What to Do If the Change Doesn’t Appear

Sometimes, changes may not appear right away because Moodle caches CSS for better performance. If this happens, you’ll need to clear the cache.

  1. Go to Site Administration.
  2. Search for Cache.
  3. Scroll down and click on Purge all caches.
  4. Select Themes, then click Purge Cache.

This will force Moodle to reload the CSS and any other cached files, ensuring your changes take effect. However, be aware that this might temporarily slow down your site for users while the cache is being rebuilt.

How to Change Other Global Styles

Once you understand how to add CSS for the navbar, you can change other elements globally, such as headings or buttons. Let’s say you want to change all Heading 1 (h1) elements across your entire site to be red:

  1. Inspect a page to find the CSS for Heading 1.
  2. In the Raw SCSS field, add the following code:
cssCopyEdith1 {
    color: red;
}
  1. Click Save Changes.

Once saved, the headings on your platform will automatically reflect the new color. You might need to clear the cache if the change doesn’t appear right away.

Theme Designer Mode

For those who are making frequent changes and need them to take effect immediately, Moodle offers a Theme Designer Mode. This feature bypasses caching to let you see changes more quickly.

  1. Go to Site Administration.
  2. Search for Theme Designer Mode.
  3. Turn it on while you’re working on your customizations.

This can be a real time-saver for developers or admins working on custom styles. However, remember to turn it off when you’re done, especially on a production server, as it can affect performance.

Conclusion

Changing global CSS in Moodle is a simple yet powerful way to customize the look and feel of your platform. By following the steps outlined in this guide, you can quickly make style adjustments to the entire site, whether you’re tweaking the navbar or adjusting the color of headings.

Remember, as an administrator, you have full control over the theme’s appearance, so feel free to experiment with different CSS changes to suit your needs. And if you run into any issues with caching or changes not appearing, the purge cache feature or Theme Designer Mode will help you speed up the process.

For more in-depth Moodle tutorials, check out our courses below. Happy customizing!

https://ricoshae.com.au/udemycourses