OJS OCS OMP OHS

You are viewing the PKP Support Forum | PKP Home Wiki



IE specific site and journal CSS?

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.

IE specific site and journal CSS?

Postby sillyKris » Mon Aug 13, 2012 8:37 am

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
 
Posts: 14
Joined: Wed May 09, 2012 10:00 am

Re: IE specific site and journal CSS?

Postby sillyKris » Mon Aug 13, 2012 9:02 am

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!
sillyKris
 
Posts: 14
Joined: Wed May 09, 2012 10:00 am

Re: IE specific site and journal CSS?

Postby JasonNugent » Tue Aug 14, 2012 6:38 am

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
JasonNugent
Site Admin
 
Posts: 894
Joined: Tue Jan 10, 2006 6:20 am

Re: IE specific site and journal CSS?

Postby sillyKris » Tue Aug 14, 2012 11:12 am

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!
sillyKris
 
Posts: 14
Joined: Wed May 09, 2012 10:00 am

Re: IE specific site and journal CSS?

Postby JasonNugent » Tue Aug 14, 2012 3:12 pm

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
JasonNugent
Site Admin
 
Posts: 894
Joined: Tue Jan 10, 2006 6:20 am

Re: IE specific site and journal CSS?

Postby sillyKris » Wed Aug 15, 2012 8:21 am

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!
sillyKris
 
Posts: 14
Joined: Wed May 09, 2012 10:00 am

Re: IE specific site and journal CSS?

Postby JasonNugent » Wed Aug 15, 2012 11:09 am

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
Site Admin
 
Posts: 894
Joined: Tue Jan 10, 2006 6:20 am

Re: IE specific site and journal CSS?

Postby JasonNugent » Wed Aug 15, 2012 11:12 am

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
JasonNugent
Site Admin
 
Posts: 894
Joined: Tue Jan 10, 2006 6:20 am

Re: IE specific site and journal CSS?

Postby sillyKris » Thu Oct 18, 2012 9:19 am

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!
sillyKris
 
Posts: 14
Joined: Wed May 09, 2012 10:00 am


Return to OJS Technical Support

Who is online

Users browsing this forum: No registered users and 5 guests