How can I update the journal custom stylesheet after creating it?

Software Support
, , , ,
1

Hi!

In OJS (I’m now running 3.2.1.1), assume that I’ve created and uploaded a custom stylesheet (custom.css) for my journal (as described here). So far so good, my custom stylesheet is in the DB:

DB [ojs]> SELECT setting_name, setting_value FROM journal_settings WHERE journal_id = 1 AND setting_name = 'styleSheet';
+--------------+----------------------------------------------------------------------------------------------------------------------------+
| setting_name | setting_value                                                                                                              |
+--------------+----------------------------------------------------------------------------------------------------------------------------+
| styleSheet   | a:3:{s:4:"name";s:10:"custom.css";s:10:"uploadName";s:14:"styleSheet.css";s:12:"dateUploaded";s:19:"2020-02-20 01:23:45";} |
+--------------+----------------------------------------------------------------------------------------------------------------------------+

and it’s loaded in the HTML source:

<link rel="stylesheet" href="http://localhost/public/journals/1/styleSheet.css?v=3.2.1.1" type="text/css" />

It works as expected.

But, what if I want to make updates to my custom stylesheet? The admin UI only allows uploading a single custom stylesheet, and it only allows removing that single custom stylesheet, not updating it. But even if I remove it and upload a new custom stylesheet right away, the href of the stylesheet in the HTML source remains the same and therefore the browser cache will still remember and use the old custom stylesheet. There are 2 reasons for that:

  1. The name of my custom stylesheet is always styleSheet.css, regardless of the name of the custom stylesheet file I upload (although that information is saved in the DB - see above)
  2. The href of the stylesheet in the HTML source is suffixed by the vesion of the OJS I’m running (?v=3.2.1.1 in this case) and not some sort of version of the custom stylesheet I’ve uploaded (although the upload timestamp is saved in the DB - see above).

The obvious question is: is there a way to update my custom stylesheet and have the browser force the cache refresh? If not, this seems like an oversight, worthy of a github issue (BTW, I couldn’t find an existing one, but please let me know if one exists).

In the meantime, are there any other recommendations?

Many thanks!

1 Like
2

Hi @kasioumis,

I agree - forcing the cache refresh would be ideal. However, I’m not entirely sure how feasible that would be from a development/implementation perspective - I’m flagging @NateWr - to see if he has any thoughts on this. Have you tried, after uploading a revised .css file, in the Site admin settings, clearing the template cache? It’s still an extra step, I know, but that might help.

-Roger
PKP team

3

Thanks for the help @rcgillis!

Clearing the cache did not help. The href of the stylesheet in the HTML source remains the same and that’s all the browser cache cares about. So, unless I force-refresh the browser cache, the new custom stylesheet is not taken into account.

As far as I know, the most efficient way to force-refresh the browser cache of users (so that they use the new custom stylesheet) is to suffix the href of the stylesheet in the HTML source with a different version (essentially changing the href and letting the browser know it’s a new file, so don’t look in the cache).

In this specific case I describe, I think it would make sense to use a suffix other than the OJS version.

4

Hi @kasioumis, yeah can you file an issue in GitHub?

5

Sure @NateWr, here you go: Updates to a customised journal stylesheet (css file) are not reflected in the HTML source · Issue #6793 · pkp/pkp-lib · GitHub

I filed it as a bug report, but I guess a feature request could also come out of it; something like: Add option to update customised journal stylesheet instead of only removing it.

In the meantime, I understand that in OJS 3.2.1.1 the customised stylesheet is added here to the template (please correct me if I’m wrong). But where is the href constructed? Maybe we can at least temporarily hack it to force-refresh our end-users’ browsers’ cache.

1 Like
6

Thanks @NateWr for the GitHub pull request with the fix!

1 Like