Customizing Your MoodleCloud Site: A Quick Dive Into CSS Tweaks

Recently, I created a MoodleCloud account to see what kind of customization options were available especially when it comes to using custom CSS to improve the look and feel of the platform. I wanted to find out just how much we can change to make our MoodleCloud site not just functional, but visually appealing too.

Here’s what I found with some tips if you’re looking to do the same!

Getting Started

Once I set up my MoodleCloud account, I quickly got the basics sorted:

Uploaded a logo to brand the homepage.
Created a demonstration course to get a sense of how content displays inside a course.

With that out of the way, it was time to dive into Site Administration and see if we have access to CSS changes.

Finding the CSS Settings

Good news: under Site Administration → Appearance → Themes → Boost → Advanced settings, MoodleCloud gives you access to raw initial SCSS and raw SCSS fields. 🎉

This is huge because it means you can inject your own CSS (or SCSS) directly into your MoodleCloud site without needing FTP access or any external tools.

First Test: Changing Heading Styles

I started small by tweaking a basic heading.

I added the following into the Raw SCSS section:

h1 {
  color: orange;
}

After saving and refreshing, my homepage’s heading turned orange! (Tip: if changes don’t show up straight away, it’s probably because of caching. MoodleCloud caches a lot by default.)

You can purge caches by going to Site Administration → Development → Purge Caches, which helps force updates.

Tweaking the Navbar

Next up: changing the navbar’s border color.

Here’s what I added:

.navbar.fixed-top {
  border-bottom: 3px solid orange;
}

Initially, it didn’t seem to apply. After inspecting the page (right-click → Inspect Element), I realized Moodle’s core CSS was overriding mine.

The fix? Move your custom CSS to the bottom of the Raw SCSS section. SCSS lower down generally takes precedence unless the theme uses !important tags (more on that later).

After purging the caches again, the orange border appeared perfectly across the top of the navbar.

Adding a Decorative Banner to the Dashboard

While editing the Dashboard, I thought it’d look nicer with a big banner image at the top.

Here’s how I did it:

Turn Editing On.
Add a new block → Text Block.
Insert an image at 100% width.

To add some rounded corners, I created a custom class.
In the text editor’s HTML mode, I added a class to the image like this:

<img src="your-image.jpg" class="banner-image" />

Then, in the Raw SCSS, I added:

.banner-image {
  border-radius: 10px;
}

Now, the image had a nice soft border radius matching the smooth aesthetic across the platform.

Fine-Tuning Typography

I also wanted to lighten up some of the text styling.

For example, I adjusted the weight of Heading 5 (h5) like this:

h5 {
  font-weight: 200;
}

And for Heading 2 (h2), I customized both the color and weight:

h2 {
  color: #555; /* dark gray */
  font-weight: 300;
}

If your changes still aren’t showing properly, you can add !important after the value to force it:

h2 {
  font-weight: 300 !important;
}

(Just be cautious with using !important too much it can make future styling tweaks a headache!)

Final Thoughts

Can you customise MoodleCloud with CSS?
Absolutely and it’s surprisingly flexible.

Any challenges?
Caching can slow down your visible changes, and sometimes the default Moodle styles need a little extra work to override cleanly.

Best part?
You can do all of this directly from the admin panel, without touching any core code or files.

If you’re planning to customize your MoodleCloud site, I definitely recommend experimenting with SCSS inside the theme settings. A few simple tweaks can really level up the visual experience for your users.