Overriding html article css + child theme issue

[bricas]

We have a large number of html files that span across many years. We have a stylesheet that works pretty well with ojs2 and were hoping to integrate some of those styles into the ojs3 classic theme article view.

I see on this line that a css file is dynamically injected:

https://github.com/pkp/classic/blob/master/templates/plugins/generic/htmlArticleGalley/display.tpl#L50

linkElement.href = "{/literal}{$themePath|escape:"javascript"}{literal}/templates/plugins/generic/htmlArticleGalley/css/default.css";

I've been told that a child theme would be the best way to integrate our changes. I would think that, according to that line of code, I could just have my own /templates/plugins/generic/htmlArticleGalley/css/default.css in the child theme it would just work.

However, it would seem to me that if I didn't have that file, then it would not magically pick up the parent theme's version of that file.

If there are many files included this way, then all of those resources must be copied and synchronized to the child theme. It would seem to me that there should be some mechanism to get a file that travels back through each parent until it finds it.

I'm hoping someone can give some guidance with this issue.

Thanks in advance.

-Brian

[asmecher]

@NateWr is probably best to answer this question.

[NateWr]

Hi @bricas,

The override cascade only works for templates. That's because, in most cases, a child theme wants to extend scripts and styles rather than replace them entirely. If you want a child theme to replace a stylesheet in the parent theme, you should use removeStyle() + addStyle() or modifyStyle().

In this case, it looks like a different technique is used to load the style. @Vitaliy-1 may be able to suggest the best way to override this with your own.

@Vitaliy-1, if you don't already have an overriding technique in mind for child themes, I'd recommend that we work to make the default stylesheet part of the Theme API. We should have methods like $this->addDefaultHtmlGalleyStyle($name, $url) and $this->removeDefaultHtmlGalleyStyle('name'), and then the code in the template handles the output automatically.

[Vitaliy-1]

@NateWr, what about just passing additional argument through $args array with addStyle() method, e.g. array('galley' => '')

[NateWr]

I like that idea, @Vitaliy-1! What if we considered the HTML galleys a "context", alongside frontend and backend. So you could pass the the stylesheet like this:

$this->addStyle('articles', '/path/to/articles.less', [
  'context' => 'htmlGalley'
]);

[AhemNason]

Hey! Any thoughts about including this? I would be excited if that were the case.

[Vitaliy-1]

Yeah, I made a pull request yesterday, it is on review: pkp/pkp-lib#3691

[AhemNason]

Oh, rad! Thanks!

…

On Tue, 11 Dec 2018 at 13:39, Vitaliy ***@***.***> wrote: Yeah, I made a pull request yesterday, it is on review: pkp/pkp-lib#3691 <pkp/pkp-lib#3691> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#16 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAex1N3zr9owyiFMFnvlFHU7Sottbuyvks5u3-3EgaJpZM4YCcg_> .