Relaciones Internacionales - OJS 2.4.2 + Bootstrap + Google Fonts and more

Hi PKP Community,

From Madrid, Spain, we’re glad to share with you our custom OJS installation: http://www.relacionesinternacionales.info
GitHub: GitHub - relaciones-internacionales-journal/ojs-2-4-2: Previous OJS customization for the academic online spanish journal "Relaciones Internacionales"

We use this great software since 2008 and we’ve played a lot with the code. Sometimes in a very hard code way, sometimes honoring code purity. Some features:

  • OJS 2.4.2
  • Bootstrap 2.3.1 (yup, we have some upgrades to do).
  • Custom front-end and back-end templates.
  • Custom icons & images.
  • Custom CSS, added some CSS3.
  • Responsive theme.
  • Two styles theme: black or white defined by the visitor.
  • Added Google Fonts.
  • Some JS animations for carousel, easing, etc.
  • Minified CSS and JS.
  • Lot’s of weird .htaccess rules due to our hosting configuration, outside our control. But they do work.

PICTURES
Homepage desktop white style / Homepage mobile devices white style / Homepage mobile devices black style:

ABOUT THE JOURNAL
Relaciones Internacionales journal was founded in 2004 by a group of students and professors from the International Relations and African Studies doctoral programme at the Autonomous University of Madrid, Spain. It’s an electronic publication that seeks to contribute to the study and debate of contemporary issues in International Relations.We provide free and instant access to all content. We believe that allowing free public access to academic investigation supports the open exchange of knowledge.

More info about the team, indexes, etc. can be found at the website.

Thanks a lot to the PKP Team. You rock!

12 Likes

Hi @andymp,

Great work! :slight_smile: Loved to see how well it was displayed in my small phone screen.

Did you guys managed to implement these changes using plugins or changing the core system files? In any case, a really good job. Congratulations!

Cheers,
Bruno

Hi @andymp,

Thanks for sharing – your journal looks great!

Have you considered sharing your customized version of OJS via github? It would allow other journals to learn from and possibly use your work for their installation.

Cheers,
Michael

1 Like

This looks amazing, I love it! Thanks for sharing!

1 Like

Hi Bruno, Michael and Karen,

Thank you all!! :stuck_out_tongue_winking_eye: Glad you like it!

First of all I must tell you that the PKP Forum was, and is, really useful to me.

Briefly, I mostly added or changed code in the .tpl files of the “templates” folder, so no were plugins added. Other files were also modified, as in:
lib > pkp > templates;
plugins > blocks
& locales .xml

During the process, 206 files were changed, 2405 lines of custom CSS were added for each style, a few JS to spice up, a little help from third-party codes, and 112 coffees and 1,823,134 billion beers drunk. No pandas were harmed.

As for github, we’re thinking about it. It would be really nice if someone finds something useful, even if I may be ashamed of some really really nasty hard code.

Besides I’ve been playing with OJS 3.0 for a few months (also a new website design, this one is from 2013) and we may upgrade at the end of this year, so I may share before both versions via github. I’ll let you know anyway.

Finally, dudes, the work you do at PKP… Chapeau!
Cheers,
Andy

3 Likes

Hi @andymp,

If you make this publicly available, let me know. I can take a look and try to help you giving some advices/code on how to move some changes into a plugin, if not everything. It would be much easier to upgrade your OJS instance if you have everything inside a plugin.

Related to the OJS 3 upgrade, I am not sure how are you planning your migration from 2 to 3. Currently we are still in alpha release, and the beta is coming soon, but we are far away from supporting a full migration from 2 to 3, and I am not sure how/when this is going to happen.

Anyway, congrats again!

Cheers,
Bruno

Hi Bruno,

It’s now on GitHub (first time I use it by the way). You can find here: GitHub - relaciones-internacionales-journal/ojs-2-4-2: Previous OJS customization for the academic online spanish journal "Relaciones Internacionales"
I’ve updated my first post to include this link.

