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”
@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.
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.
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:
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...
$this->removeOption('baseColour');
// ...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.
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 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
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.
but…
There’s a slight possibility that there is some confusing documentation floating around out there about the purpose of that first argument in the