[SOLVED] OJS Health Sciences Child Theme - Unable to Load Parent Theme Styling

Hi Everyone,

Forgive me if I am not posting in the right place but I am new at creating child themes for OJS. I started to modify the health sciences theme to a child theme and came across some issues seeing the styling from the parent theme.

Application Version - OJS 3.1.2
Description of issue

I have followed the theming guide Child Themes
and created new files from scratch to reference the parent health sciences theme. I have not added any custom styling in the child theme so I do not have a styles folder in my directory tree. Attached below are snippets of the code I’ve written so far. Am I misunderstanding that this child theme does not need less files from the parent theme as the $this->setParent(‘healthsciences’); will automatically know to grab the less from the parent theme? I am unsure of why I cannot see any of the css from the parent theme after installing the child theme.

Steps you took leading up to the issue

After writing the index.php/version.xml/HealthSciencesChildThemePlugin.php file was created I created a tar.gz folder and went to plugins and installed it. After viewing my site, the css is non-existent, even after inspecting element on the web page I could not see the css that is supposed to inherit from parent. Below I have attached some screenshots. Has anyone run into similar issues or has any thoughts on where I might be going wrong? Thank you for reading my response.

Index.php File

<?php
require_once('HealthSciencesChildThemePlugin.inc.php');
    return new HealthSciencesChildThemePlugin();
?>

HealthSciencesChildThemePlugin.inc.php File:

<?php
import('lib.pkp.classes.plugins.ThemePlugin');

class HealthSciencesChildThemePlugin extends ThemePlugin {
    
    public function init() {
		$this->setParent('healthsciences');
	}
	function getDisplayName() {
        // return __('plugins.themes.health-sciences-child.name');
        return 'health-sciences-child';
	}
	function getDescription() {
		return 'child theme for health sciences';
	}
}
?>

version.xml

<version>
	<!-- The application should match the theme folder to ensure it is unique -->
	<application>health-sciences-child</application>
	<!-- The type should always be `plugins.themes` -->
	<type>plugins.themes</type>
	<release>1.0.0.0</release>

	<!-- The date of the latest version -->
	<date>2016-05-31</date>

	<!-- This should always be 0 -->
	<lazy-load>0</lazy-load>

	<!-- The class name of the plugin. See index.php -->
	<class>HealthSciencesChildThemePlugin</class>
</version>

**What you tried to resolve the issue **

I have re-written the code to match the guide as much as I can, I have even followed NateWr’s github example GitHub - NateWr/defaultChild: An example child theme for OJS 3.. I installed his defaultChild theme and it installed and displayed perfectly on OJS. What could I be doing wrong? Thank you for reading!

Screenshots

Child Theme After Install
child-theme

Inspecting Child Theme Shows No Styling
child-theme-inspected

Error log messages if applicable - No Errors from PHP error logs

1 Like

Hi @wangra,

There was an issue related to the templates inheritance: Overridden plugin templates in theme not shown in child theme · Issue #4054 · pkp/pkp-lib · GitHub
Particularly this should do the trick: Merge pull request #4710 from Vitaliy-1/i4054_override_templates · pkp/pkp-lib@eaada3c · GitHub

1 Like

Hello @wangra and @Vitaliy,

Thank you so much for this thread! I was just encountering this exact issue on a fresh installation of OJS 3.1.2-1 from the downloads page.

