Can't get custom theme style settings to show in the 5.7 page settings
Permalink
Hi,
I'm using 5.7.2 and experimenting with developing a new theme. My site is hosted locally in MAMP.
I have followed this video exactly up to 13:10:
https://www.youtube.com/watch?v=CdePC0rH8p0...
The issue I've got is that c5 has no problem with reading my less files, processing them, and outputting a valid stylesheet. I can change any default values in css/presets/default.less and c5 will happily read them and output the result. I've turned off all caching on this test site.
However if I go into Page Settings > Design > Theme / Customise > the styles panel is empty on the left. Nothing is shown. Not even the custom CSS button. The browser console reports an error 500. If I follow the link, I'm taken to a rather messed-up error page with only part of the admin bar showing:
As per the video, my theme includes a styles.xml file in the /css/ directory and its structured identically to the one in Elemental.
Things I've tried to resolve this issue myself:
- Renamed the styles.less file to my_stylesheet.less
- Cleared the web browser cache
- Tested some different less variables
- Tried a different web browser
- Restarted MAMP
- Tried accessing the design settings from another page
- Experimented with different ways of calling the stylesheet in elements/header_top.php
- Changed permissions on /css/ to 777
- Tried copying in the styles.xml file from Elemental in place of my own
At this stage I'm out of ideas. Nothing I've tried seems to work and get the custom styles listed in the design settings. I've looked at the Elemental theme and that works fine for me. But Elemental seems to be wired-up a lot differently to what's shown in the YouTube video - e.g. different calls to the less file in the header_top.php file.
I'd appreciate if anybody has got any ideas. Before posting I searched these forums and Google, but it seems nobody else has hit this same problem.
I'm using 5.7.2 and experimenting with developing a new theme. My site is hosted locally in MAMP.
I have followed this video exactly up to 13:10:
https://www.youtube.com/watch?v=CdePC0rH8p0...
The issue I've got is that c5 has no problem with reading my less files, processing them, and outputting a valid stylesheet. I can change any default values in css/presets/default.less and c5 will happily read them and output the result. I've turned off all caching on this test site.
However if I go into Page Settings > Design > Theme / Customise > the styles panel is empty on the left. Nothing is shown. Not even the custom CSS button. The browser console reports an error 500. If I follow the link, I'm taken to a rather messed-up error page with only part of the admin bar showing:
An unexpected error occurred. Call to a member function toStyleString() on null
As per the video, my theme includes a styles.xml file in the /css/ directory and its structured identically to the one in Elemental.
Things I've tried to resolve this issue myself:
- Renamed the styles.less file to my_stylesheet.less
- Cleared the web browser cache
- Tested some different less variables
- Tried a different web browser
- Restarted MAMP
- Tried accessing the design settings from another page
- Experimented with different ways of calling the stylesheet in elements/header_top.php
- Changed permissions on /css/ to 777
- Tried copying in the styles.xml file from Elemental in place of my own
At this stage I'm out of ideas. Nothing I've tried seems to work and get the custom styles listed in the design settings. I've looked at the Elemental theme and that works fine for me. But Elemental seems to be wired-up a lot differently to what's shown in the YouTube video - e.g. different calls to the less file in the header_top.php file.
I'd appreciate if anybody has got any ideas. Before posting I searched these forums and Google, but it seems nobody else has hit this same problem.
Thanks for your reply. I've already tried a really simple styles.xml file (just like the one featured in the video with a single colour picker). But I was not able to get any colour settings showing in the concrete5 theme design GUI sidebar. It opens okay, but it's just blank for me. Nothing there to be selected or changed :-(
Since my first post, I've also tried deleting the theme and reinstalling it again; because I know this was something required for grid support in 5.7 and I wondered if it was needed for style variations too. However I had no luck with this.
If it's of help, I've attached a copy of my theme to this reply. I've kept it extremely simple. I'd be interested to hear if yourself or anyone else has problems changing the background colour in this theme or can spot anything wrong with it. The theme is just simply called 'test'.
Since my first post, I've also tried deleting the theme and reinstalling it again; because I know this was something required for grid support in 5.7 and I wondered if it was needed for style variations too. However I had no luck with this.
If it's of help, I've attached a copy of my theme to this reply. I've kept it extremely simple. I'd be interested to hear if yourself or anyone else has problems changing the background colour in this theme or can spot anything wrong with it. The theme is just simply called 'test'.
Okay, after an intensive coffee-fueled session that lasted until about 2.00am this morning I've been able to figure out the problem! I'll post it here for the benefit of other concrete5 theme developers watching the video and finding that their theme customize panel is blank.
The PHP error log in MAMP was outputting the following each time the 'Customize' button in the page settings was clicked:
Line 116 of the Preset.php is this:
This code appears to be fetching the name of the preset and setting its color (icon). Well, I looked and I could not see where this name or color would be coming from. I compared the markup in the video to the markup in the Elemental theme. I noticed that each of the preset LESS files in Elemental includes the following at the start, which the video made no mention about:
This is where the name of the preset and it's icon is set. But like I say, unfortunately the video makes no mention of this. But after adding this code to the /css/preset/defaults.less file, the PHP errors are cleared away and the theme customize panel loads correctly. So we can conclude that the 'preset-name' and 'preset-icon' code is mandatory, in order for the theme styles panel to correctly load.
The PHP error log in MAMP was outputting the following each time the 'Customize' button in the page settings was clicked:
PHP Fatal error: Call to a member function toStyleString() on null in /Applications/MAMP/htdocs/concrete57/concrete/src/StyleCustomizer/Preset.php on line 116
Line 116 of the Preset.php is this:
$html .= '<li style="background-color: ' . $this->getPresetColor1()->toStyleString() . '"></li>';
This code appears to be fetching the name of the preset and setting its color (icon). Well, I looked and I could not see where this name or color would be coming from. I compared the markup in the video to the markup in the Elemental theme. I noticed that each of the preset LESS files in Elemental includes the following at the start, which the video made no mention about:
@preset-name: "Sunrise"; @preset-icon: concrete-icon(#75ca2a, #fff, #0099ff);
This is where the name of the preset and it's icon is set. But like I say, unfortunately the video makes no mention of this. But after adding this code to the /css/preset/defaults.less file, the PHP errors are cleared away and the theme customize panel loads correctly. So we can conclude that the 'preset-name' and 'preset-icon' code is mandatory, in order for the theme styles panel to correctly load.
It's actually mentioned at the 26 minute mark, and on this page:http://www.concrete5.org/documentation/developers/5.7/designing-for...
It could certainly throw a better and more instructive error message.
It's mentioned in the context of turning the defaults.less file into one of several theme presets. It's possible that a version of concrete5 prior to 5.7.2.1 would throw this error if you didn't include the concrete variables even if you only had defaults.less (and therefore no other presets) but as of 5.7.2.1 you shouldn't have to include these variables unless you're going to make presets. If you do make presets, however, you will definitely need to include these variables.
It could certainly throw a better and more instructive error message.
It's mentioned in the context of turning the defaults.less file into one of several theme presets. It's possible that a version of concrete5 prior to 5.7.2.1 would throw this error if you didn't include the concrete variables even if you only had defaults.less (and therefore no other presets) but as of 5.7.2.1 you shouldn't have to include these variables unless you're going to make presets. If you do make presets, however, you will definitely need to include these variables.
Just to clarify and follow up on my post a little bit – if you're only making your theme customizable without presets (ie you have defaults.less in your presets/ directory but no other .less file in that directory) then you shouldn't have to have those concrete variables present in defaults.less. If that was the case and you were getting the error, it might be because this was something we fixed in 5.7.2 or 5.7.2.1.
if you do want multiple presets, you will have to specify those values. Hopefully we can get some better error output in there soon, Or just show black squares.
if you do want multiple presets, you will have to specify those values. Hopefully we can get some better error output in there soon, Or just show black squares.
It should also be noted that getStylesheet('main.less') should not specify the exact path to the less file as that will include the less file without compiling it.
I have been struggling with custom style settings not showing up for a theme am developing because I was linking directly to the less file.
Andrew
Should header_required in 5.7 output the link end tags, self close them or leave them void
I have been struggling with custom style settings not showing up for a theme am developing because I was linking directly to the less file.
// main.less located in css subdirectory // wrong way of linking less file <link rel="stylesheet" type="text/css" href="<?php echo $view->getStylesheet('css/main.less')?>" /> // correct way. Note: css subdirectory omitted <link rel="stylesheet" type="text/css" href="<?php echo $view->getStylesheet('main.less')?>" />
Andrew
Should header_required in 5.7 output the link end tags, self close them or leave them void
<link> .. </link> or <link "..." /> or <link "..">
Hey I'm having almost the same problem checked everything again and still nothing shows up. But you had an error I understand? I don't even have an error to know where it came from how can i fix this please help me ...
You might have to turn on error logging in Dashboard > System & Settings > Environment > Debug settings.
For me, error logging was already turned on, but it might be that newer versions of c5 ship with debugging turned off. Not sure to be honest!
The other place to look (if your website is not in MAMP but published live to a 'real' web server) is the error logs provided via CPanel.
For me, error logging was already turned on, but it might be that newer versions of c5 ship with debugging turned off. Not sure to be honest!
The other place to look (if your website is not in MAMP but published live to a 'real' web server) is the error logs provided via CPanel.
Hello,
I'm new to Concrete..
I've just created a new theme (copy of Elemental) in concrete/applications/themes/ and all is working fine.
However, there are no presets available in theme customization tab.
Any ideas?
Thanks
p
I'm new to Concrete..
I've just created a new theme (copy of Elemental) in concrete/applications/themes/ and all is working fine.
However, there are no presets available in theme customization tab.
Any ideas?
Thanks
p
just one color variable in it to start with, and make sure your
defaults.less file has the @my-variable-color defined and that your
my_stylesheet.less file uses it. Try and make it as simple as possible.