How to copy a Moodle theme

We needed to take a standard Moodle theme ‘Adaptable’, alter it and save that with a new name. This was so it then wasn’t accidentally overwritten with the unaltered standard ‘Adaptable’ theme if we ever had our site rebuilt by our hosting partners. This way we could also package up our extra custom CSS into the theme.

I very much doubt that this post will prove to be useful to you or anyone else.

I’m creating it so I don’t forget how I did it and can reference this in years to come.

Step 1 – Download a fresh copy of your chosen theme

This should give you a .zip file with the theme, unzip it somewhere on your machine.

Step 2 – Find and Replace – Find All

Get hold of a text editor like Notepad ++
In the menu click ‘Search’ / ‘Find in Files…’

Change the following options:

Find what: adaptable
Directory: C:\blah\blah\Adaptable theme 1.8\
Search Mode: Normal
Make sure ‘In all sub-folders‘ is ticked.
Click ‘Find All’

In my case this brings back 1773 hits in 69 files.

Step 3 – Replace in Files

Now you need to do a find and replace to replace the above

Use ‘Find in Files’ again
This time put in the new name of your theme in the ‘Replace with:’ field so lets say ‘adaptable_ray’.
*NOTE never use a minus in the name here xxxx-xxx as it will not work, use an underscore.
Make sure ‘Match case’ is ticked.
Now click ‘Replace in Files’

Step 4 – Theme displayed name

Now you need to Replace the actual displayed name of the theme

In the case of Adaptable this is ‘Adaptable’, so in the ‘Find what:’ field put in ‘Adaptable’ and ‘Replace with:’ ‘Adaptable-Ray’

Step 5 – Tweak JQuery settings

Because of step two you have changed the name of the main themes .js file, but not the actual name of the file. You can either edit /jquery/plugins.php

‘adaptable_ray’ => array(‘files’ => array(‘adaptable_ray.js’)),

To:

‘adaptable_ray’ => array(‘files’ => array(‘adaptable_v2_1_1_2.js’)),

Or Rename the file adaptable_v2_1_1_2.js to adaptable_ray_v2_1_1_2.js.js

Step 6 – Change the name of the Language file

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

Step 7 – Change settings files

Rename file ‘adaptable_ray\settings\adaptable_admin_setting_putprops.php’ to ‘adaptable_ray\settings\adaptable_ray_admin_setting_putprops.php’
and
‘adaptable_ray\settings\adaptable_admin_setting_getprops.php’ to ‘adaptable_ray\settings\adaptable_ray_admin_setting_getprops.php’

As well as any other file which starts with adaptable_
This is very version depended, ones I've found in Adaptable 3.0.5 for Moodle 3.9 are:
'settings/adaptable_admin_setting_configtemplate.php'
'templates/adaptable_admin_setting_configtemplate.mustache'
'templates/adaptable_admin_setting_configtemplate_nopreview.mustache'
'templates/adaptable_admin_setting_configtemplate_source.mustache'
'templates/adaptable_admin_setting_tabs.mustache'

These all become
'settings/adaptable_ray_admin_setting_configtemplate.php'
'templates/adaptable_ray_admin_setting_configtemplate.mustache'
'templates/adaptable_ray_admin_setting_configtemplate_nopreview.mustache'
'templates/adaptable_ray_admin_setting_configtemplate_source.mustache'
'templates/adaptable_ray_admin_setting_tabs.mustache'

Step 8 – Change Theme CSS name

Rename the main CSS file from ‘adaptable_ray/style/adaptable.css’ to ‘adaptable_ray/style/adaptable_ray.css’

or

Edit config.php and change the line $THEME->sheets = array( ‘adaptable_ray’,
to $THEME->sheets = array( ‘adaptable’,

Step 9 – Change the folder name

Now change the folder name to your new name in lowercase the same name as in Step 3.

Step 9a – Noticed in Moodle 3.10

Search like above for THEME_ADAPTABLE and replace this with THEME_ADAPTABLE_RAY or whatever your theme is called, do a replace in files

Step 10 – Zip up the theme

Zip up the theme as ‘adaptable_ray.zip’

Step 11 – Deploy the theme

Deploy the theme to your local installation and check it all works.

4 comments

  1. rcollman2020

    It helped me. Great instructions!
    I copied Adaptable folder on my XAMPP localhost Moodle 3.9.2 and followed your steps.
    Stopped and restarted XAMPP, It knew I had something new to install. It took me to an adaptable_ set up page, I scrolled down and accepted it. “Success”. .
    Note:
    Find and replace 2541 and 119.
    ‘adaptable_’ => array(‘files’ => array(‘adaptable_v2_1_1_2.js’

  2. Pingback: Clone a Moodle Theme 3.10 > | Not so many...
  3. Pingback: Clone a Moodle Theme 3.11 > | Not so many...

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 )

Facebook photo

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

Connecting to %s