Template customization question

arielnoname · June 26, 2015, 5:49pm

I was just working in a OJS installation that has to be customised and I was working on the template structure: this is what I got so far:

<!-- BOF HEADER.TPL ( /ojs/lib/pkp/templates/common/header.tpl ) -->
<html>
<body>


<div id="container">
    <div id="header">
        <div id="headerTitle">
            <img header>
        </div>
    </div>
    
    {include file="common/navbar.tpl"} <!-- /ojs/templates/common -->
    
    <div id="body">
        
        <!-- if sidebars -->
        
        <div id="sidebar">
            {if $leftSidebarCode}
            <div id="leftSidebar">
                {$leftSidebarCode}
            </div>
            {/if}
            {if $rightSidebarCode}
            <div id="rightSidebar">
                {$rightSidebarCode}
            </div>
            {/if}
        </div>
        
        <div id="main">
                
            {include file="common/breadcrumbs.tpl"} <!-- ( /ojs/lib/pkp/templates/common/breadcrumbs.tpl ) -->
            
            <div id="content">
                
<!-- EOF HEADER.TPL -->

                <!-- mysterious shit -->
                
<!-- BOF FOOTER.TPL ( /ojs/lib/pkp/templates/common/footer.tpl ) --> 
                
                
                
            </div><!-- content -->
            
        </div><!-- main -->
        
        
    </div><!-- body -->
    
</div><!-- container -->

</body>
</html>
<!-- EOF FOOTER.TPL -->

With that I can start making a new template structure.
The thing is: Where are the files or commands for displaying things on the part. I.E the home page?

Can you give me a hand with this?

Thanks man, good work

asmecher · June 26, 2015, 5:52pm

Hi @arielnoname,

FYI, I’ve split your question into a new topic to keep things organized.

Regards,
Alec Smecher
Public Knowledge Project Team

asmecher · June 27, 2015, 10:29pm

Hi @arielnoname,

Can you describe what kinds of modifications you’re trying to make? I’ll describe where to find the templates you’re looking for.

Regards,
Alec Smecher
Public Knowledge Project Team

andymp · June 28, 2015, 10:29am

Hi @arielnoname,

I can give you a hand also, if Alec allows me, so he may have some spare time for, I don’t know, maybe having a beer .

Anyway, Alec’s question should be answered first, so go ahead @arielnoname, tell us what you want to do.

Regards,
Andy

arielnoname · July 11, 2015, 10:54pm

Hey guys, thanks for the help!

I’ve just started to work again in this. I’ve managed to get responsiveness working in my OJS deployment using Zurb Foundation’s grid system (I did a custom install only with the grid).

I had to delete a lot of the initial CSS ( sorry for that ).

I think I’ll post the modified code into Github for you to see in the next days. I have some questions:

Can you tell me what technology is behind the template system?
Why is sometimes 2 files with the same name? (e.g: common.css)
Why there is two templates folder? /ojs/lib/pkp/templates/ and /ojs/templates ? (When I wanted to modify the navbar I founded the other folder lol)
And last but not least: Is it going to be a big difference with v3.0 in this (templates) matter? I haven’t downloaded it yet. to be honest this is the first time I install this system. I’m telling this because maybe I could be doing this thinking more foward.

Thanks again guys

Edit
Im trying to understand the rendering process of firstly: the homepage; all the files involved.

Maybe there is a manual somewhere? Are you using Smarty? v2? v3?

Edit2:

Ok, now Im starting to get this.

There is a core package for templates used in all PKP projects. There are two template folders because the second one is used in the deployment of the specific package (OJS in this case, and because of it, for example, the navbar, gets its separate file from the core 'cause it differs from the other projects.

Im still a little lost about the whole structure and how it works,

Cheers

andymp · August 20, 2015, 4:58pm

Hi @arielnoname,

Sorry for the late reply. I’m going to try to answer some of your questions:

OJS uses Smarty v2 (documentation is here: http://www.smarty.net/docsv2/en/).
A good resource but maybe a bit technical is OJS Doxygen: https://pkp.sfu.ca/ojs/doxygen/stable/html/index.html There’s info about OJS classes, modules and packages.
Files in ojs > lib > pkp > templates are like the bones. Usually you can focus on files stored in lib > pkp > templates > common. There you can modify your header, your footer, etc.
Then you have the ojs > templates folder. Most of tese .tpl files are blocks of content displayed inside the main content on pages. From my experience, the best way to keep track of your changes and not work so much when upgrading is the one indicated by Alec here: Multiple templates directories - #3 by andymp
This way you’ll have a separate directory where you can store all your modified .tpl files. I was upgrading our installation from 2.4.2 to 2.4.6. so I’ve already done this and it’s pretty easy. You can see the final result and the link to GitHub in this post: OJS 2.4.6 + BS + FontAwesome + Google Fonts + 2 plugins
I can help you to replicate this I you want.
Homepage rendering process: roughly it works this way. Take a look at templates > index > site.tpl. In this file, you have two lines of codes
line 15: {include file=“common/header.tpl”}
line 55: {include file=“common/footer.tpl”}
So when you visit your homepage (if there’s more than 1 journal) site.tpl is loaded and it calls lib > pkp > templates > common > header.tpl and footer.tpl, whose content is included.
And maybe the most important thing. As far as I know OJS 3.0 template handling is completely different, much easier to customize and mantain in future upgrades. Haven’t tried yet because I was upgrading but now I’m going to start with OJS 3.0 tests. So maybe it’s a better option if you want to fully modify OJS, even if it’s a development release. It’s up to you.

Hope this helps, cheers,
Andy

arielnoname · December 10, 2015, 10:31pm

Hey guys. Thanks for all your answers.

I didn’t have time to follow up this thing and today I was in a meeting for people that need another OJS implementation.

The last one came up really good. It’s done with Foundation 5 so, check it out!

Fully responsive (I think): http://revistamutatismutandis.com/

My next goal for this new project is to get inside OJS 3 and get that templating done! hahaha

Is there any channel I can subscribe for known issues or something like that?

If you want to check my source for http://revistamutatismutandis.com/ , I can share it with you.

Cheers

RCVSK · December 22, 2015, 4:32am

Hi arielnoname
I had a look at your http://revistamutatismutandis.com/ installation (which looks really good!) and was wondering if you could help me with two things:

How did you make the sidebar go under the content in mobile mode (whatever I tried has failed and the sidebar is always above the content, so I have disabled it with css in smaller screens)
How did you create the responsive menu.

I would really appreciate any help if you could spare the time.

All the best

George

arielnoname · December 22, 2015, 4:48am

Hello @RCVSK,

Thanks for the compliment.

Both questions relays in the same answer. I used a Foundation CSS Framework. (v5).
I did it some months ago, so I can’t remember which files I edited quite well, but with the answer from @andymp I think you can find all the files you need.

Cheers