Here is what I did to fix the issue on my installation, based on the information provided by @Vitaliy:

  1. Opened my /lib/pkp/classes/plugins/Plugin.inc.php file in a text editor
  2. Opened the new version of the file in a web browser: https://github.com/pkp/pkp-lib/blob/eaada3cd59172f2b387b36fd13251a3121d0cda3/classes/plugins/Plugin.inc.php
  3. Grabbed the following code from the file on GitHub:
	/**
	 * Call this method when an enabled plugin is registered in order to override
	 * template files. Any plugin which calls this method can
	 * override template files by adding their own templates to:
	 * <overridingPlugin>/templates/plugins/<category>/<originalPlugin>/templates/<path>.tpl
	 *
	 * @param $hookName string TemplateResource::getFilename
	 * @param $args array [
	 *		@option string File path to preferred template. Leave as-is to not
	 *			override template.
	 *		@option string Template file requested
	 * ]
	 * @return boolean
	 */
	public function _overridePluginTemplates($hookName, $args) {
		$filePath =& $args[0];
		$template = $args[1];
		$checkFilePath = $filePath;
		// If there's a templates/ prefix on the template, clean up the test path.
		if (strpos($filePath, 'plugins/') === 0) $checkFilePath = 'templates/' . $checkFilePath;
		// If there's a lib/pkp/ prefix on the template, test without it.
		$libPkpPrefix = 'lib' . DIRECTORY_SEPARATOR . 'pkp' . DIRECTORY_SEPARATOR;
		if (strpos($checkFilePath, $libPkpPrefix) === 0) $checkFilePath = substr($filePath, strlen($libPkpPrefix));
		// Check if an overriding plugin exists in the plugin path.
		if ($overriddenFilePath = $this->_findOverriddenTemplate($checkFilePath)) {
			$filePath = $overriddenFilePath;
		}
		return false;
	}
	/**
	 * Recursive check for existing templates
	 * @param $path string
	 * @return string|null
	 */
	private function _findOverriddenTemplate($path) {
		$fullPath = sprintf('%s/%s', $this->getPluginPath(), $path);
		if (file_exists($fullPath)) {
			return $fullPath;
		}
		// Backward compatibility for OJS prior to 3.1.2; changed path to templates for plugins.
		if (($fullPath = preg_replace("/templates\/(?!.*templates\/)/", "", $fullPath)) && file_exists($fullPath)) {
			if (Config::getVar('debug', 'deprecation_warnings')) {
				trigger_error('Deprecated: The template at ' . $fullPath . ' has moved and will not be found in the future.');
			}
			return $fullPath;
		}
		// Recursive check for templates in ancestors of a current theme plugin
		if (is_a($this, 'ThemePlugin')
			&& $this->parent
			&& $fullPath = $this->parent->_findOverriddenTemplate($path)) {
			return $fullPath;
		}
		return null;
	}

  1. Replaced the following code in my local file, with the code above:
	/**
	 * Call this method when an enabled plugin is registered in order to override
	 * template files. Any plugin which calls this method can
	 * override template files by adding their own templates to:
	 * <overridingPlugin>/templates/plugins/<category>/<originalPlugin>/templates/<path>.tpl
	 *
	 * @param $hookName string TemplateResource::getFilename
	 * @param $args array [
	 *		@option string File path to preferred template. Leave as-is to not
	 *			override template.
	 *		@option string Template file requested
	 * ]
	 * @return boolean
	 */
	public function _overridePluginTemplates($hookName, $args) {
		$filePath =& $args[0];
		$template = $args[1];
		$checkFilePath = $filePath;

		// If there's a templates/ prefix on the template, clean up the test path.
		if (strpos($filePath, 'plugins/') === 0) $checkFilePath = 'templates/' . $checkFilePath;

		// If there's a lib/pkp/ prefix on the template, test without it.
		$libPkpPrefix = 'lib' . DIRECTORY_SEPARATOR . 'pkp' . DIRECTORY_SEPARATOR;
		if (strpos($checkFilePath, $libPkpPrefix) === 0) $checkFilePath = substr($filePath, strlen($libPkpPrefix));

		// Check if an overriding plugin exists in the plugin path.
		$checkPluginPath = sprintf('%s/%s', $this->getPluginPath(), $checkFilePath);
		if (file_exists($checkPluginPath)) {
			$filePath = $checkPluginPath;
			// Backward compatibility for OJS prior to 3.1.2; changed path to templates for plugins.
		} else {
			$checkPluginPath = preg_replace("/templates\/(?!.*templates\/)/", "", $checkPluginPath);
			if (file_exists($checkPluginPath)) {
				if (Config::getVar('debug', 'deprecation_warnings')) {
					trigger_error('Deprecated: The template at ' . $checkPluginPath . ' has moved and will not be found in the future.');
				}
				$filePath = $checkPluginPath;
			}
		}

		return false;
	}

  1. Refreshed the journal website and the CSS loaded in exactly as I expected.

Thanks!

2 Likes

Hi @Vitaliy & @douglas_bruey,

Thank you both for your help! I followed your suggestions and my child theme is able to load the parent theme now! This is incredible! I was blocked for an entire dev sprint and this issue was endangering our release to production. I am so truly grateful for both your help and insight, unfortunately the like button doesn’t allow me to add more hearts! I hope you both have a fantastic week! :grinning: :star2:

1 Like

Sorry to bug here, but I think I have this right thread to ask,

What I wanted to to achieve on home page using health science theme latest version -

I dont want to see the issues list which are showing on top header image area, instead i want to put some static text there