Quick question about .less and theming OJS 3.x

OK. I probably should ask this somewhere else, and I probably should already know :wink: but…

I have figured out basic theming and child-theming and by extension grand-child I suppose. This very useful sample from @NateWr got me there https://github.com/NateWr/default-child.

My lazy question is about less variables and compiling and working live on the server. In a nutshell, if I want to just change a simple colour, should I be able to just change the variable and then re-load the page, or do I have to recompile everything to see my change? I’m not seeing changes, and I want to be sure it is not OJS template cache or browser cache, whatever.


The CSS files are compiled and cached, so you’ll need to clear that cached file when you make a change. This happens automatically when you switch themes, for instance, but not if you’re manually editing the theme files.

The easiest way to do this is under the OJS site Administration Area. Look for the links to clear caches.

Thanks @NateWr, I’ve been doing that. Is that all I should have to do if I make a change in variables.less, or do I need to run something against the less file too?

So a little further reading here https://github.com/NateWr/default-child makes me believe that OJS will compile the less files for me and output the css. I’m sure this is not happening in my case though. I’ve gone carefully through my code, and nothing seems to be happening…

In my theme’s class file “cjarDefaultChildThemePlugin.inc.php”

$this->modifyStyle('cjarStyles', array('addLess' => array('styles/index.less')));

In styles/index.less

@import "variables.less";

In styles/variables.less

@bg-shade:               #f00;
@bg-border-color:        #f00;

Then even after toggling themes back and forth, and clearing data and templates caches, those values are still reflecting #ddd in the compiled css.

Am I missing something, or perhaps missing a server requirement so OJS can compile the .less files on the fly?


Any thoughts @NateWr ?

Hi @verdonv,

FYI, Nate’s away for a couple of weeks but will review this when he returns.

Alec Smecher
Public Knowledge Project Team

1 Like

@verdonv That looks right, but I remember there are some load order issues that crop up in some cases. Can you share your custom theme with me? I can run it locally and try to debug to see what’s happening.

Thanks @NateWr,

I’ll PM you a copy. It’s pretty bare-bones, as I was just trying to make sure of the concepts. Other than the change in border colour mentioned above, there is just a custom template for the main nav menu, and indexJournal page.

Great! I’ve had a play around with this and figured out what’s going on. First, I hadn’t caught it before, but this line:

$this->modifyStyle('cjarStyles', array('addLess' => array('styles/index.less')));

The first argument, cjarStyles, should actually reference the name of the stylesheet you want to modify. The default theme calls it’s stylesheet stylesheet, so if you want to modify it, you’d use:

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

That got your variable sheet working. But you’ll notice your variable sheet still isn’t overriding the @bg-base variable. That’s because the parent theme sets this dynamically based on the baseColour theme option:

Anything added with the addLessVariables key will fire after anything added with the addLess key. Since this code in the default theme runs as soon as you call $this->setParent(), the variable override takes some extra work to get around this. If you don’t want the theme to allow colour selection from the theme options area, you also need to add the following:

// This removes it from the theme options area in the settings, but if
// the user has already saved a baseColour in the parent theme, the
// value will still be retrieved and used, so...

// ...you also need to override the `addLessVariables` value that's
// already been attached with the color. Just set this back to empty
// to remove the color selection.
$this->modifyStyle('stylesheet', array('addLessVariables' => ''));

In reality, you probably want to leave the colour option in place and let the user set this. But hopefully this clears up a bit how the LESS overrides and theme options interact.

Thanks for the detailed explanation @NateWr

I’ll have a chance to take a kick at this tomorrow. I had left that first variable as stylesheet in my first attempt, but likely got caught up by missing the baseColour stuff. I then may have misunderstood some documentation, but I can’t remember where :slight_smile: There’s a slight possibility that there is some confusing documentation floating around out there about the purpose of that first argument in the modifyStyle function. If I can find it again, I’ll let you know… it’s also possible I was just confused :wink:

1 Like

Hi @NateWr,

Just a quick follow-up to let you know that your explanation was spot-on and got things working for me. I also have a better idea of how to extend ThemePlugin:: now.

Sorry it took me longer to get back to this, then I thought it would. I cannot find where I may have got the idea to name that first argument something unique, perhaps I imagined that. I did find some good documentation for people building theme here https://pkp.gitbooks.io/pkp-theming-guide/content/en/ and here https://github.com/NateWr/default-child though.

Thanks again,