referencing custom common files in a theme

[spacewalk]

I'm developing a theme for an OJS user. This user hopes to host multiple journals on a single OJS installation, and those journals will NOT share an identical design. They may use significantly different page layout, in fact.

For the first journal, I've created a custom theme in plugins/themes. Let's call it themeOne. In its css file (themeOne.css) I've pasted the entirety of common.css, and I'm modifying ALL the style selectors in themeOne.css. It's working fine. I've also placed all css background images in the themeOne directory and the css references them there. No problem.

My goal is to deliver only the themeOne directory, have the OJS user upload it and choose it in Step 5: The Look. And that's it. Their journal will now embody my work.

However, to achieve the desired design, I had to go beyond CSS; I changed some markup in templates/common/header.tpl and footer.tpl. But I don't want these changes to be OJS-wide; I want them to pertain only to one journal.

So... what I'd really like to do is place any modified .tpl files in my themeOne folder, and have OJS use them from there. That way I deliver one directory that does not overwrite any existing files, and the theme directory affects only the journal that uses it. I'm assuming (hoping, actually) that I can somehow extend the theme class in a way that will cause its own modified .tpl files to be used.

Any thoughts on how to do this? Thanks.

[spacewalk]

Commenting on my own post:

I don't have the answer, but I'm on the trail of one with this quote from p. 45 of OJSTechnicalReference.pdf:

- Templates: Any plugin can keep templates in its plugin directory and
display them by calling:
$templateMgr->display($this->getTemplatePath() . 'templateName.tpl');
See the native import/export plugin for an example.

That's exactly what I want to do, and I can see that $templateMgr line being used in NativeImportExportPlugin.inc.php (along with related lines of template-invoking code). But from that complex file I can't deduce how I would use this technique in the plugin file for my custom theme (MyThemePlugin.inc.php, for example). Would I use that line in a function, and if so where and how? Furthermore, if I get my customized header.tpl file displayed this way, how would I subsequently get a customized footer.tpl file displayed to complete the HTML page?

Any guidance much appreciated.

[mcrider]

Hi Spacewalk,

I think you're on the right path, and I also think this is a pretty good idea. Essentially you are going to want to wrap the code in the header.tpl file that you don't want with an if statement that will only execute if there isn't replacement code in the theme directory. I would suggest taking a look at how the sidebar code is called in the header file, and how hooks are registered in general. I think you'll need to add some registration code to your theme plugin, and when it is active (i.e. when the theme is selected), it should in turn call the templateMgr->display function showing your custom header code.

This will really be the same procedure for the footer, just put it in the footer.tpl file. Keep us updated on your progress and if you run into any other problems.

Good luck,
Matt

[spacewalk]

I think you're on the right path, and I also think this is a pretty good idea. Essentially you are going to want to wrap the code in the header.tpl file that you don't want with an if statement that will only execute if there isn't replacement code in the theme directory. I would suggest taking a look at how the sidebar code is called in the header file, and how hooks are registered in general. I think you'll need to add some registration code to your theme plugin, and when it is active (i.e. when the theme is selected), it should in turn call the templateMgr->display function showing your custom header code.

Thank you. This is interesting and appreciated, though frankly it is not the direction I had hoped to go in. I was hoping not to modify the *common* header.tpl and footer.tpl files at all. Rather, I had hoped to place *modified versions* of those files in plugins/themes/MyTheme, and include some code in MyThemePlugin.inc.php that would intercept all calls for header.tpl and footer.tpl and cause my modified ones to be displayed instead.

Does that approach have any hope of succeeding in the world of OJS?

Thanks.

[mcrider]

Hi again Spacewalk,

Sure, but instead of modifying the header file, you would have to modify, e.g. templates/index/journal.tpl. Where it says {include file="common/header.tpl"}, you would have to check for the hook you registered in your plugin, and if it is registered, to display your custom header.tpl (otherwise, include common/header.tpl). In any case, you're going to have to modify system template files.

Hope that helps,
Matt

[spacewalk]

Hi again Spacewalk,

Sure, but instead of modifying the header file, you would have to modify, e.g. templates/index/journal.tpl. Where it says {include file="common/header.tpl"}, you would have to check for the hook you registered in your plugin, and if it is registered, to display your custom header.tpl (otherwise, include common/header.tpl). In any case, you're going to have to modify system template files.

Hope that helps,
Matt

Matt,

Again, appreciated. Obviously, I'm new to OJS. Because templates can override some functions of some base classes, I thought it might be possible to invoke modified markup files inside the template directory, much as you invoke modified CSS in the them directories.

This person, for example, is detecting what OJS is displaying, and then invoking custom CSS for particular display situations.

viewtopic.php?f=8&t=3084&start=0#p11829

Does that shed any additional light? Thanks.

[mcrider]

Hi again,

This person, for example, is detecting what OJS is displaying, and then invoking custom CSS for particular display situations.

viewtopic.php?f=8&t=3084&start=0#p11829

What this person is doing is selectively including css--I.e. he built his custom theme, but modified the activate function to only include certain css files when on certain pages (e.g load the editorSubmission.css when editors are viewing the submissions page). This won't be very useful for overriding templates.. {include file="common/header.tpl"} is hardcoded into the templates/index/site.tpl file and if you don't want OJS to include that file, you'll have to do what I suggested above.

The overridden activate function is a good place to register a hook, however! Sorry if i'm still not following your point...

Cheers,
Matt

[spacewalk]

Hi again,

This person, for example, is detecting what OJS is displaying, and then invoking custom CSS for particular display situations.

viewtopic.php?f=8&t=3084&start=0#p11829

What this person is doing is selectively including css--I.e. he built his custom theme, but modified the activate function to only include certain css files when on certain pages (e.g load the editorSubmission.css when editors are viewing the submissions page). This won't be very useful for overriding templates.. {include file="common/header.tpl"} is hardcoded into the templates/index/site.tpl file and if you don't want OJS to include that file, you'll have to do what I suggested above.

The overridden activate function is a good place to register a hook, however! Sorry if i'm still not following your point...

Cheers,
Matt

No, I think you're following my point fine, and I think yours has finally sunk in for me. So, many thanks! I need to try to understand the OJS workings better. I'm finding the OJS Technical Reference a bit over my head on the practical aspects of registering hooks, etc. Anything else out there to recommend? Again, thanks.

[constancy]

How do I place images exactly where I want them inside a centered container div using css? I have a container div that will hold the content of my webpage. The div has auto margins and will center itself in web browsers.

[jmacgreg]

Hi all,

Spacewalk, there's an unbelievably large amount of information on the forum, and some on the wiki (http://pkp.sfu.ca/wiki). I'm not a developer myself, but if I have a technical issue I'm amazed sometimes by the amount of information in these two resources. There's also the Doxygen documentation (http://pkp.sfu.ca/ojs/doxygen/html/index.html), although if the technical reference is too technical, that might be doubly so (it is for me!). That said, we're always happy to take questions if you get stuck.

Constancy, what about giving the image an id and then add a css rule to your custom css file? If you're adding this image via HTML this should be easy; of course, if you're not, it might be more difficult and necessitate some template manipulation.

Cheers,
James