Brand new Moodle theme released! Based on Boost and packed with exciting new features.
View Demo

Moodle Boost and Boost-based Themes – How To Display Side Blocks On The Left Instead of Right

By default, Moodle displays side blocks on the right side of the page in a Boost or Boost-based theme. If your organisation wants to display all side blocks on the left side of the page instead, you can write custom css/scss code to achieve this. In this post we’ll share the code you need to do this.

Side Blocks On The Right (Default Position)

boost-based-theme-sideblocks-right

Step 1

Log in to your Moodle site as an admin user, and navigate to your Boost or Boost-based theme’s settings page. Under the “Advanced Settings” tab you should find an input field called “Raw SCSS”.(see figure below).

moodle-boost-theme-raw-scss-input-field

Step 2

Copy and paste the following code snippet into the “Raw SCSS” input field. Save your changes.



#region-main.has-blocks {float: right}
section[data-region="blocks-column"] {float: left}


Side Blocks On The Left (After Customisation)

boost-based-theme-sideblocks-left

Want to master Moodle?

Moodle 3.0x Masterclass: Complete Educator's Guide to Moodle

Moodle Tutorial for Educators - Learn Moodle to create WORLD CLASS online courses. Leverage Moodle 3 like a BOSS!

1500+ students enrolled

Are you a Moodle admin?

Moodle Administration Tutorial: Beginner, Intermediate Guide

Learn World Class Moodle LMS Admin, Configure, Theme, Manage Courses, Users, Permissions, Roles, Security, Plugins...

2000+ students enrolled