Customizing ojs 3.3.0 dashboard font (without hardcoding)

Question

We are currently customizing ojs 3.3.0 dashboard. we want to add our custom font to the dashboard (we added our own theme plugin with desired font for client side), but unfortunately we haven't found any solution how to import our font into ojs without hardcoding.

Is there any way to import our font into ojs without hardcoding?

Or is there any way to import the font from our theme plugin into ojs?

Is there any way to address a font in ojs from installed theme plugin?

Answer 1

Base on PKP-OJS Documentation, Yes you can add custom styles or Fonts and override them. Every theme extends the core ThemePlugin class. This class has several methods that will help you load scripts and styles, modify parent stylesheets and more. The setup and configuration of your theme will happen within the init() method. This method is only run for the currently active theme (or parent themes of the currently active theme). All the other methods of the API should be run within the init() method.

<?PHP

import('lib.pkp.classes.plugins.ThemePlugin');
class TutorialThemePlugin extends ThemePlugin {

  /**
  * Load the custom styles for our theme
  * @return null
  */
  public function init() {
      $this->addStyle('my-custom-style', 'styles/index.less');
  }
}

If you want to add new style or css font use the addStyle() method. The addStyle() method accepts a number of optional arguments hash.Like context, addLess, priority,.... Check this link for more information.

Example :

In this example, TutorialThemePlugin is our custom theme. Imagine we want to import a Roboto font on the client-side (Frontend) and the admin dashboard side (Backend). before everything, We need to activate our template. when on the admin page, we’re technically under the “site” area, not a specific journal. So we’ll need to make sure that we’ve activated our custom theme for the site, not just a journal. we activate our theme from this path Settings > Website > Appearance.

The first step is to upload the fonts to our custom theme styles/fonts directory and then address them in the CSS file.

TutorialThemePlugin:
     - js
     - libs
     - locale
     - styles
        - fonts
           - roboto.css
           - Roboto-Thin.ttf
           - Roboto-Medium.eot
           - ...
     - template
     - ...

The second step is calling fonts or styles through our theme.
TutorialThemePlugin.inc.php:

<?PHP

import('lib.pkp.classes.plugins.ThemePlugin');
class TutorialThemePlugin extends ThemePlugin {

  /**
  * Load the custom styles for our theme
  * @return null
  */
  public function init() {
      $this->addStyle('htmlFont', 'styles/fonts/roboto.css', array('contexts' => 'frontend')); // Client Side
      $this->addStyle('htmlFont', 'styles/fonts/roboto.css', array('contexts' => 'backend')); // OJS Admin Dashboard
  }
}

The third step is Inheritance from OJS in our theme. When we create a custom theme, we can choose to have it extend a Parent Theme. A Child Theme will automatically load the templates and styles found in its Parent Theme. This allows you to build a theme on top of a pre-existing theme. Child Themes allow us to override select templates from the Parent Theme, while still using them when no template has been overridden.
The HTML/Smarty section of this guide describes how the frontend template files are loaded by order of priority. Child Themes add a new highest-priority location for retrieving template files.

When OJS or OMP loads a template, it searches in the following order.

1. The current theme template directory.
2. If a Parent theme is specified, the Parent theme’s template directory.
3. The OJS or OMP template directory.
4. The lib/pkp/templates/ directory within the application.
   

To override a Parent Theme’s template (OJS default Template), copy that template file into the same location in the Child Theme (TutorialThemePlugin theme).

For changes to the template files, you can go to Administration > Clear Template Cache.

References :

https://docs.pkp.sfu.ca/pkp-theming-guide/en/theme-api
https://docs.pkp.sfu.ca/pkp-theming-guide/en/child-themes
https://forum.pkp.sfu.ca/t/how-can-i-override-backend-templates-ojs-3/33512/27
https://forum.pkp.sfu.ca/t/ojs-3-need-help-with-theme-customization/21210