We are currently testing OJS 3.0.2.
We created our own themes for the frontend by following the Theming Guide and it works fine.
We would like to also apply our theme to the backend but we didn’t manage to do it even by following the Theming the Editorial Backend Guide.
We created a theme for the site level and several themes for each of our journals.
We would like to change the look of the backend in each case.
We tried to add stylesheet to the backend by passing a context argument to the addStyle method in the init function of a theme like this:
$this->addStyle(‘bbody’, ‘styles/bbody.less’,array( ‘context’ => ‘backend’ ));
As a test, we copied the body.less file of pkp backend to the “styles” directory of our custom theme:
cp lib/pkp/styles/structure/body.less plugins/themes/customTheme/styles/bbody.less
Then we modified one of the code line of the bbody.less file like this:
.pkp_page_title {
background: red;
…
}
We loaded again the custom theme via the setting site, but nothing happened.
We did some other tests but, it’s still the same thing.
Maybe there is something we are missing or we are doing wrong.
Thanks in advance to enlight us of how doing it properly.
Best regards.
Helene
It looks like you’re doing things the right way. You may need to manually clear the CSS cache. Looking into /your-ojs-directory/cache/ and removing any *.css files should help.
Even by removing all *.css files in cache directory, it doesn’t work.
As another test, I removed lib/pkp/styles/structure/body.less original file. And it removed all the style.
In fact, it’s like my new plugins/themes/customTheme/styles/bbody.less isn’t loaded in the theme.
What can I do for testing to be sure my new less file is loaded in the theme?
It`s something strange going on with modifying less files. I really tried to work with them, but the case that all of them are mixing before displaying is making me mad There is a need to use everytime a very specific selector.
There is even more, when I have tried to change backround colors of some elements it hadn’t worked. And I don’t know the reason of it: Bootstrap Theme - #12 by NateWr
After some experience with less I have found that working with CSS is far more easier in case of OJS.
I understand that you also encountered troubles to change some styles with modifying LESS files.
Do you manage to add stylesheet to the backend by passing a context argument to the addStyle method in the init function of a theme ? And if so, how do you manage to do it ? Have an example ?
Which specific selector are you talking about ?
How do you work with CSS files ? Do you mean if I use CSS instead of LESS files it will work ?
Pages of backend have their own header and footer templates files and their own LESS files.
There is a specific Theming Editorial Backend Guide, which explains how to change theming for backend by passing an explicit context argument: “backend” to the addStyle method. But it didn’t work for me.
“pkp_page_title” is called in /lib/pkp/styles/structure/body.less which is called in /lib/pkp/styles/structure/index.less
Is someone managed to modify less files of the backend pages within a theme ?
It’s my lucky day! I finally found how Theming the Editorial Backend.
In the Theming Editorial Backend Guide, it’s written to add stylesheet to the backend by passing a context argument to the addStyle method in the init function of a theme as follows:
$this->addStyle(‘bbody’, ‘styles/bbody.less’,array( ‘context’ => ‘backend’ ));
It didn’t work. After investigate the source code, I found references of “contexts” with an “s”. So I replaced “context” with “contexts” in the addStyle method and it works!
I @NateWr,
Don’t you think it would be useful to revise the Theming the Editorial Backend Guide to replace “context” with “contexts” in the code example with addStyle method ?
Thanks, Helene