Child Theme for Classic, modifyStyle addLess function only working for one less-file [OJS 3.2.1.1]

Software Support
1

Dear OJS-community,

I am currently trying to develop a child theme for classic theme and have successfully integrated classic as a parent theme.

This is the content of my ClassicChildThemePlugin.inc.php:

<?php

import('lib.pkp.classes.plugins.ThemePlugin');

class ClassicChildThemePlugin extends ThemePlugin {

	public function init() {
	    $this->setParent('classicthemeplugin');
	    $this->modifyStyle('stylesheet', array('addLess' => array('less/variables.less')));
	    $this->modifyStyle('stylesheet', array('addLess' => array('less/components/header.less')));
    }


	function getDisplayName() {
		return __('plugins.themes.classicchild.name');
	}


	function getDescription() {
		return __('plugins.themes.classicchild.description');
	}
}

?>

What I want to do now is to include two less files with the function modifyStyle. This works partially, only the last included less file is used. In my example header.less.

I have also tried a different name for the first argument of modifyStyle and tried 'classic' or 'classictheme' instead of 'stylesheet', but this didn’t work.

Do you have an idea for a solution?

Kind regards

2

The first argument needs to have different names, for example “stylesheet1” and “stylesheet2”. I also recommend to use a bit more specific names like “childtheme_stylesheet” or something like that, because my impression is that a generic name like “stylesheet” which may be used by other themes or the core causes problems.

Kind regards
Daniela

3

Thanks @UBWolf for the hint!
I did not realize that the first argument is just a name to freely define. I thought it somewhat has to match the name of the parent theme, so I tried the classic variations.

I have just tried to implement your solution and changed the lines

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

to

	    $this->modifyStyle('child_stylesheet1', array('addLess' => array('less/variables.less')));
	    $this->modifyStyle('child_stylesheet2', array('addLess' => array('less/components/header.less')));

Unfortunately, now none of the less files is being loaded.
(I have cleared the template cache.)

Do you have any suggestions?

4

Oh, I’m sorry, my mistake. I always use “addStyle” and not “modifyStyle”, so there are different rules. Unfortunately I have no experience with modifyStyle (so it’s probable my advice with the first argument is wrong). I assume you have to combine those two rules into one. Something like

$this->modifyStyle(‘stylesheet’, array(‘addLess’ => array(‘less/variables.less’, ‘less/components/header.less’)));

But as I said, just assumption.

1 Like
5

Hi @adm_sub,

Did you try to just add path as additional element to an array? E.g.:

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

Also, you can always use LESS way for importing: http://lesscss.org/features/#import-atrules-feature

1 Like
6

Thanks @UBWolf and @Vitaliy, this did the trick!