Access less variables in Classic Theme Child

Software Support
1

This is more a general question. How can I access less variables like @secondary-colour which are defined in the Parent Theme, when creating a Child Theme?

I have this in my inc.php file:

	public function init() {
		$this->setParent('classicthemeplugin');
		$this->addStyle('custom-stylesheet', 'less/custom.less');
		$this->addScript('custom', 'js/custom.js');
		
	}

but when I define the @secondary-colour in the custom.less file I have a server error:

PHP Fatal error:  Uncaught Less_Exception_Compiler: variable @secondary-color is undefined in file

So the less variables are not imported in the child theme, I have made some attempts but I couldn’t find a solution.
Especially the Classic Theme is hard, because has a lot of “nested” less files.

2

Hi @Lara_M,

Take a look at “Adding and Modifying Styles” in the documentation: https://docs.pkp.sfu.ca/pkp-theming-guide/en/child-themes#adding-and-modifying-styles

4

Hi, unfortunately with

$this->modifyStyle('stylesheet', array('addLess' => array('less/custom.less')));

none of the styles get loaded, not even the simple css

5

Hi @Lara_M,

Just tested and it worked for me.
I downloaded the example child theme: GitHub - NateWr/defaultChild: An example child theme for OJS 3., changed the line to inherit the Classic theme: defaultChild/DefaultChildThemePlugin.inc.php at master · NateWr/defaultChild · GitHub and modified the content of remove-borders.less to include @secondary-colour. After that, I cleared the template cache and it worked.

1 Like