OJS 2.4.6 + BS + FontAwesome + Google Fonts + 2 plugins

Community Showcase
1

Hi PKP Community,

OJS 3.0 is out now (Hoooray!). But OJS 2.4.6 is still there and some crazy people like me are upgrading to it. So, I’m glad to share with you our new OJS 2.4.6 custom installation. Here’s the link: http://www.relacionesinternacionales.info/ojs/index.html

And because open source rules, everything is on GitHub: Relaciones Internacionales · GitHub

You will find this custom OJS 2.4.6, our previous custom OJS 2.4.2, the two plugins described below and some more detailed info.

Thanks to the PKP Team and the PKP Community members for their help :heart_eyes:. Our custom installation is now cleaner and easier to mantain.

Features:

  • OJS 2.4.6
  • Bootstrap 3.3.5
  • FontAwesome 4.3
  • JQuery 1.11.3 (needed for BS)
  • JQuery Migrate 1.2.1
  • Custom back-end and front-end design
  • Responsive design: mobile, tablet and desktop CSS stylesheets
  • User can choose between 2 styles, dark & light
  • Sticky header in desktop version
  • Menu toggle in mobile & tablet versions
  • Issues + Articles Carousel in journal frontpage
  • Cookies Notice
  • Google Structured Data Markup added in article and issues templates
  • Google Fonts: Roboto (<h2>, <h3>, <h4>), Open Sans (<p>, <a>, etc), Crimson Text (<h1>)
  • Override folder: includes all template changes, except those made in lib > pkp subfolders and plugins folders. Also contains custom CSS and JS files.

Plugins developed/updated/modified:

Code, install and issues in Github (see above). If you have any questions or any issue, go ahead and ask!

Next step, OJS 3. That’s all folks!

As usual, some screenshots:

Frontpage / Desktop - Dark


Frontpage / Mobile - Dark


search / authorDetails.tpl / Desktop – Light

<img src="/uploads/default/original/1X/eb59271f16ea19895288499d7503cdb08ca52242.jpg"width=“200”>

Article / Tablet - Light - Menu expanded


Manager / Plugins / plugins.tpl / Desktop - Light


sectionEditor / submissionEditing.tpl / Desktop – Light - copy-edit tab open

10 Likes
2

Hi @andymp,

This work is simply amazing! Maybe the best theme I’ve seen done in years, and open source on top of it all. Many, many thanks for sharing this. I’m going to really look forward to looking at this further.

James

1 Like
3

Thanks for this, @andymp – such impressive work – both in the coding and design, but also in the sharing. Thanks for being part of our community and making our software look SO GOOD and demonstrating how to make it work with a modern tool set.

1 Like
4

This looks absolutely gorgeous! Thanks so much for sharing!

1 Like
5

Hi @andymp,

What everyone else said – that looks fantastic and thanks for being such a good FOSS citizen. We’re well aware of how much work this represents.

Have you considered structuring your git repo as a fork of the PKP repo? That would make it easier to look at the differences you’ve introduced (and might help with fork management in the bargain). Let me know if I can help at all with this.

Regards,
Alec Smecher
Public Knowledge Project Team

1 Like
6

Looks great @andymp. When you do start working towards 3.0, feel free to reach out. The two big things which will help to know is that (almost) all the frontend templates you need are in their own directory and you can do all of your overrides from a theme plugin. Happy to help orient you.

1 Like
7

Thank you all! As I said, this wouldn’t have been possible without your help, so I’m really really happy you liked it!

Regarding forking our git repo to the PKP repo, @asmecher I’ll be glad to do it. It’s a good opportunity to learn a bit more because I’m a complete GitHub newbie. I’ll try this weekend and let you know if I get lost.

And @NateWr, thanks for the tips! Sharing knowledge, best way to improve… Open source rules.

Andy

8

Hi @asmecher ,

I’ve forked PKP OJS and pkp-lib repos, and replicated my changes on ojs-stable-2_4_6 branches.

Seems to work, at least I can compare both branches on both repos. Let me now if I need to do anything else.

