[HOWTO] change OJS look & feel?

OJS development discussion, enhancement requests, third-party patches and plug-ins.

Moderators: jmacgreg, btbell, michael, bdgregg, barbarah, asmecher

Forum rules
The Public Knowledge Project Support Forum is moving to http://forum.pkp.sfu.ca

This forum will be maintained permanently as an archived historical resource, but all new questions should be added to the new forum. Questions will no longer be monitored on this old forum after March 30, 2015.
Posts: 352
Joined: Wed Dec 14, 2005 4:15 am

[HOWTO] change OJS look & feel?

Postby mbria » Tue Oct 10, 2006 10:48 am

Hi all,

I post here my recent experience creating a new -quite "tunned"- global template for OJS, that I subtitled "Marc's quite dirty way" because I'm pretty sure there will be better and/or easier ways to deal with this task.

Please, feel free to comment. Your experience will help me to improve this document.

This mini-howto expects you have some basic skills on html, php, css.

After this howto, ALL your OJS system will look differently (this is our goal).
If you only need some CSS changes, you won't be interested in this howto, as far as OJS offers you a way to upload a css file for a single journal.
Only some parts of this howto will be useful for you if you are only interested in templating one single journal.

0) Very basic background (templates on practice).

OJS is based on Smarty template engine, so is good to take a look to it's syntax at: http://smarty.php.net/ (save this link for further references)

When "templating", you must know that OJS contains 4 important directories:

    styles: The most important directory, including the CSS files.
    templates: A quite important one, with .tpl files that indicates OJS how to "dress" the content.
    plugins: Some plugins show stuff on the interface (for instance the very recomendable "webFeed"). Just in case you include one of those plugins in your system, you must know that the plugin normally include a template directory.
    pages: Including the page handlers, that basically extract content from the database and delegate to the template system the task os showing it content. When templating you won't be interested in change those scripts, but probably you would like to know what information is extracted by every handler.

Note: Probably is my ignorance, but until a more encapsulated template model is developed (I love drupal's one with phptemplates engine) or this one is more documented you must remember to update some files from all those directories in your production machine.

1) The styles' directory. (/styles)
Not much to say that didn't sounds obvius. Just comment 3 of those css:

    common.css: You will probably be interested in modify this css, but remember that those changes will change your magazine and all your journals.
    articleView.css: Those styles refer to the way an article will be shown.
    rt.css: Added recently to OJS, this style is applied to the article's Reading Tools.

If you want to create a new css library, add it here and modify your common/header.tpl template.

2) The templates' directory. (/templates)

Inside this directory you will find a folder for each OJS' area, but "common" is the most important one. As the name suggests, "common" include templates that are used is quite in every place (magazine and journals).
Take a look to those files, because probably you will find there the divs or the tables you want to change to fit with your new template.

    header.tpl: Described as "Common site header" it template is included in quite every page. Adds html head, external libraries and the html need to build the header, the breadcrumb. It template stops just in the momment the page's content will be added.
    footer.tpl: Starts closing the content /div and adds the right column html calling the sidebar.tpl. Finishes the html page with some debug information (that will only be shown when you enable ojs' debug).
    sidebar.tpl: Adds the needed html to render the right column, that normally include login, the searcher, some information and help. It also calls block-plugin's templates, as for instance WebFeed plugin.

If a page don't fit with the template and the styles you expected, read carefully the url of the page and you will find what template is executed.

3) The plugins' directory. (/pages)

If you include (for instance) the WebFeed plugin, here you will find it's templates.
WebFeed is a "generic" plugin, so open this folder and then "webFeed".
Finally in "template" directory you will find some files that define how the plugin will be shown.

Until the plugin is redesigned, if you want to change this block plugin to a footer one you can follow this instructions:


That's all folks :-)

PD: Sorry for my English. As you will notice, this is not my mother tongue.

Posts: 352
Joined: Wed Dec 14, 2005 4:15 am

Re: [HOWTO] change OJS look & feel?

Postby mbria » Fri Oct 17, 2008 7:21 am

Notice this howto is outdated.

OJS 2.2 improves significantly this part adding a very functional theme system.

Take a look to your /plugins/themes folder to learn more about it.



Return to “OJS Development”

Who is online

Users browsing this forum: No registered users and 1 guest