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:
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’)),
‘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’
‘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’
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 2.
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.