pkp / classic

An official theme for OJS 3.1.1+

Classic Theme

An official theme for OJS 3.1.1+

Current version classic v.1.1.2

This theme was developed and is maintained by the Public Knowledge Project.

Installation

The theme can be installed through Plugin Gallery in you Open Journal Systems website.

Manual installation:

1. Download the latest release.
2. Upload through the admin dashboard (Upload a New Plugin button on the Plugins page) or unpack the archives content inside plugins/themes directory starting from OJS web root.
3. Login into the OJS admin dashboard and activate the plugin on the Plugins page.
4. Enable the theme in Website Settings -> Appearence menu.

Installation from the master branch (should be used only for development):

1. git clone https://github.com/pkp/classic.git.
2. Move to the theme's root folder: cd classic.
3. Make sure that npm and Gulp are installed.
4. Resolve dependencies: npm install. Gulp config file is inside a theme root folder gulpfile.js.
5. To compile external SCSS, concatenate styles and minify: gulp sass. The result CSS path is resources/app.min.css.
6. To concatenate and minify javascript: gulp scripts and gulp compress. The result Javascript file path is resources/app.min.js. Run gulp watch to view javascript changes inside dev_js folder in real time.
7. Copy the plugin's folder to plugins/themes directory starting from the OJS installation root folder.
8. Login into the OJS admin dashboard, activate the plugin and enable the theme.

Note that the master branch can contain a code that will not be shipped to the stable release.

Version Compatibility

• Classic theme version 1.0.0 was tested and compatible with OJS 3.1.1-2.
• Classic theme version 1.0.1 is compatible with OJS 3.1.2.
• Classic theme version 1.0.2 is compatible with OJS 3.1.2-1.
• Classic theme version 1.0.3 is compatible with OJS 3.2.0.
• Classic theme version 1.0.4 is compatible with OJS 3.2.0 and 3.2.1.
• Classic theme version 1.1.0 is compatible with OJS 3.3.0.
• Classic theme version 1.1.1 is compatible with OJS 3.3.0.
• Classic theme version 1.1.2 is compatible with OJS 3.4.0.

Contributors

Classic theme was designed and developed by Sophy Ouch (@sssoz), Vitalii Bezsheiko (@Vitaliy-1), John Willinsky, and Kevin Stranack.

Troubleshooting

For technical question regarding the theme (bugs, enhancements, etc.), please open an issue on the plugin's GitHub page. For non-technical question or you are uncertain about the question's category please visit the PKP Forum. Before opening and issue or posting a question on forum please make sure that it wasn't solved before.

Settings

Theme Colour | This theme allows the personalisation of the theme’s main colour. The default colour is a sunflower yellow. If you wish to select your own palette (in Settings > Website), and for best readability, we recommend selecting a tone that provides a good contrast against the black text and borders.

Navigation Menu | For the best user experience, we recommend limiting the number of items in your navigation menus. Research shows that users struggle to find what they are looking for in long lists.

Logo Image | This is the image that contains the journal title. If you do not have a logo, the theme will display your journal’s name instead. Logo images should be:

• JPG for photographs or PNG for design marks
• Of a larger width than height
• Transparent background

Home Page Image | This theme does not accommodate home page images.

Home Page Additional Content | Adding content here can often disrupt the clean design of this theme. Ask yourself if this content would be better placed in a custom page with a link from the primary navigation menu instead.

Page Footer | We recommend keeping the Page Footer short, limited to your journal identification details, such as journal title and mailing address, as well as any required copyright or affiliation statements.

Issue Cover Image | Issue cover images should be:

• JPG for photographs or PNG for illustrations without photographs
• Size: 210x315 pixels
• Of a larger height than width
• Used consistently - either give all issues an image or none

Article Image | Article cover images should be:

• JPG for photographs or PNG for illustrations without photographs
• Size: 210x315 pixels
• Used consistently - either give all articles an image or none

Custom Blocks | This theme places custom blocks in the footer. We recommend minimizing the use of custom blocks to present a cleaner, more professional look. Wherever possible, consider placing what might have gone into a custom block into a custom page, and link to it from the primary navigation menu.

Journal Thumbnail | Journal thumbnail images will only appear on a multi-journal OJS installation, on the list of all journals on the site. The image should be:

