OJS OCS OMP OHS

You are viewing the PKP Support Forum | PKP Home Wiki



Liquid theme?

Are you responsible for making OJS work -- installing, upgrading, migrating or troubleshooting? Do you think you've found a bug? Post in this forum.

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

Forum rules
What to do if you have a technical problem with OJS:

1. Search the forum. You can do this from the Advanced Search Page or from our Google Custom Search, which will search the entire PKP site. If you are encountering an error, we especially recommend searching the forum for said error.

2. Check the FAQ to see if your question or error has already been resolved.

3. Post a question, but please, only after trying the above two solutions. If it's a workflow or usability question you should probably post to the OJS Editorial Support and Discussion subforum; if you have a development question, try the OJS Development subforum.

Liquid theme?

Postby mbria » Mon May 05, 2008 9:56 am

Hi all,

After upgrading to OJS 2.2 I notice the theme system was improved (thanks for it!!) and maybe now is the right moment to upgrade my liquid layout to something stable instead of some template and css hacks: http://psicologiasocial.uab.es/athenea/

So the question is: Is there is any liquid theme example?

If not... is "uncommon" a good theme to start my own?
Any tip to overwrite CSS widths and floats in a nice way instead of doing it at "uncommon.css" equivalent?

Thanks in advance,

m.
mbria
 
Posts: 278
Joined: Wed Dec 14, 2005 4:15 am

Re: Liquid theme?

Postby jmacgreg » Mon May 05, 2008 12:19 pm

Hi mbria,

Regarding the site style: my recommendation would be to replicate the theme structure you see in plugins/themes/uncommon (doesn't have to be uncommon -- you can choose any of those): rename all instances of 'uncommon' to eg. 'liquid' (for example, change UncommonThemePlugin.inc.php to LiquidThemePlugin.inc.php), and move your current stylesheet over. You will most likely have a bunch of fixes to do, especially for the sidebar thanks to the new Blocks system OJS uses. But for future maintenance and compatibility, this would be the easiest way to go.

One note re: OJS 2.2 and porting css over: I would suggest searching the forums as there has been discussions regarding stylesheets in general and OJS 2.1-->2.2 in particular. One that comes to mind is viewtopic.php?f=8&t=2577&p=9054&hilit=sidebar+font#p9054.

Regarding the template changes: You'll have to handle the template changes you've made (for example the font-size buttons on the topmost navbar, and associated javascript) a little differently. We've added a block structure to OJS so that new blocks are fairly easy to add; but at the moment this is only available for the sidebar(s). I'd suggest porting your changes over to 2.2's header.tpl and footer.tpl, and anywhere else you've made changes, but ensure that you document your changes for future upgrades etc., and in case we implement the block structure for headers and footers, etc.

Cheers,
James
jmacgreg
 
Posts: 4162
Joined: Tue Feb 14, 2006 10:50 am

Re: Liquid theme?

Postby asmecher » Mon May 05, 2008 12:22 pm

Hi all,

FYI, we have a developer just beginning work on a liquid layout. If possible, we'll include it in the next release of OJS. If you're able to come up with one of your own, particularly one that works with one-, two-, and three-column layouts (as configured in Setup page 5), please consider contributing it back to us.

Regards,
Alec Smecher
Public Knowledge Project Team
asmecher
 
Posts: 7710
Joined: Wed Aug 10, 2005 12:56 pm

Re: Liquid theme?

Postby mbria » Mon May 05, 2008 2:38 pm

Thanks to you both for the fast help.

I saw James' liquid test theme in my inbox just when I was finishing my tests:
http://www.comunitic.net/athenea/index.php/atheneaDigital/issue/current
I did quite the same James suggested in his post. :-)

James, thanks a lot to take time to test and thanks again to test it with my magazine original style.
I fast checked it and something is not working, but I will be back with feedback tomorrow morning (now here is 23:15 GTM+2).
Any case, with our old style we were losing 1/5 of the screen with the logo... so I will try to convince my fellows to renew it all.

Back to the issue: Overwriting CSS on a new theme plugin works quite fine... but the main problem I found is how to deal with a dynamic layout.

I mean, you can easily create a liquid layout if you know how many columns you will have in your magazine, but it's difficult to deal with "%" widths when you don't know if you will have 1, 2 o 3 column layout because as far as I found, I couldn't apply different widths on a plugin-theme to JUST overwrite the appropiate right/left/bothSidebar.css.

I didn't know if I explained myself. My English is really bad. :-(

Any case, for a 3 column layout, this is what I did (reproducing and extending "uncommon" theme):

Code: Select all
/*
 * MBR: Layout Modifications and Decoration
 */

#header {
   text-align: left;
   margin: 0;
   padding: 0;
   width: 100%;
   vertical-align: middle;
}
#headerTitle {
   text-align: left;
   margin: 0;
   padding: 0;
   width: 80%;
   line-height: 80%;
}

#header h1 {
   padding: 10px;
}

#body {
   width: 100%;
   margin: 0;
   padding: 0;
}

#footerContent {
   width: 100%;
   margin: 0;
}

#main {
   margin: 0 10px;
   width: 58%;   /* 60% overlaps */
   float: right;
}

#rightSidebar {
   float:right;
   width:20%;
}

#leftSidebar {
   float:left;
   width:20%;
}

div#content div:first-child {
   text-align: justify;
}


And after this, some aesthetics on blocks:

Code: Select all
/*
 * Blocks decoration
 */
#leftSidebar div.block, #rightSidebar div.block  {
   padding: 10px;
   border: 1px solid #006699;
   margin: 10px;
}

div#sidebarNavigation {
   background:#E6E6E6 url(/athenea/images/iconContent.jpg) no-repeat scroll right top;
}

