[SOLVED] How Theming the Editorial Backend?


#1

Hi,

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


#2

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.


#3

Hi,

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?

Thanks again.
Helene


#4

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 :angry: 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

After some experience with less I have found that working with CSS is far more easier in case of OJS.


#5

Hi @Vitaliy,

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 ?

Thanks in advance for your response.
Helene


#6

Take a look at my modified default Manuscript theme: https://github.com/Vitaliy-1/defaultManuscript/blob/master/ManuscriptJats.inc.php

If for example somewhere in less you will have:

div.example {
  color: white;
}

writing

div.example {
  color: black;
}

would not change anything. You won’t even see this lines in the developer console of the browser. So you need to specify you selector, for example:

div.wraper div.example {
  color:black;
}

As an example from demo journal. Presumably you want to change articles title font on issue index page. Default font is specified in less like:

.obj_article_summary > .title {
  font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
}

in order to everwrite it in less you need to specify:

li .obj_article_summary > .title {
   font-family: Arial;
}

In case of CSS those changes will apply if this CSS is loading after the first. So it’s less (tautology :slight_smile: ) headache.

Another plus of CSS is that to apply it you only need to refresh the page in browser with ctrl + f5

As for your specific problem, where did you find element with class pkp_page_title? In what template? because I don’t see it.


#7

Hi @Vitaliy,

Thanks for your examples.

As I said, I had no problem to change styles whithin a theme by modifying LESS files for the frontend.
When I use addStyle method in the init method of the theme by passing no argument for context, that is to say by using default context, it works fine.
So I managed to change styles for templates such as article and issue pages like those pages:
http://journals.sfu.ca/present3/index.php/demojournal/issue/archive
http://journals.sfu.ca/present3/index.php/demojournal/article/view/6

What I don’t manage to do, it’s to change styles whithin a theme by modifying LESS files for the backend.
I didn’t manage to change styles for pages like those pages:
http://journals.sfu.ca/present3/index.php/demojournal/submissions
http://journals.sfu.ca/present3/index.php/demojournal/manageIssues

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 ?

Thanks.
Helene


#9

Hi every body,

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!

Best regards.
Helene


#10

Thanks for letting know. I am planning in the future to work with backend too.


#11

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


#12

Thanks for the heads-up! Fixed now.