• JPG for photographs or PNG for illustrations without photographs
• Of a larger width than height
• 160px x 320px pixels in dimension

Galleys | If there isn’t any CSS file attached to the HTML galley, the default theme’s style will be used

License

This theme is released under the GPL license.

The Cardo and Montserrat fonts are distributed under the terms of the Open Font License.

classic's Issues

Update path to galleys to support upload from old article versions

See: pkp/pkp-lib#5560

Consider possibility including article cover image to the issue TOC

Article summary template doesn't include article cover image like other themes. It's a common request from users to expose them in issue_toc. This template also is included in the catalogCategory and search pages. I think for the latter it should be avoided.

Obfuscating email addresses

See: pkp/pkp-lib#5947

Issue galleys could be styled better

The issue galleys don't appear to have any styles or layout applied. They're not used that often, I think, but just reporting in case you want to support them.

Fatal error on Browse Authors page

Uncaught Error: Call to undefined method Author::getLastName()

Author class methods should be updated accordingly to the latest OJS release.

Mising string in Classic on OJS 3.2.

Describe the bug
##manager.setup.journalSummary## is not defined in en_ES with Classic theme.

To Reproduce
Steps to reproduce the behavior:

1. Enable Classic theme.
2. Go to Appearance.
3. Scroll down.
4. See error

Expected behavior
A translated string.

Screenshots

Desktop (please complete the following information):

• OS: Alpine
• Browser: Firefox.
• Version: Dockerized OJS 3.2 over apache + php 7.3

Additional context
It works fine in other langs (ie: es_ES).

Nate comment this on Slack "Looks like this was renamed manager.setup.contextSummary".

Themes shown when installed, even if they are not enabled

Describe the bug
Themes are available in Appearance to be activated just when they are installed.
This is wrong because themes should be enabled first at journal level.

To Reproduce
Steps to reproduce the behavior:

1. Setup a clean OJS 3.2 installation.
2. Go to Settings > Website > Plugins > Plugin Gallery
3. Click on any theme (ie: Classic) to install it.
4. You will be redirected to Appearance
5. Classic will be shown in the dropdown.

Expected behavior
As said, installing is not enough to show to allow you activate the theme.
Themes should be enabled first at journal level to be shown in this list... otherwise we will show and let journal managers use a theme that we still don't want them to use.

Desktop (please complete the following information):

• OS: Ubuntu 19.10
• Browser Firefox
• Version: Dockerized OJS 3.2 (over alpine-apache-php73)

Article page: ORCID image inherits link styling

See: https://forum.pkp.sfu.ca/t/classic-theme-avoid-orcid-icon-to-be-underlined-and-stick-to-the-the-authors-name/58168

Child theme not fetching parent theme templates

Hi

I was working in a child theme from the Classic Theme, but apparently the child one was not fetching the 'templates" from its parent.
I had to copy the whole templates folder to make it work. Does this theme have some restriction to child themes?

Now with this folder the CSS is fetch from the parent theme folder without any issue.

Cheers

Empty page when Classic theme activated

Hi there!

I have been able to install and activate the Classic theme 1.0.0-2 in OJS 3.1.2, but it gives a completely blank page when the website is loaded.

I've tried also to install the 1.0.0 version of the theme, but it cracks the complete system.

What I am doing wrong?

Any help appreciated, many thanks.

Bio of principal contact author displayed for all authors

To view an author's bio, on the article page you can click "More info" and then "Bio" below each author's name. However, when there is more than one author for an article and each author has a different bio, the first author's bio is shown for every author. See as an example https://demo.publicknowledgeproject.org/ojs3/demo/index.php/classic/article/view/818

I tested this on 2 sites using the Classic theme. It does not occur on a site using the same version of OJS and the Bootstrap theme, so I think it's a theme issue.

Recommend by Author Plugin template produces fatal error

The template that overrides original one requires update

Unordered list is numbered if is nested inside ordered one

Moved from https://github.com/Vitaliy-1/classic/issues/54

Original message:

Can be corrected with something like:
ul > li:before { content: unset }

Change the color of section titles to dark grey

Moved from https://github.com/Vitaliy-1/classic/issues/60

