Overriding Elemental
Permalink
I'm new to Concrete5, and I wanted to start with the Elemental theme and make style changes to it from a CSS file in such a way that my changes won't get overwritten next time something updates. This seemed to me like something fairly basic, but I was unable to find complete information on how to do this in one place, so, now that I think I've accomplished my goal, I thought I would post my method and ask if I'm missing anything. Some of this is copied from other posts, some is purely my own.
1) Copy the 'concrete/themes/elemental' folder into 'application/themes/name' (change "name" to an appropriate name for the theme)
2) Open the 'application/themes/name/page_theme.php' file and change namespace from
to
(note caps)
3) Also in page_theme.php, adjust to "Theme Name" and to "Theme Description" (or whatever the appropriate theme name and description are).
4) In main.less adjust
to
5) In header_top.php, add
(where "name" is the name of your new stylesheet)
after the call to main.less, and then create name.css in the new theme css folder. Add a few style changes so you can test if it's working.
6) Login to the site's dashboard and activate the new theme.
This seems to have overridden the Elemental theme with a new theme copied from Elemental that loads Elemental styles followed by my own styles.
Because I had such a hard time finding this information, there is probably a better way. Please let me know if this is going to work and what could be improved.
1) Copy the 'concrete/themes/elemental' folder into 'application/themes/name' (change "name" to an appropriate name for the theme)
2) Open the 'application/themes/name/page_theme.php' file and change namespace from
namespace Concrete\Theme\Elemental;
to
namespace Application\Theme\Name;
3) Also in page_theme.php, adjust
public function getThemeName()
public function getThemeDescription()
4) In main.less adjust
@import "../../../css/build/core/include/mixins.less";
to
@import "../../../../concrete/css/build/core/include/mixins.less";
5) In header_top.php, add
<link type="text/css" rel="stylesheet" href="<?php echo $view->getThemePath()?>/css/name.css">
after the call to main.less, and then create name.css in the new theme css folder. Add a few style changes so you can test if it's working.
6) Login to the site's dashboard and activate the new theme.
This seems to have overridden the Elemental theme with a new theme copied from Elemental that loads Elemental styles followed by my own styles.
Because I had such a hard time finding this information, there is probably a better way. Please let me know if this is going to work and what could be improved.
We have had a little discussion about this in a PRB review.
A solution with many uses would be for a developer to submit a cloned version of Elemental as a free & MIT licensed marketplace theme, perhaps calling it 'Cloneamental'.
Such a theme would provide a starting point for anyone wanting to build on Elemental without having to copy and edit the component files or compromise the core.
A solution with many uses would be for a developer to submit a cloned version of Elemental as a free & MIT licensed marketplace theme, perhaps calling it 'Cloneamental'.
Such a theme would provide a starting point for anyone wanting to build on Elemental without having to copy and edit the component files or compromise the core.
Hmm, interesting idea......
I think Cloneamental is a great idea.
If I have time, I can look into making it this weekend.
If someone else starts it or submits before me, I recommend putting it on GitHub too.
This will allow for easier updating if the theme changes in the future.
If I have time, I can look into making it this weekend.
If someone else starts it or submits before me, I recommend putting it on GitHub too.
This will allow for easier updating if the theme changes in the future.
great idea !
Maybe also add some doc files on github to be used on the marketplace ? eg:
- how to use
- theme structure
- links to forum posts
- FAQ
Maybe also add some doc files on github to be used on the marketplace ? eg:
- how to use
- theme structure
- links to forum posts
- FAQ
https://www.concrete5.org/documentation/how-tos/designers/how-to-cop...