Supercharge Your Moodle Course: Adding Custom CSS Without Admin Access

Are you a Moodle teacher or content creator yearning to add custom flair to your course pages but constantly hitting a wall because you lack administrator privileges? You’ve tried embedding CSS directly into pages, only to have it stripped away. Frustrating, right?

Worry no more! In this post, we’ll unveil a clever workaround that allows you to inject custom CSS styles into your Moodle course, impacting every page, all without needing to be a Moodle admin.

The Secret Weapon: The HTML Block

The trick lies in leveraging the often-underestimated HTML block. While typically used for displaying basic information, we’re going to transform it into a powerful CSS injector.

Step 1: Request an HTML Block

First things first, you’ll need to ask your Moodle administrator to add an HTML block to your course. Frame your request around a need for a general course announcement or some other crucial information that needs to be visible throughout your course. This gives them a legitimate reason to add the block.

Step 2: Configure Your HTML Block

Once the HTML block has been added to your course:

  1. Turn editing on in your Moodle course.
  2. Locate the new HTML block (usually on the right-hand side).
  3. Click on “Configure new HTML block”.
  4. Under “Where this block appears,” select “Any page” to ensure your CSS is applied course-wide.
  5. Add some placeholder content to the block itself; it needs a value to save.
  6. Click “Save changes”.

Now you have an HTML block appearing on every page of your course, ready for its hidden purpose!

The CSS Injection: A Touch of JavaScript Magic

This is where the magic happens. We’ll use a small piece of JavaScript code within the HTML block to dynamically add your CSS rules to every page.

Here’s a sample of the code you’ll use. Remember, this is just an example; you’ll replace the content within the style tags with your own CSS.

<script type="text/javascript">
var cssRules = '
.big-blue-text {
    color: blue;
}
.red-text {
    color: red;
}
.my-button {
    border: 4px solid green;
    padding: 20px;
    background-color: #f0f0f0;
    border-radius: 5px;
}';
var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(cssRules));
document.head.appendChild(style);
</script>Code language: PHP (php)

Important Note: When placing your CSS rules within the cssRules variable, ensure it’s one continuous string without extra line breaks.

Step 3: Add Your Code to the HTML Block

  1. Go back to your course and select “Configure HTML block”.
  2. Click the dropdown arrow to reveal the extra icons in the content editor.
  3. Click the HTML icon (usually represented by < >).
  4. Paste the code above into the HTML source editor.
  5. Click “Save changes”.

Voila! Your custom CSS should now be applied. For example, if you used the big-blue-text class in a course page, you’ll see “Big Blue Text” displayed in blue.

<p class="big-blue-text">Big Blue Text</p>Code language: HTML, XML (xml)

Experimenting with Your CSS

To test and refine your CSS, you can:

  • Modify existing styles: Go back into the HTML block’s code, adjust a color (e.g., from blue to red), and save. The changes will instantly reflect on your course pages.
  • Add new classes: Define new CSS classes within the cssRules string. For instance, you could add a .red-text class with color: red;.
  • Apply classes to content: Create new pages or edit existing content within your course. In the HTML editor of your content, you can apply your newly defined classes to elements. For example, <p class=”red-text”>This is some important text</p> will make the text red.
  • Create custom components: Want to design a unique button? Define a class like .my-button with properties for border, padding, background, and border-radius. Then, apply this class to any element you want to style as a button.

What About the HTML Block Itself?

You might be wondering: won’t having an extra block on every page be strange? Not at all! This block can still serve a useful purpose. You can use it for:

  • Course contact details for your teacher.
  • Regularly changing announcements (e.g., “Don’t forget to complete your pre-assessment documents”).
  • Any important message that needs consistent visibility.

The beauty is that this block, while functional for displaying information, is also silently injecting your custom CSS, making it a powerful and versatile tool for course customization.

Dive Deeper: How It Works (For the Technical Minded)

For those curious about the mechanics:

The JavaScript code within the HTML block does the following:

  1. It defines a string (cssRules) containing all your CSS rules.
  2. It creates a new <style> element in the document.
  3. It appends your CSS rules (as text) to this newly created style element.
  4. Finally, it adds this <style> element to the <head> section of your Moodle page.

Because the HTML block is configured to appear on every page of your course, this script runs on every page load, applying your custom CSS throughout your course.

Share Your Thoughts!

We hope this guide empowers you to take greater control over the visual presentation of your Moodle courses. Do you have other creative ways to customize Moodle without admin access? Share your ideas and thoughts in the comments below!