As you will see, most changes are just re-ordering blocks of code or added HTML in “templates folder” files, so I don’t know if I any plugin can do that. But adding Bootstrap or Font Awesome CSS & JS could be easily moved into a plugin (I think). Anyway help would be greatly welcomed.

I’m now testing the upgrade to 2.4.6 (test repo is also on Github) and I’ll also try to clean modifications. Hope that it’ll ready in a few weeks.

Thank you again, cheers,
Andy

3 Likes

Hi @andymp,

Really nice you opened this. I will take a look, but just to quickly answer your question about changing blocks of HTML code, you can do something like this plugin does, or even just use this plugin. It is ready for OJS 2.4.x, not sure about earlier versions: http://lib-git.lib.sfu.ca/beghelli/customTemplateManager

Let me know if you have any questions about how to use it. Generally speaking, read the addPluginInfoPreFilter method implementation and you will probably figure it out something.

Cheers,
Bruno

Hi @beghelli,

Just your saw plugin. Maybe I’m wrong, but… Does this wonderful piece of code means that OJS can now have easier to maintain “child themes”, as in WordPress?

I think I love your addPluginInfoPreFilter method. I’m going to play with it & I’ll keep you up to date. Thanks a lot!

Cheers,
Andy

1 Like

@andymp,

Glad you liked it. :smile:

One can implement a theme that “inherits” the default system templates and extends them using the same approach I did for this plugin, for sure, so I think you can use the word “child”. But not sure if that’s the same from WordPress.

Or you can just overwrite something inside an specific template file that you wanted to change; that’s not inheritance but the plugin allows you to do that using the overwrite node inside the plugin settings XML.

In any way, I saw a little bit of the work you did, and I am pretty confident that you could use this plugin or something like that to implement everything you needed without touching the core system files.

Cheers,
Bruno

@andymp impressive work. Thanks to share.

From your experience I’m pretty sure you can make valuable contributions to this discussion:
http://pkp-disc.lib.sfu.ca/t/coding-standards-2015/35/26

Cheers,
m.

Hi @beghelli,

After I saw you plugin to manage .tpl files, I thought about moving as much changes as I could to plugins .

I’ve never created any OJS plugin, so I’ll be very grateful if you could take a quick look at this: GitHub - relaciones-internacionales-journal/add-CSS-JS-plugin: OJS Plugin to easily add CSS stylesheets or JS files to Head - IN DEVELOPMENT

It’s a plugin that allow to add CSS & JS files just before the closing </head> tag, in order to easily include custom CSS/JS files or things like Bootstrap, Font Awesome, etc.

This is just the first structure. Don’t know if I’m in the right direction or if this is a complete mess, or a completely unnecessary plugin. Anyway, I want to add more code so JS files could be placed in the footer or to run them the asynchronous way.

As I said, I’ll be glad if you tell me what you think about it.

Cheers,
Andy

@marc Thx Marc! I’ll take a look and I hope I can make some contribution, as you said.

Cheers,
Andy

@andymp I missed to say that IMHO there was an easier to add CSS and JS to your theme.

It was explained here:
http://pkp.sfu.ca/support/forum/viewtopic.php?f=9&t=9496

Here you have a real example:

The nice part of this approach is that you “package” everything in your theme.
In the other hand, your plugin approach is theme independent…

So thanks a lot to share because I imagine a couple of scenarios where your code will be useful. :wink:

Take care,
m.

Hey @marc , it’s my first OJS plugin, you’re talking with a noob here dude :stuck_out_tongue_winking_eye:!

I did know about the addStyleSheet function defined in PKPTemplateManager. In fact, I used it during my first successful tests. My plugin was then a theme plugin, not a generic plugin.

But I found is that the JS & CSS we’re not displayed where I wanted, near the end of the <head>, but earlier. So my overwrite CSS files didn’t work quite well. I then went for the $additionalHeadData and I thought about having a folder with all modified or added files (CSS, JS and smarty templates).

