Customize home OJS - CSS

Software Support
1

Hello, I am modifying the CSS of my theme - https://pkp.sfu.ca/2016/09/02/bootstrap-theme-for-ojs-3/ -

I do it from the directory:
/cache/1-bootstrap.css

I see the changes reflected, but is this method correct? that is, modify the css file of the “cache” directory?

Thank you!!

2

Nope, not correct. I suggest reading about creating a child theme.

3

Thank you, for answering what I was reading, I have to duplicate the native theme and create a son theme.

but also within the themes folder I do not see the files to modify …

What is the route of the CSS?

4

Hi @Jorgef, maybe this example can help you: https://github.com/NateWr/default-child

5

I’m afraid you will not find any CSS inside OJS. It uses Less that is compiled in the cache folder into usual CSS. But you can download custom CSS if specify a path to it inside child theme. Example of creating such theme is provided through the link above.

6

Thanks for the answers,

then, creating a secondary theme, and loading a custom CSS, can I directly include the classes that modify the original in that way?

7

in theory… but I do not do this yet! maybe at some time after to have the system more mature, I am just configuring the workflow and try to help the editors to understand the system. If you are lucky making some changes in the theme or made a child theme, you are welcome to share your experience!

8

With child-theme, you can remove original style or add new:
https://pkp.gitbooks.io/pkp-theming-guide/content/en/theme-api.html

9

Thanks @Vitaliy @t4x0n , I was able to create a child theme and it perfectly takes the changes that I add to the css added there.