IE specific site and journal CSS?

[sillyKris]

Hello all,

I've been making extensive modifications to OJS at our site, http://smithsonianrex.si.edu . I'm starting to go through and check browser compatibility and, surprise surprise, Internet Explorer needs a few fixes.

I created an IE specific stylesheet for the site and added it directly to the lib/pkp/templates/common/header.tpl, but now I need to add a different IE specific stylesheet for the journal. I see this is accomplished in the template by the following code:

Code: Select all

   {foreach from=$stylesheets item=cssUrl}
      <link rel="stylesheet" href="{$cssUrl}" type="text/css" />
   {/foreach}


But I'm not sure how to perform the same action with externally applied code. The best I can think of is duplicating the header.tpl, renaming it something like headerJournal.tpl, and changing the call links in all the associated pages.. which seems incredibly tedious and ungainly.

I would be very grateful to any folks who might have a better (and hopefully more elegant!) suggestion!

[sillyKris]

After getting another cup of coffee, the following solution popped up-- if I can find some variable that is only called for the home page (or journal page), then I can create an If/Then statement that can serve up the appropriate conditional css file.

To test this, I changed my original IE conditional statement in the header.tpl

Code: Select all

<!-- 2012-8-2 KJ added the following 6 lines because IE is retarded -->
<!--[if lte IE 7]>
   <link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
   <link rel="stylesheet" type="text/css" href="{$baseUrl}/public/ie-site.css">
<![endif]-->

to the following

Code: Select all

<!-- 2012-8-2 KJ added the following 6 lines because IE is retarded -->
<!--[if lte IE 7]>
   <link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
{if $journalDescription}<link type="text/css" href="{$baseUrl}/public/ie-journal.css">
{else}
   <link rel="stylesheet" type="text/css" href="{$baseUrl}/public/ie-site.css">{/if}
<![endif]-->

The If/Else tests to see if the variable $journalDescription has been accessed, which should only happen for the journal page.

It occurred to me that it might be easier to find statements inherent to the site.tpl, instead of journal.tpl, and to reverse the If/Then statement.. I'm searching for one now, but if anyone has a suggestion (or a more elegant solution), I'd be eager to see it.

Thanks again!

[JasonNugent]

Hi Kris,

OJS' page handler for index requests splits up the pages based on whether or not you have either a journal present in context or not. In the former case, the template that gets served is index/journal.tpl. In the latter, it is index/site.tpl. If you look at pages/index/IndexHandler.inc.php you will see the if statement that does this in the index() method. You can either create your own smarty variable and assign it with the $templateMgr object, or else look for the $journals object in the template, which will only exist on site requests (since OJS uses it to display a list of the hosted journals).

Regards,
Jason

[sillyKris]

Hi Jason,

*Edit* Drat,I spoke too quickly...

Jason, I did try basing the if/else statement on $site and $journal requests, but it doesn't seem to serve the proper .css file (it'll just display whichever .css file I set to the else statement). It seemed I was only successful when I chose Smarty objects that were evident in the site.tpl or journal.tpl files themselves. Is there some step I'm missing that will allow me to simply use $journal?

I've been familiarizing myself with Smarty, but I'm still not entirely confident in creating my own variables.Where would I create the variable-- in the IndexHandler.inc.php file? Can I then just call it in the header.tpl, like $journalDescription is called?

Thanks so much for your help!

[JasonNugent]

Hi Kris,

Yes, you'd create them in the IndexHandler.inc.php script, in the index() method. There are calls to $templateMgr->assign() in there that you can use as a guide. The first parameter is the name of your variable and the second is its value. You can then just reference it in your template using $variable.

The reason why you can't use $journal is because it isn't assigned to a template variable in the IndexHandler. That's why I suggested using $journals, since that will only exist in site.tpl.

Code: Select all

{if $journals}
 do your site only thing
{/if}


Regards,
Jason

[sillyKris]

Hi Jason,

Ah! I tried it with $journals as well, and for some reason it wouldn't register.

However, I did as you suggested and added a variable into the IndexHandler.inc.php.

Code: Select all

      if ($journal) {
/* 2012-8-15 KJ added the following line to provide for conditional IE css */
$templateMgr->assign('journalCSS', true);
... }

By changing my conditional statement in the header.tpl to the following,

Code: Select all

<!--[if lte IE 7]>
   <link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
{if $journalCSS}<link type="text/css" href="{$baseUrl}/public/ie-journal.css">
{else}
   <link rel="stylesheet" type="text/css" href="{$baseUrl}/public/ie-site.css">{/if}
<![endif]-->

it seems to be properly serving the main page and the first journal page.. but when I try to access any of the secondary links (for instance, About from the site home page, or Archives from the journal page), I encounter two strange problems. First, the page will flash up for a second and then redirect to a 404 page in IE 7. Second, it seems to revert back to the ie-site.css in IE 6.

Do you have any idea what might be causing that? I have no idea why IE 7 sends me to a 404 page, though it seems I'm ]not the only one experiencing this problem (http://pkp.sfu.ca/support/forum/viewtopic.php?f=8&t=8880). And since all pages go through the IndexHandler.inc.php, all subsequent journal pages should be processed like the initial journal pages.. So why aren't Archive, or Issue view, or any other secondary pages picking this up?

Again, thank you so, so much for your help! OJS is wonderfully customizable-- but not very straightforwardly so!

[JasonNugent]

Hi Kris,

Actually, not all pages get routed through the IndexHandler in the index/ directory. You can get a clue about which handler is used based on what page is referenced in the URL. So, things like ojs/index/op get routed to the op function in whatever handler the index.php file says to use for that operation in the pages/index directory. Once you're looking at an ojs/journal or an ojs/issue URL, you're now dealing with the handlers defined in the pages/journal or pages/issue directories. The pages/index directory *only* serves up requests for either the top level Site or the top level list of Journals. Once you are more granular, you're dealing with other handlers.

This is why it's probably a good idea to see if you can use existing template variables that are already present, instead of adding new ones, because if they have to go in higher up you end up adding them in a bunch of places.

I'm not sure about the 404 (I didn't really investigate), but you might want to make sure that your CSS link is valid from other directories. Any 404 errors in your Apache log?

Regards,
Jason

[JasonNugent]

One other thing. I mention this only since you're already tinkering with things If you want to define a variable in all of your templates, no matter what it is, you can look at the lib/pkp/classes/PKPTemplateManager class. You can see a stack of calls to assign() in the constructor. You *can* put things there, and they will be available everywhere, but just be really careful about generic names since things may get clobbered. And usually with approaches that heavy handed, there is probably a better way.

Regards
Jason

[sillyKris]

Ah-hah! A solution that gets around all of this! By adding <IE> conditional CSS classes to the HTML tag, as demonstrated at http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/, you can avoid the whole mess! You just modify the appropriate CSS elements in your Site or Journal stylesheets by using .ie/ie-7/etc class labels to the tweaks you want made. Brilliant!