I’m also upgrading our OJS to 2.4.6, so all became part of the same process. In a way, this plugin is the first step. I went with second one, an “override” template folder, and I asked in the forum here. Right know I think I’ve found a solution about what Alec said about compilation when using previously defined multiple template directories. I hope…

If I achieve to maintain a complete separate folder with all my modifications, upgrades will be much more easier to implement for me (before going into OJS 3, of course). So thanks a lot for the posted example, and even if I do agree that your way is easier, my goal is also to try to “package everything” but in a different way :stuck_out_tongue_closed_eyes:.

Y así entre nosotros, Marc, he visto un poco lo has hecho y estás haciendo con el OJS y… ¡¡¡Qué crack :sunglasses:!!!

Cheers,
Andy

1 Like

I moved a post to a new topic: Template customization question

Great point. Usual performance tools ask to structure code a little bit different as we are doing now… but with version 3 in the oven I never mention. In confidence, I didn’t took a look to OJS 3.x code yet, so I don’t know if it’s going to be improved.

[quote=“andymp, post:16, topic:1365”]
I’m also upgrading our OJS to 2.4.6, so all became part of the same process. In a way, this plugin is the first step. I went with second one, an “override” template folder, and I asked in the forum here.[/quote]

I’m following this post too. I full agree we need and I like your approach. I’m very happy that alec and the guys are working in this line. Looks like we themers, that come with different free soft projects, we come with same proposals… when I meet them I was kind of obsessed to include smarty3 in core that lets you do this. :wink:

Suena más espectacular de lo que es… en serio. :slight_smile: Lo bueno de ser “hombre-orquesta” (admin, desarrollador, themer, soporte…) es que tienes mucha flexibilidad y visión de conjunto, pero por otro lado, siempre te falta tiempo para profundizar.

Tu trabajo con BS es algo que tenía pendiente des de hace mucho. Celebro mogollón que alguien haya cogido el toro por los cuernos. La gente de PKP está muy interesada recorrer el camino que estás caminando… así que toda tu experiencia puede ser muy útil.

Si quieres, podemos quedar un día y hablamos de todo un poco, no? :wink:

Un abrazo,
m.

Hi, Some time ago we did something similar (for the http://medisur.sld.cu journal), but it becomes very dificult to maintain, and keep ojs updated, so now i am using a plugin approach to replace original templates based on the filesystem structure (work in progress in http://ats.unicafam.edu.co/). The theme plugin has a templates folder whith similar structure to the original OJS templates, the plugin seeks in its own folder, and if there is a template uses it, and if not, uses the original template. This approach could be a little more slow under a high traffic because of the Disk IO, but for the moment (an the tests that I made) It seems useful.
If you are interested I can upload a base plugin to github and keep it updated.

Hey @marc,

Sorry for this late answer, quite busy right now.

I do agree with you about smarty3 in OJS 3 core, but I did play a little with OJS 3 and as far as I know it changes completely the way templates are managed. Seems Alec & the PKP Team are doing a huge and great work with this new version. Besides, the only problem I see with smarty3 is that it doesn’t work with PHP 4 and this may cause troubles in countries with old servers infraestructure.

And I think it’s quite nice that the OJS Community members come from different free soft projects as you said. I’ts a very good way to learn tips & tricks from others :stuck_out_tongue_winking_eye:

Lo de “hombre-orquesta” me ha sonado a “pluriempleado explotado”, que me lo conozco :laughing: El caso, por mi parte, muchísimo respeto para el creador del MOJO, que lo sepas. Como el creador del Anillo Único lo de “to rule them all”.¡Qué crack! Podías haber puesto “to rule them all, to find them, to bring them all and in the darkness bind them” :laughing:

Y cuando quieras hablamos, será un placer. Un abrazo,
Andy

PS: This topic is going out of control :mushroom:

Hi, when i try to change the lib folder on my ojs instalation to the this… That give me problems… Can you tell me how to repair that?