@sssoz Can you specify this one. Section title color is @warm-grey (#757575) and issue title @gunmetal (#4d6066). Should these 2 elements be in one color?

Only use <h1> for the logo on the homepage

Regarding the header.tpl template file, @NateWr commented:

<h1> should only be used on the logo for the homepage. You can see some additional logic we use for that in the default theme here:

https://github.com/pkp/pkp-lib/blob/master/templates/frontend/components/header.tpl#L41-L45

For other pages, the <h1> should usually attach to the primary heading for the page itself. So for example on the Editorial Team page it should be on the "Editorial Team" title. On an article landing page, on the article title, and so on.

Also, it's possible for the journal logo to include alt text. It's not being added here but you can see it added in the default template here:

https://github.com/pkp/pkp-lib/blob/master/templates/frontend/components/header.tpl#L55

If there is no alt text, giving the logo an <h1> will lead to an empty heading tag, which will be a SEO and accessibility issue, so we usually fall back to the journal name on the homepage.

cc @Vitaliy-1 on this comment as well. We should probably audit each of our themes to ensure the h1 and alt text is applied properly. Happy to review code if there are any questions.

Consider using truncate Smarty function

There are several places where a text is limited by symbol count, e.g.: https://github.com/pkp/classic/blob/master/templates/frontend/objects/issue_toc.tpl#L54

Consider using truncate instead of substr as a more native Smarty way

TOC: Uniformise spacing between article title and authors

Display journal summary on homepage

Adjust text styles

• Improving readability:
  • Line lengths (measure: >65 characters / line)
  • Line heights (leading)
  • Font size (consistent, and relative units, rem, based on body’s font-size instead of px)
• Improving legibility on all viewports & browsers:
  • Type colour (should it be a nuanced black?)
  • Anti-aliasing
  • Letter-spacing

Overriding html article css + child theme issue

We have a large number of html files that span across many years. We have a stylesheet that works pretty well with ojs2 and were hoping to integrate some of those styles into the ojs3 classic theme article view.

I see on this line that a css file is dynamically injected:

https://github.com/pkp/classic/blob/master/templates/plugins/generic/htmlArticleGalley/display.tpl#L50

linkElement.href = "{/literal}{$themePath|escape:"javascript"}{literal}/templates/plugins/generic/htmlArticleGalley/css/default.css";

I've been told that a child theme would be the best way to integrate our changes. I would think that, according to that line of code, I could just have my own /templates/plugins/generic/htmlArticleGalley/css/default.css in the child theme it would just work.

However, it would seem to me that if I didn't have that file, then it would not magically pick up the parent theme's version of that file.

If there are many files included this way, then all of those resources must be copied and synchronized to the child theme. It would seem to me that there should be some mechanism to get a file that travels back through each parent until it finds it.

I'm hoping someone can give some guidance with this issue.

Thanks in advance.

-Brian

Typo in searchAuthorDetails template

Curly bracket instead of round after $smarty.const.ARTICLE_ACCESS_OPEN

issue variable returns null on journal index and issue page

This check seems to be not enough for some reason: https://github.com/pkp/classic/blob/master/ClassicThemePlugin.inc.php#L154

Related topic: https://forum.pkp.sfu.ca/t/blank-page-after-installing-classic-theme/49828

Article page without abstract block or with short abstract block

This issue was moved from the original repo at https://github.com/Vitaliy-1/classic/issues/8.

The previous discussion is below:

Make sure all text is readable when using black as primary colour

In particular, tagit results:

...primary menu items are also not visible on hover for of the same reason (tested with #8fd427)

No linking back to issue ToC from an article summary page

When on an article summary page, there is no link to go to the issue ToC (of which the artile is part of). Perhaps the volume, number text line at the top of the article summary page should be linked to the issue.

a11y: Test colour contrasts

...test out as many different colours of varying luminance and brightness to make sure everything is still readable, no matter what users select as primary colours.

Wrong homeUrl in header template when logged in as author

See: pkp/pkp-lib#5813

Consider limiting a number of customizable colors

The site index’s journal loop does not work

See this fix from the default theme: pkp/ojs@f4cf12c.

The count($journals) in the site-wide index template didn't work. So you'll want to update your templates to use $journals->wasEmpty().

Also, the pagination can be removed because all journals are delivered to the template. There's no second page.

Reviewing interests "tagit" results not styled properly on registration

Moved from https://github.com/Vitaliy-1/classic/issues/55

Check the registration page from the multi-journal site

Moved from https://github.com/Vitaliy-1/classic/issues/27

Improve theme description

Can we improve the theme description in the locale files?

https://github.com/pkp/classic/blob/master/locale/en_US/locale.xml#L7

This is the description that people will see when browsing the list of themes in the plugin gallery, so something to distinguish this from other themes will be good. 👍

Escape raw citations on article page

see: pkp/pkp-lib#5623

Issue TOC: consider change the look for buttons under article title

Decrease size of buttons; same space between title, authors, and buttons

The edit link on about pages is not very clear

Registration form does not retain reviewer interests on form submit

See: pkp/healthSciences#173

Add copyright information to locale files

The locale files don't have any information on copyright and license yet, this should be added.

Title of static pages isn't centered

See: https://forum.pkp.sfu.ca/t/classic-theme-align-page-titles-on-the-left/58453

Avoid logo yellow highlight when hovered

Hi there,
I hope this could result useful also to others using the Classic theme (I am currently using the latest 1.02 on ojs 3.1.2-4).
I have noticed a strange behavior of the website on the logo when I decide to use a image as a logo in substitution to plain text. I know that it is generally suggested to prefer the text, for the mobile version of the website, but somehow I really need to upload an image because it is one of the elements which most give the “identity” of the journal. I will try to upload an image as a logo which could fit in any device.
So, the strange behavior is that when I pass with the mouse over the logo-image, it gets a yellow stripe on it, as if it was a normal link. I attach hereby a screenshot which shows the situation I am trying to describe. I have tried to “detect” the css code which regulates this behavior, but, if I am not wrong, it relies also on all the links. So if I delete if for the logo, it will also affect the normal style behavior of all links, which is something I would like to avoid. In any case, this would be the relevant code if I am not wrong, in the css:

a:hover, a:active, a:focus {
color: #000;
text-decoration: none;
background-color: #ffd120;
}

Does somebody know how could I overcome this problem, avoiding the yellow strip to show up if I use a logo as an image and when I try to go over it with the mouse?
I would be really helpful to anyone willing to the help me on this.
Best regards
Leonardo

Link in the forum: https://forum.pkp.sfu.ca/t/classic-theme-avoid-logo-yellow-highlight-when-hovered/57843/4

Search form: GET instead of POST

See: pkp/ojs#2437

Update to Gulp 4

• signal task completion: https://stackoverflow.com/questions/36897877/gulp-error-the-following-tasks-did-not-complete-did-you-forget-to-signal-async
• Series + Parallel, e.g., for watch task

Announcements are missing from the homepage

It seems that active announcements are missing from the homepage. Even though the setting "Display ___ of the most recent announcements on the journal homepage" is enabled in Settings > Website > Announcements, the announcements block is still missing. In comparison, the Manuscript Theme does display it.

Is this omission by design or a bug? Can it be added/fixed?
(We are using Classic Theme version 1.0.1)
Thanks.

Article page: first keyword is capitalized

Keywords can be phrases, this leads to the capitalization of every word in a phrase.

typo in objects/article_details.tpl

line 207 has one double quote too many - probably should be corrected

Variable publication is not defined in article_summary template

See: pkp/immersion#44

Display homepage image

Right now it's not implemented for the Classic theme. @sssoz do you think it's worth to add it?

Author name and surname are missing on the author details page

Check variables that are assigned to the template

Extra comma in the issue title when volume not set to display

When setting issue title to not show the "volume" info, there will be a comma as a first character showing up in the issue title.
To reproduce this issue:

Issues > Back Issues > Edit issue > Issue Data > uncheck "Volume"

Accessibility: Skip to navigation/main conent

Hi. I wonder if the "Skip to ..." accessibility feature can be added to the Classic theme. Perhaps you can just copy it from the Manuscript OJS Theme, which implemented quite nicely. When the users tab on the page, they gets these 3 options (this is how the code looks like, without accompanying CSS):

Skip to main content Skip to main navigation menu Skip to site footer

Thanks.

Announcements on the home page

Right now this feature is not supported. Considering adding announcement list on the index journal page.