Gantry 5 themes are provided with different particles. Not every particle is included in every Gantry 5 theme. Sometimes you might want to include a particle from another theme into the theme that you are using. This tutorial shows you the safe way to copy particles between themes that won't be overwritten again by theme updates.
For the purpose of this tutorial, the theme you are copying from is the donor theme and the theme you are copying to is the recipient theme.
A particle is made up of these things:
All theme specific particles reside in:
All theme specific particle SCSS files reside in:
All theme specific JS files reside in:
It is very important that you do this copy in such a way that any subsequent theme updates do not overwrite what you have done. The steps below ensure that this is the case.
These are the steps to do the copy from the donor theme to the recipient theme. You are copying the donor file only, not the folder(s) it resides in:
THEMENAME/custom/scss (note the underscore at the start of the file name).
For any JS files that you know to be required by the particle, copy
If you don't have a custom.scss file already then you need to create one (plain text file). Your custom.scss file should be put in
THEMENAME/custom/scss. Your custom SCSS file must have this statement as the first line:
The next thing you need to do is to ensure that the SCSS for the particle is loaded too. We do this by including it into our custom SCSS file.
You do not prefix the PARTICLENAME with an underscore.
If the particle does use a separate JS file then you need to load that JS file. You do this in your recipient theme in the base outline on the Page Settings tab.
That's it! Now you should be able to use the particle from your donor theme in your new recipient theme.