Can't get custom theme style settings to show in the 5.7 page settings
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:
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.
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.
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'.
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 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 220.127.116.11 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 18.104.22.168 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.
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.
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')?>" />
Should header_required in 5.7 output the link end tags, self close them or leave them void
<link> .. </link> or <link "..." /> or <link "..">
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.
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.