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.js’)),

Or Rename the file adaptable.js to adaptable_ray.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’

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 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.

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 )

Google photo

You are commenting using your Google 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