OJS 3: Need help with theme customization

We now have a theming guide with documentation on creating your own themes. The original response is below.

Hi @Paul_Chen,

We’re still working on getting some good documentation in place for customizing themes. Much of the API, including child themes and theme options, got into OJS 3 in the last minute so we have a lot of education to do on this front.

First, my recommendation is never to edit a theme’s files directly. The default theme and the bootstrap3 theme will continue to receive updates, and leaving them unmodified will make updating easier in the future.

The recommended way to modify a theme is to use a child theme, similar to how you might do this if you’re familiar with WordPress’s theming platform. A child theme can overwrite LESS variables, load entirely new stylesheets and override any templates.

This is a sample child theme of the default theme. It provides all the basics that are required for setting up a basic child theme.

The readme in that repository provides an introduction to child theming and several examples for interacting with the CSS styles, including modifying LESS variables, loading custom fonts and more.

However, it doesn’t describe how to override templates. This works exactly like it does in regular themes. So, for instance, the bootstrap3 theme includes an about template in it’s plugin directory here:

/templates/frontend/pages/about.tpl

If you’d like to override this in your child theme, you’d copy that template file into the same location in your child theme:

/templates/frontend/pages/about.tpl

Then start editing on it.

I hope that helps as a quick orientation. We’ll be making more thorough tutorials, exmaples and documentation available as soon as possible.

10 Likes