div#sidebarNavigation span.blockTitle {
   border-bottom:2px solid #336699;
   font-size:1.1em;
   font-weight:bold;
   margin:0px 0px 5px;
   padding:0px 40px 25px 0px;
}

div#sidebarUser {
   background:#E6E6E6 url(/athenea/images/iconLogin.jpg) no-repeat scroll right top;
}

div#sidebarUser span.blockTitle {
   border-bottom:2px solid #336699;
   font-size:1.1em;
   font-weight:bold;
   margin:0px 0px 5px;
   padding:0px 40px 25px 0px;
}


I will follow working on this during a couple of days and I will send you our theme (everything we do is under GPL2) as soon as it's finished.

Cheers,

m.
mbria
 
Posts: 278
Joined: Wed Dec 14, 2005 4:15 am

Re: Liquid theme?

Postby jmacgreg » Tue May 06, 2008 11:27 am

Hi mbria,

That would be much appreciated! Many thanks.

If we can be of help in any other way, please let us know.

Cheers,
James
jmacgreg
 
Posts: 4162
Joined: Tue Feb 14, 2006 10:50 am

Re: Liquid theme?

Postby billyoglesby » Sat Jun 21, 2008 2:33 pm

Were these liquid themes posted anywhere? Is there a repository of themes available? Thanks!
billyoglesby
 
Posts: 4
Joined: Fri Feb 08, 2008 7:12 pm

Re: Liquid theme?

Postby mbria » Mon Jun 23, 2008 8:49 am

I didn't get time to work on my proposal.

I will publish it as soon as I finish, but just in case somebody else like to work further, this is what I found.

A single CSS pack wasn't enough because (for instance) at article/view pages layout was completely different.

Solution? It's easy when base code is as good as OJS :-P

Just overwrite the "activate()" method at your xxxxThemePlugin.inc.php to decide what CSS need to be loaded on each context:

This is how my atheneaThemePlugin.inc.php looks like now:

Code: Select all
<?php

/**
 * @file AtheneaThemePlugin.inc.php
 *
 * Copyright (c) 2008 Marc Bria
 * Distributed under the GNU GPL v2. For full terms see the file docs/COPYING.
 * based on the UncommonThemePlugin.css design by John Willinsky
 *
 * based on UncommonThemePlugin.css
 *
 * @package plugins.themes.uncommon
 * @class AtheneaThemePlugin
 *
 * "Athenea" theme plugin
 *
 * $Id: AtheneaThemePlugin.inc.php,v 1.0 2008/05/05 22:41:48 mbria Exp $
 */

import('classes.plugins.ThemePlugin');

class AtheneaThemePlugin extends ThemePlugin {
   /**
    * Get the name of this plugin. The name must be unique within
    * its category.
    * @return String name of plugin
    */
   function getName() {
      return 'AtheneaThemePlugin';
   }

   function getDisplayName() {
      return 'Athenea Theme';
   }

   function getDescription() {
      return 'A theme designed for Athenea Digital';
   }

   function getStylesheetFilename() {
      return 'athenea.css';
    }
   function getLocaleFilename($locale) {
      return null; // No locale data
   }
   
    // ThemePlugin.inc.php overritten function.
    function activate(&$templateMgr) {
      if (($stylesheetFilename = $this->getStylesheetFilename()) != null) {
          $path = Request::getBaseUrl() . '/' . $this->getPluginPath() . '/' . $stylesheetFilename;
          $templateMgr->addStyleSheet($path);
          $context = Request::getCompleteUrl();
          if (strpos($context,'article/view') !== FALSE) {
            $path = Request::getBaseUrl() . '/' . $this->getPluginPath() . '/' . 'articleView.css';
            $templateMgr->addStyleSheet($path);
          }
          if (strpos($context,'editor/submissions') !== FALSE) {
            $path = Request::getBaseUrl() . '/' . $this->getPluginPath() . '/' . 'editorSubmissions.css';
            $templateMgr->addStyleSheet($path);
          }
      }
    }

}

?>


As you can see, at /article/view and /editor/submissions, extra CSS are loaded, letting you play with themes in a very flexible way.

As far as I'm not an OJS developer and I don't know it's API so I'm quite sure there are a couple of ways to do it more elegant, scalable, compatible... so please, let me know if something need/could/should/must be changed. :-)

I'm unsure about this but I think there is no gallery of themes for OJS, and no liquid themes available yet.

Cheers,

m.
mbria
 
Posts: 278
Joined: Wed Dec 14, 2005 4:15 am

Re: Liquid theme?

Postby kekropas » Tue Mar 24, 2009 6:27 am

mbria wrote:Hi all,

After upgrading to OJS 2.2 I notice the theme system was improved (thanks for it!!) and maybe now is the right moment to upgrade my liquid layout to something stable instead of some template and css hacks: http://psicologiasocial.uab.es/athenea/

m.


How did you make the left sidebar solid black with pictures and links???
kekropas
 
Posts: 38
Joined: Sat Dec 20, 2008 5:56 am

Re: Liquid theme?

Postby asmecher » Tue Jun 18, 2013 3:35 pm

Hi all,

FYI, I'm gathering requirements for some theme work for the forthcoming OJS 3.0 release. If you're interested in contributing, or want to follow the discussion, please let us know or CC yourself to the following bug entry:

http://pkp.sfu.ca/bugzilla/show_bug.cgi?id=8265

The CSS structures already introduced to the OJS 3.0 codebase will make CSS work much less painful for future releases. Help us get modern theming done right!

Regards,
Alec Smecher
Public Knowledge Project Team
asmecher
 
Posts: 7710
Joined: Wed Aug 10, 2005 12:56 pm


Return to OJS Technical Support

Who is online

Users browsing this forum: No registered users and 3 guests