Clone a Moodle Theme 3.11 >

Time (again) has come around again for a major upgrade of Moodle 3.10 to 3.11, with this bring the fun of making sure the theme is working okay. Adaptable has just released their latest theme for Moodle 3.11, so I’ve taken this and cloned it. This makes it easier for us to know which theme works on which version of Moodle we have installed, rather than it to be just named Adaptable. In the past we’ve needed to flip the DNS to a new production server and without this it’s difficult to know which theme works.

Hopefully the below will work for you, it took me 3 attempts to crack it (this year), without having random php / file errors or SCSS (which this version has now started using) issues showing on the browser or in dev tools.

Step 1

Download the latest version of your theme, we are using the 3.11 version of Adaptable here. In Notepad ++ use the ‘Find in Files’ function to locate everything ‘Adaptable‘ which is the current name of the theme, replace that with your new name ‘ManMet-Adaptable‘. This should be two hits in one file, then hit ‘Replace in Files’. This just changes the naming in the language pack

Step 2

Now search for ‘theme/adaptable‘ and replace all with ‘theme/manmet_adaptable‘ (dont use a minus symbol in the theme path). This should find 24 hits in 8 files, now replace all with ‘Replace in Files’.

Step 3

Search for the original name of the theme ‘adaptable‘, change this to ‘manmet_adaptable‘.

Step 4

Now search the theme code for ‘/adaptable/‘ and replace with ‘/manmet_adaptable/‘.

Step 5

Now find ‘theme_adaptable‘ and change that to ‘theme_yourname‘, in my case this is ‘theme_manmet_adaptable‘.

Step 6

The unknown step.. I think it is required 🙂 I think it’s to do with the tabs in the theme settings. Search for ‘THEME_ADAPTABLE‘ and replace with ‘THEME_MANMET_ADAPTABLE‘, this should return around 18 hits in 7 files.

Step 7 – Change the name of the Language file

Rename ‘manmet_adaptable\lang\en\theme_adaptable.php’ to ‘theme_manmet_adaptable.php’
And any subsequent language packs in \es etc folders.

Step 8

Check places like config.php in the root of your theme and add any extra theme .css or .scss file which you might have in the \styles dir. Also check that the naming in \jquery\plugins.php file matches the name of the .js file in \jquery it should be under

$plugins = array(
    'manmet_adaptable' => array('files' => array('adaptable_v2_1_1_2.js')),

Step 9Change Theme CSS name

Rename the main SCSS file from ‘\scss\settings\adaptable.scss’ to ‘\scss\settings\manmet_adaptable.cssc’.

Step 10 – Zip deploy and test

Change the name of the theme folder to match, in my case ‘manmet_adaptable‘, zip it up and deploy for testing. Bitnami Moodle local installs are idea to do this

Good luck ! should the above method not work for you, do try the one which was working for Moodle 3.10 themes or the one which was working for Moodle 3.9 themes which I wrote in 2018.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s