Regards,
Andy

9

Hi all,

Great, @andymp. I’ve gone through the code to see what you’re doing – now that it’s in as a fork of OJS and pkp-lib, I can easily compare the versions through the Github interface and make comments etc:

I see that some of what you’re doing is site-specific, which is exactly what you set out to do, so no surprises there. I hope that OJS 3.0’s theme plugin support will allow you to do much of that as a theme plugin so you won’t have to modify the core code anymore.

I think you’ll find that managing your code with github gives you a much easier way to upgrade when it comes time to re-apply your changes to a newer release (e.g. OJS 2.4.6-1, which will be released shortly). You’ll need to do a git rebase to apply your changes to the new tag, and that should be it.

I can’t recall whether OJS 2.4.6-1 will have a JQuery/JQueryUI update included – @beghelli can probably remind me. This should make it easier to work with modern Javascript.

I see what you’re doing with the overrides template directory and it does have advantages, but one disadvantage is that it won’t allow you to easily maintain templates when you have to upgrade. Your override copies can’t be compared against the stock OJS templates (via git, anyway) so you’ll have to figure out a way to manually manage updating them. (There’s a good role for these, and we’ve talked about how to mitigate the risk of version incompatibilities, and IIRC we decided to better break up templates into smaller pieces and to document what promises we make about compatibility between versions. IIRC this mirrors what other major apps have done.) I’d suggest not including override copies unless you need to change their behavior from the default.

@NateWr will probably also have some useful comments.

Very good stuff, @andymp, and thanks again for being such a good FOSS citizen!

Regards,
Alec Smecher
Public Knowledge Project Team

1 Like
10

I don’t have any extra comments, simply because I’m not that familiar with OJS 2.x. I’ve only been working with the 3.0b code base. Looks like you’ve done a ton of work there!

1 Like
11

I cant use this :frowning: anyone can help me to use this base for do some changes? Thanks

12

Hi @Felipe_Saldarriaga,

I hope your OJS version is 2.4.6 because I’ve only tested with it. I also hope you’ve read Alec’s remark:

So from here, I think best way to proceed is:

  1. Copy file lib > pkp > classes > template > PKPTemplateManager.inc.php from: https://github.com/relaciones-internacionales-journal/OJS-2.4.6/blob/master/lib/pkp/classes/template/PKPTemplateManager.inc.php and replace the same file on your server.
  2. Now create a new folder named “override” where your OJS is installed on your server. Create at least another folder inside this one and name it “templates” (or you can replicate the structure of this folder that’s on GitHub).
  3. Inside this new override > templates folder you can now copy any folder from the original OJS templates folder and do your changes. No need to copy all files from the folder, just the ones you want. And please remind Alec’s remark about upgrades and mantaining templates changes.
  4. If you want to add external CSS/JS files as Bootstrap, you may use this plugin GitHub - relaciones-internacionales-journal/add-CSS-JS-plugin: OJS Plugin to easily add CSS stylesheets or JS files to Head - IN DEVELOPMENT
  5. If you want to use your own CSS, take a look at: https://pkp.sfu.ca/wiki/index.php/Customizing_OJS#Stylesheet_Modifications, or you can also use previous plugin.

This are the basics steps. So go ahead with these and tell me if how it goes.

Hola Felipe,

La versión de tu OJS debe ser la 2.4.6 y lee bien lo que dice Alec sobre el problema que supone al pasar a futuras versiones de OJS. No repito la cita porque ya está arriba en inglés.

La manera de proceder, para mí, sería:

  1. Copia el archivo que te señalo de lib > pkp > classes > template > PKPTemplateManager.inc.php y reemplazalo con el que tienes en tu servidor (en la misma ruta).
  2. Crea una carpeta llamada “override” en donde tengas instalado el OJS en tu servidor. Crea dentro de ésta otra nueva que se llame “templates”. También puedes replicar la estructura de esta carpeta que está en Github.
  3. Dentro de esta nueva carpeta override > templates puedes copiar cualquier carpeta que esté en la carpeta “templates” original del OJS y hacer las modificaciones que quieras a los archivos. No es necesario que copies todos los archivos de cada carpeta, solo los que quieras cambiar.
  4. Si quieres añadir librerías de CSS/JS como Bootstrap puedes usar el plugin que te he enlazado en el punto 4 en inglés.
  5. Si quieres usar tu propia hoja de estilos CSS, échale un vistazo a: https://pkp.sfu.ca/wiki/index.php/Customizing_OJS#Stylesheet_Modifications o puedes usar el plugin anterior.

