We’ve got more and more customers who have bought our premium Moodle themes deciding to apply small changes/tweaks to the theme CSS file to meet their own design needs (eg. change button colours, background images/colours etc). If you are in this situation please read on. In this tutorial I will explain how to customise CSS so you won’t lose your changes when there is an update available for the theme. (Yes, we update all our premium themes regularly to fix reported bugs and add improvements – all customers get free updates.) The key to retaining your theme CSS changes is simple: ALWAYS override the existing theme CSS rules and NEVER edit the original theme CSS in place. There are two ways of doing this.  

Method One (Basic)

What you need to do initially: Open the theme css file (general.css) and go to the bottom of the file and write your CSS changes there. This will duplicate some CSS rules, but the ones lower down override the existing ones above. What you need to do when you receive a theme update from us: 1) Copy the CSS code you wrote from your current CSS file and paste the code into the bottom of the new CSS file (below all existing code) and save. 2) Replace the old CSS file with the new one which now has your code at the bottom. This method is easy to follow but it does require you to copy and paste your own code whenever there is a theme update.  

Method Two (Advanced)

What you need to do initially: 1) Create a CSS file under the theme style folder and give it a name. I’m going to use custom.css as the file name for demonstration purpose.

2) Open the config.php file under the theme folder. Go to line 9 and add the new CSS file name “custom”(without the “.css” file extension) AFTER the main CSS file “general” as shown in the figure below. Save the config.php file. The theme is now reading CSS rules from this file.

3) Write your CSS code changes in the new CSS file (custom.css) and save. What you need to do when you receive a theme update from us: Replace your old CSS file (general.css) with the new one we provide. This method requires more work initially but will save you from doing any manual copying and pasting work in the future.  

Conclusion

It’s completely up to you which method you pick as they all serve the same purpose – prevent you from losing your CSS customisations when there is a theme update available.