Styling jats rendering of eLens plugin for OJS

[QNTNJHL]

Hello,

I’ve question concerning the rendering Jats file with the eLens Plugin.
A French academic journal contact ask to develop the graphic appearance of their journal.

The website is already online on pkp server. I see how to style the website appearance by creating a CSS stylesheet and adding it.

They want to have the same appearance on the JATS render of the articles. They are using eLens plugin to render JATS file, but as the website is already online. I can’t see how I can overpass the CSS stylesheet of the plugin to apply a particular appearance.

Have you and idea how I can do it (online) ?

thanks

[rcgillis]

Hello @QNTNJHL,

According to this post: DOCX to JATS XML converter - there is a file within the eLens Plugin that you can modify the CSS style - lens.css. You should be able to make you’re modifications there. You’ll want to track your modifications if you upgrade to the plugin, though, as that might overwrite them with a new version of the file.

Best regards,

Roger
PKP

[QNTNJHL]

Yes that what I was thinking.

But the website is already online on the pkp server, and we don’t have access to the files of the website.

They put the cart before the horse in the production…

[11AM]

Hi @QNTNJHL ,

Did you manage to style the rendered JATS files? Changes I make to lens.css don’t seem to do anything.

I’m using OJS version 3.1.1.4, and I’ve tried the following, with no success (no changes on the active website):

[OJS 3.1.2] Scaling figures/images in eLife Lens Article Viewer

I figured out a solution to this. Changing lens.css at line 300 to: .content-node.figure div .image-wrapper img { max-width: 100%; max-height: 85vh; } By setting max-width and max-height to 100% and 85% of the viewport respectively, it will scale the image down but not up.

OJS 3 Lens Reader needs a back button

Greetings @Richard_Pilbery and @asmecher I have contacted with the developer and he gave me a hint how to do this in simple way (add “back” button). After some coding I propose this variant: Download the latest version of Lens viewer from here https://github.com/elifesciences/lens/releases. Needed file is lens-2.0.0.zip. There are fixes that will help to avoid eternal loading problem if xml document. Create new javascript file in the directory …/lib/lens/lensAdd.js Add this lines in i…

What am I missing? @rcgillis – any ideas?

Thanks,
Andrew

[11AM]

Update: I’ve been successful with 1 (scaling figures/images) of the 2 examples above. And for the other (the back button), the CSS seems to have loaded (according to the Chrome inspector), but there’s an error preventing the JavaScript from loading—I’ll bring that up in the appropriate thread.

It took a while for my CSS modifications to be reflected in the eLife Lens article renderings (hours to overnight—and I’ve noticed this before), and I do have questions that are relevant to this thread: why do some OJS site modifications (CSS, HTML, journal settings) work immediately (or immediately after clearing browser or data caches) but others take longer to be implemented, and what could have I done, for example, to make the eLens plugin CSS manifest immediately in my browser?

Thank you.