Theme Plugin - Bootstrap Base Theme

[CUDevMaxwell]

Hello everyone,

Just wanted to let the community know that work is progressing on a custom theme plugin for OJS that utilizes Bootstrap. http://twitter.github.com/bootstrap/index.html

The plugin changes the template folder used by Smarty. This means you can create a custom theme for a journal without affecting other journals or the admin interface.

This is still an early alpha release. In the future, this plugin will (hopefully):

-Utilize the Bootstrap jQuery plugins where possible, in place of the older js plugins (alerts for notifications, etc). Why? To provide a consistent base for further theme development.
-Be used only on hosted journals that set it as the "Journal Theme" in the Look section of journal setup. (Right now, the cache is too 'sticky'.)
-Be feature complete. (All the features of the built-in theme should "just work").
-Simplify the templates used by OJS.

In the future, this theme could be used as a starting point for other custom themes, with a framework for responsive design already in place. (Download this theme plugin, change the name, then change the templates or css as you wish, without overwriting the templates built in with OJS.)

The github repository is here:
https://github.com/CUDevMaxwell/OJS-Modern-Theme

[CUDevMaxwell]

Here's the (quite boring) base theme so far:

http://i.imgur.com/Jzqor.png

[asmecher]

Hi CUDevMaxwell,

Very interesting -- there are some risks to what you're doing, i.e. it looks like you're maintaining a complete copy of the templates; however, Bootstrap looks like a very promising project. I'll pass this around the team and see what they think. Meanwhile, have you looked at OMP? It contains a number of structures we've been pioneering for a next-generation UI. It doesn't use bootstrap but that may well be a viable addition. You might get a sense of where we're heading by looking at OMP.

Regards,
Alec Smecher
Public Knowledge Project Team

[chrstoph]

Hi Alec

is there a way to do some work on the Templates like this without losing upgradability? (i am working in the same direction).

thanks
chris

[CUDevMaxwell]

it looks like you're maintaining a complete copy of the templates

work on the Templates like this without losing upgradability

As far as I'm aware, the only way to make large-scale changes to pkp's html output is by completely overriding the templates in this way [redirecting the template directory]. This plugin will be tested against a particular minor version, but compatibility with other versions (or new versions) will depend how much much the templates change.

[asmecher]

Hi Chris/CUDevMaxwell,

The trouble with large-scale duplication of templates is that it makes upgrading very difficult. With templates that are modified in place, you can use the patch-based upgrade process to a) upgrade modified files where the changes are minor enough to permit, and b) identify areas needing manual intervention otherwise. If all the templates are duplicated/relocated to a new location, neither of those benefits are possible. Unfortunately this is a difficult problem to solve and I haven't run across a silver bullet for it; we're open to suggestions.

Regards,
Alec Smecher
Public Knowledge Project Team

[szmigieldesign]

This is amazing news! I'm really looking forward to seeing a simple way to adapt Bootstrap-based templates into OJS. It's a lovely framework to work with.

[anfemora]

I have tried to install the ZIP file, downloaded from github.com, but following message appears:
"El archivo de plugin subido no contiene una carpeta que se corresponde con el nombre del plugin"
which in english means
"The uploaded plugin file does not contain a folder that corresponds to the name of the plugin"
Do you know whre the problem can be? Thanks a lot!

[tikidream]

I've also been working on a PKP Bootstrap theme ("Bootstrappish"). Maybe we could combine our efforts? Though mine doesn't involve modifying any PKP templates but uses LESS files to remap bootstrap to fit with PKP templates. I've also got a basic "PKP Reset" LESS file to smooth over bumps in the differences between bootstrap and PKP styling. I've tested Bootstrappish on OCS and OJS and it works fairly decent.

I'll be getting it up on github later this week but it was used on the Columbia University Research Data Symposium at http://conferences.cdrs.columbia.edu/rd ... hp/rds/rds

The version on the symposium didn't utilize any of the js but more recent versions include it by having the below code in the theme plugin.

Code: Select all

/**
    * Activate the theme.
    */
   function activate(&$templateMgr) {

      // Add in jQuery from CMS
      $jQueryCMS = '   <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery.js"></script>';
      $additionalHeadData = $templateMgr->get_template_vars('additionalHeadData');
      $templateMgr->assign('additionalHeadData', $additionalHeadData."\n".$jQueryCMS);

      // Add in Bootstrap JS
      $templateMgr->addJavaScript('plugins/themes/bootstrappish/js/bootstrap.min.js');
      
      if (($stylesheetFilename = $this->getStylesheetFilename()) != null) {
         $path = Request::getBaseUrl() . '/' . $this->getPluginPath() . '/' . $stylesheetFilename;
         $templateMgr->addStyleSheet($path);
      }
   }

[WebDev]

Any updates on this? Looks great so far. Keep up the good work.

[bgarnicnig]

Also very curious about this. I've noticed activating the theme on 2.4.2, but I'm leaning towards installing 2.4.1 just to use this. If you need any help developing, I'd be excited to help out. Just let me know what I can do: bernhard@continentcontinent.cc