CSS Theme Editing / Elemental

Permalink
I've been trying to edit the default theme in Elemental for a while now, just adding simple things to the CSS, and it always seems to reset to the default or customization settings. I've tried to copy the Elemental theme and re-name it Test to see if I could then edit the Theme without it reverting, and I have just run into error after error.

What is the best way to go about doing what I'm attempting to do? Should I just make a theme from scratch, making it look like Elemental? Is there a way to edit the CSS of Elemental without making a copy? Or is there an easy way to make a copy of the Elemental theme that won't leave it striped of its features and filled with errors?

I understand most of my questions are due to my lack of understanding c5.7 but I feel that the simple edits I want to make should be a lot easier to do than they have been, I am also confused as to why copying the Elemental theme doesn't seem to work, as it just becomes a mess when you do.

View Replies: View Best Answer
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
Hi AJTD,

In an attempt to recreate the errors you are having. I just went through the steps to use a copy of Elemental as a new theme called Test.

1. copy the elemental folder from the core themes directory into the application directory
2. rename the "elemental" folder to "test"
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;

6. in your Test theme directory, open description.txt - change "Elemental" to "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

For the most current information, refer to this How-To:
https://www.concrete5.org/documentation/how-tos/designers/how-to-cop...
107studio replied on at Permalink Reply 1 Attachment
107studio
With a clean install I just tried this, I didn't get any error messages but when I switch to edit mode the edit bar disappears and most of the content also. Besides that, before I tried edit mode I noticed it was missing a lot of formatting.

Picture after trying edit mode.
MrKDilkington replied on at Permalink Reply
MrKDilkington
I am not having any strange behavior. Everything works as expected.

What version of 5.7 are you using?
107studio replied on at Permalink Reply
107studio
Solved the problem, The issue was I was using an Uppercase letter in my theme 'Test'

Found out these also will break it.

Space in the theme name. 'test theme'
Hyphen 'test-theme
Underscore 'test_theme'

They all screw it up in different ways.
AJTD replied on at Permalink Reply
Did you have to use a lower case letter, did that fix it? Or did you need the uppercase letter? That is a strange thing to mess up the entire format of the website (mine was also having formatting issues)
MrKDilkington replied on at Permalink Reply
MrKDilkington
Did you try following the steps I posted yet?

If so, was the problem resolved?

If not, what error or issues are you experiencing?
AJTD replied on at Permalink Reply
Yes, thank you so much MrKDilkington!

It turned out the original problem I had was the folder was named Test instead of test, apparently it was that simple. All of your steps worked out perfectly, thank you so much for helping me with this!

:]
Freckles replied on at Permalink Reply
I know this was a long time ago. However, after following these steps for my 5.7 site, I received this message:

"Call to a member function hasPageThemeGridFrameworkOffsetClasses() on a non-object"

underneath the slider. Any fixes?
MrKDilkington replied on at Permalink Reply
MrKDilkington
@Freckles

Are you using the default grid framework or a custom grid framework?
Freckles replied on at Permalink Reply
I am using all the default settings, including the grid framework.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@Freckles

At what step do you get the error?
Freckles replied on at Permalink Reply
I recopied the files and it fixed itself. Not sure what I did wrong the first time! Thanks for the help.
AJTD replied on at Permalink Reply
I've noticed that in the one-click installs from Bluehost the concrete 5.7.2 theme folders do not have the description.txt files, is there a new place to update/change the name description?
Freckles replied on at Permalink Reply
Elemental's description is within the page_theme.php file, the third and fourth functions:

public function getThemeName()
    {
        return t('Elemental');
    }
    public function getThemeDescription()
    {
        return t('Elegant, spacious theme with support for blogs, portfolios, layouts and more.');
    }
AJTD replied on at Permalink Reply
Thank you, sir/madame!
AJTD replied on at Permalink Reply
I've attempted to recreate this... and I received a new error?

"Cannot redeclare class Concrete\Theme\Test\PageTheme"

EDIT: Oops! I figured it out. I had another "Test" theme in another directory where Elemental was stored, it was causing issues. After I deleted that one it worked perfectly, thanks.