How to copy the Elemental theme to use as a base for new themes
Here are the steps required to copy the Elemental theme to create a new theme called Test.
1. copy the elemental folder from the core themes directory into the application directory
copy from:
concrete\themes\
copy to:
application\themes\
2. rename the "elemental" folder to "test"
the theme folder name:
- must be lowercase
- cannot use spaces
- cannot use hyphens
- underscores can be used to separate words
Example:
my_theme
3. go to the Pages & Themes area in the dashboard
4. first error:
An unexpected error occurred.
Cannot redeclare class Concrete\Theme\Elemental\PageTheme
5. first error fix: in page_theme.php
find:
namespace Concrete\Theme\Elemental;
change to:
namespace Application\Theme\Test;
when using folder names with underscores
- the underscore must be removed and replaced with CamelCase formatting
Example:
folder name: my_theme
namespace Application\Theme\MyTheme;
6. in your Test theme directory
version 5.7.4.2 or earlier
- open description.txt
- change "Elemental" to "Test"
if the folder was named my_theme
- change "Elemental" to "My Theme"
version 5.7.5 or later
- open page_theme.php
- look for getThemeName()
public function getThemeName()
{
return t('Elemental');
}
change "Elemental" to "Test"
public function getThemeName()
{
return t('Test');
}
7. install the Test theme
8. activate the Test theme
9. return to website
10. second error:
An unexpected error occurred.
File `../../../css/build/core/include/mixins.less` not found. in main.less
11. second error fix: in main.less (application\themes\test\css\main.less)
find:
@import "../../../css/build/core/include/mixins.less";
change to:
@import "../../../../concrete/css/build/core/include/mixins.less";
12. return to website
13. the site works and is now using a copy of Elemental called Test