Esto sería lo básico, prueba y me dices cómo va.

Regards

2 Likes
13

Gracias, no sabía que la comunidad tenía soporte en español :slight_smile: Aplicaré esto en ésta tarde y le cuento cómo me va. Muchas gracias por la guía y por el excelente trabajo que hiciste con ésta modificación. De verdad se agradece todo los materiales que me brindas.

Regards.

15

Buenos días.

he aplicado la guía que me has dejado para seguir, lastimosamente me encuentro con éste error…

Warning: require_once(lib/pkp/classes/template/PKPTemplateManager.inc.php): failed to open stream: No such file or directory in D:\Xampp\htdocs\ojs-2.4.6\lib\pkp\includes\functions.inc.php on line 32`

Fatal error: require_once(): Failed opening required 'lib/pkp/classes/template/PKPTemplateManager.inc.php' (include_path='.;D:\Xampp\htdocs\ojs-2.4.6/classes;D:\Xampp\htdocs\ojs-2.4.6/pages;D:\Xampp\htdocs\ojs-2.4.6/lib/pkp;D:\Xampp\htdocs\ojs-2.4.6/lib/pkp/classes;D:\Xampp\htdocs\ojs-2.4.6/lib/pkp/pages;D:\Xampp\htdocs\ojs-2.4.6/lib/pkp/lib/adodb;D:\Xampp\htdocs\ojs-2.4.6/lib/pkp/lib/phputf8;D:\Xampp\htdocs\ojs-2.4.6/lib/pkp/lib/pqp/classes;D:\Xampp\htdocs\ojs-2.4.6/lib/pkp/lib/smarty;.;D:\Xampp\php\PEAR') in D:\Xampp\htdocs\ojs-2.4.6\lib\pkp\includes\functions.inc.php on line 32

¿Alguna idea de cómo solucionarlo? De antemano muchas gracias por su atención.

Regards.

16

Hola @Felipe_Saldarriaga,

Acabo de instalar en local (con Wamp, no con Xampp, pero da igual) un OJS 2.4.6 limpio. He copiado el archivo PKPTemplateManager.inc.php que te mencionaba y no me da ningún error (incluso con display_errors = on ).

Algunas cosas que se me ocurren:

  • No lo había mencionado pero primero tienes que instalar el OJS y después, cuando todo funciona, sobreescribir el archivo que te digo (PKPTemplateManager.inc.php). No sé si lo habrás hecho así.
  • Asegurate que que realmente existe este archivo en tu ordenador. La ruta debería hasta él debería ser (por lo que pone en el mensaje de error):
    D:/Xampp/htdocs/2.4.6/lib/pkp/classes/template/PKPTemplateManager.inc.php.
    Verifica que existe y que tiene contenido. Por el mensaje de error parece este problema, pero no estoy seguro.
  • También puedes probar a modificar directamente este archivo ya que apenas hay una veintena de líneas de código añadidas. Las diferencias entre el archivo original de OJS y el modificado las puedes ver aquí: Comparing pkp:ojs-stable-2_4_6...relaciones-internacionales-journal:ojs-stable-2_4_6 · pkp/pkp-lib · GitHub

Espero que te sea de ayuda. Aparte de esto, solo soy otro miembro de la comunidad, así que no es que haya soporte en español, simplemente ayudo un poco al igual que otros me ayudaron a mí :smile:. Te digo esto porque a lo mejor en inglés hay más personas que pueden echar una mano.

¡Ánimo con ello y gracias a tí por probar, continuar y modificar el trabajo que hice!

PS: @asmecher, should we translate this? Should we change to english? Is any “official” language in the forum? I didn’t find anything about this in the FAQs/Guidelines or the CoC.

1 Like
17

Dale, aplicaré las cosas que me dices y te contaré lo que ocurre. De todas maneras te vuelvo a dar las gracias por la cordialidad con la que me atiende. En serio muchas gracias.
Además de esto tengo otra pregunta, si tomo yo las carpetas que aparecen en el fork que hizo ¿hay algún problema? Me refiero a que si lo coloco en la carpeta overwrite > template ¿Puede generar algún tipo de error?

18

Hola @Felipe_Saldarriaga,

No debería darte ningún problema si coges las carpetas del fork y las colocas en override > templates.

21

@andymp
hello thank you very much for sharing this with the world

am from Algeria and i use Ojs 2.4.6 when i saw your modification i really liked it and i wanted to test it
so i did follow the instruction but i get this error from my Php_logs

[13-Oct-2015 22:25:59 Europe/Paris] PHP  14. include() C:\wamp\www\ojss\lib\pkp\lib\smarty\Smarty.class.php:1869

[13-Oct-2015 22:25:59 Europe/Paris] PHP  15. PKPTemplateManager->_smarty_include() C:\wamp\www\ojss\cache\t_compile\53e8f3d157ecbef7c672efacb8d31fb60bffc58b^%%32^32D^32D13D85%%header.tpl.php:6

[13-Oct-2015 22:26:00 Europe/Paris] PHP 16. Smarty->_smarty_include() C:\wamp\www\ojss\lib\pkp\classes\template\PKPTemplateManager.inc.php:212

[13-Oct-2015 22:26:00 Europe/Paris] PHP  17. include() C:\wamp\www\ojss\lib\pkp\lib\smarty\Smarty.class.php:1869

[13-Oct-2015 22:26:05 Europe/Paris] PHP Fatal error:  Call to a member function getLocalizedTitle() on a non-object in C:\wamp\www\ojss\cache\t_compile\53e8f3d157ecbef7c672efacb8d31fb60bffc58b^%%36^36E^36E89D0E%%header.tpl.php on line 22

[13-Oct-2015 22:26:05 Europe/Paris] PHP Stack trace:

[13-Oct-2015 22:26:05 Europe/Paris] PHP   1. {main}() C:\wamp\www\ojss\index.php:0

[13-Oct-2015 22:26:05 Europe/Paris] PHP   2. PKPApplication->execute() C:\wamp\www\ojss\index.php:64

[13-Oct-2015 22:26:05 Europe/Paris] PHP   3. Dispatcher->dispatch() C:\wamp\www\ojss\lib\pkp\classes\core\PKPApplication.inc.php:178

[13-Oct-2015 22:26:05 Europe/Paris] PHP   4. PKPPageRouter->route() C:\wamp\www\ojss\lib\pkp\classes\core\Dispatcher.inc.php:134

[13-Oct-2015 22:26:05 Europe/Paris] PHP   5. PKPRouter->_authorizeInitializeAndCallRequest() C:\wamp\www\ojss\lib\pkp\classes\core\PKPPageRouter.inc.php:220

[13-Oct-2015 22:26:05 Europe/Paris] PHP   6. call_user_func:{C:\wamp\www\ojss\lib\pkp\classes\core\PKPRouter.inc.php:362}() C:\wamp\www\ojss\lib\pkp\classes\core\PKPRouter.inc.php:362

[13-Oct-2015 22:26:06 Europe/Paris] PHP   7. IndexHandler->index() C:\wamp\www\ojss\lib\pkp\classes\core\PKPRouter.inc.php:362

[13-Oct-2015 22:26:06 Europe/Paris] PHP   8. PKPTemplateManager->display() C:\wamp\www\ojss\pages\index\IndexHandler.inc.php:109

[13-Oct-2015 22:26:06 Europe/Paris] PHP   9. PKPTemplateManager->fetch() C:\wamp\www\ojss\lib\pkp\classes\template\PKPTemplateManager.inc.php:368

[13-Oct-2015 22:26:06 Europe/Paris] PHP  10. Smarty->fetch() C:\wamp\www\ojss\lib\pkp\classes\template\PKPTemplateManager.inc.php:308

[13-Oct-2015 22:26:06 Europe/Paris] PHP  11. include() C:\wamp\www\ojss\lib\pkp\lib\smarty\Smarty.class.php:1256

[13-Oct-2015 22:26:06 Europe/Paris] PHP  12. PKPTemplateManager->_smarty_include() C:\wamp\www\ojss\cache\t_compile\53e8f3d157ecbef7c672efacb8d31fb60bffc58b^%%30^309^309A5EF8%%site.tpl.php:6

[13-Oct-2015 22:26:06 Europe/Paris] PHP  13. Smarty->_smarty_include() C:\wamp\www\ojss\lib\pkp\classes\template\PKPTemplateManager.inc.php:212

[13-Oct-2015 22:26:06 Europe/Paris] PHP  14. include()   C:\wamp\www\ojss\lib\pkp\lib\smarty\Smarty.class.php:1869

[13-Oct-2015 22:26:06 Europe/Paris] PHP  15. PKPTemplateManager->_smarty_include() C:\wamp\www\ojss\cache\t_compile\53e8f3d157ecbef7c672efacb8d31fb60bffc58b^%%32^32D^32D13D85%%header.tpl.php:6

[13-Oct-2015 22:26:06 Europe/Paris] PHP  16. Smarty->_smarty_include() C:\wamp\www\ojss\lib\pkp\classes\template\PKPTemplateManager.inc.php:212

[13-Oct-2015 22:26:06 Europe/Paris] PHP  17. include() C:\wamp\www\ojss\lib\pkp\lib\smarty\Smarty.class.php:1869

i get a blank page when i want to go to User Home so i really hope you can help me this and take a few minut to help me with this

soory for my bad english.
Hamza

22

Hi @hell_boy,

Try to change the following code on lib/pkp/templates/common/header.tpl. From line 23 to line 30:

{if $smarty.get.page == ‘index’}
<title>{$currentJournal->getLocalizedTitle()|strip_unsafe_html}</title>
{elseif $smarty.get.page == ‘admin’}
<title>{$pageTitleTranslated}</title>
{else}
<title>{$currentJournal->getLocalizedTitle()|strip_unsafe_html} | {$pageTitleTranslated}</title>
{/if}
<title>Relaciones Internacionales | {$pageTitleTranslated}</title>

Change it to simply:
<title>{$pageTitleTranslated}</title>

This should fix your problem.

Regards,
Andy

1 Like
23

Hi @andymp
Thank you for the replay
i did change that line but i get a fatal error

( ! ) FATAL ERROR: CALL TO A MEMBER FUNCTION GETLOCALIZEDTITLE() ON A NON-OBJECT IN C:\WAMP\WWW\OCS\CACHE\T_COMPILE\B6AD22E917817DF2E48560F17594975DF1DFBAC1^%%36^36E^36E89D0E%%HEADER.TPL.PHP ON LINE 227

so i opned the file with the problem i think it’s on this line 227

 <div id="header-container">				
		<div class="header-title" itemscope itemtype="http://schema.org/Organization">
			<h1 itemprop="name"><a href="<?php echo $this->_tpl_vars['baseUrl']; ?>
/index.php/" itemprop="url"><?php if ($_GET['page'] == 'admin'): ?><?php else: ?><?php echo ((is_array($_tmp=$this->_tpl_vars['currentJournal']->getLocalizedTitle())) ? $this->_run_mod_handler('strip_unsafe_html', true, $_tmp) : String::stripUnsafeHtml($_tmp)); ?>
<?php endif; ?></a></h1>

so what i did was changing that line to this

    <h1 itemprop="name"><a href="{$baseUrl}/index.php" itemprop="url"><title>{$pageTitleTranslated}</title></a></h1>

and the error is gone but pls check my website and tell me what to do with this problem
http://psows.net/test39/ojs/rel/ojs/index.php/index/user