OJS 3: Need help with theme customization

Software Support
,
21

Greetings,

Many Thanks. That helped.

22

After testing child theme I can say that customizing less files is fairly easy. In addition they have big functionality. Not doing much I can now completely change look of the journal pages.

Recommend to everyone :slight_smile:

One more question. How can I look at the changes I made in my child theme without restarting it. For now I see them only when changing to another theme and then go back to child.

3 Likes
23

Hi all, it is interesting discussion. Actually, most of what you discussed are big question for me because I know nothing about web programming. I just follow your posts and hardly think to understand. I am a journal editor, currently run OJS 2. I fall in love with OJS3 and want to use it as my journal. I have installed Boostrap and child theme in my OJS 3. When I activated child theme (I download https://github.com/NateWr/default-child), it seems the layout back to default theme. I searched the sample child theme, it looks great. Is there other ready-use child theme for OJS 3? or at least, documentation on how to customize it.

24

Good day,

Some basic programming skills are required.

  • Files with .less extension are simply to modify. They are like css but better :slight_smile:

  • Files with extension .tpl are smarty templates. Somewhat between php and html. Don`t know much about them for know.

So you can simply read corresponding guidelines. There are a lot of them in the internet. I`m too not a programmer.

25

For changes to the template files, you can go to Administration > Clear Template Cache.

The compiled CSS files are a bit more annoying. You can delete them from /cache in your OJS directory. I find the following command useful for quickly clearing cached templates and CSS while developing:

cd cache
rm -r *.php *.css HTML t_compile/*.php

One of the things I want to do is write a little developer plugin that forces CSS to be recompiled every time. That would make development a little bit easier. :slight_smile:

Not at the moment, though this is definitely planned. At the recent PKP sprint work was started on a few more child themes. Follow the PKP blog for more i nformation about this.

As @Vitaliy said, customizing the themes does require some basic programming skills. But we hope to encourage the community to build and share custom themes so that in time non-programmers have a variety of options to work with.

1 Like
26

When I switch to the Bootstrap theme, everything looks great except that my logo image is very tiny. The .less files generally seem pretty straightforward, but I canā€™t figure out whatā€™s happening with that image.
Iā€™ll keep poking around, but if Iā€™m missing something basic Iā€™d love to know about it :grin:
Thanks!

27

Hi @BBourne
I have asked this issue. The reply can be read through the link

1 Like
28

Thank you, @kawahyu!

1 Like
29

Hi @NateWr and all,

Thanks so much for your comments and explanations on this thread so far.

Iā€™m a medical student and a programmerish, and a research body I work for would like to set up a new academic journal using OJS3.

I have successfully installed a bare-bones OJS3 on my server, and have added the bootstrap3 theme (thank you for working on this!!!). Separately, I have added a sample child theme baed on your instructions at https://github.com/NateWr/default-child. Both of these render fine on my journalā€™s site.

Now Iā€™m trying to make a new child theme based on bootstrap3 rather than on the default theme, as it is my hope that bootstrap3 will continue to be updated, and I want to make sure my customisations wonā€™t all be broken with every update. However, I simply cannot work out how to do this. Everything I try gives me the same: a totally unstyled page, with just raw html and those typical bright blue links etc.

I have tried:

  • Switching line 17 of DefaultChildThemePlugin.inc.php
    from class DefaultChildThemePlugin extends ThemePlugin {
    to class DefaultChildThemePlugin extends BootstrapThreeThemePlugin {

  • Adding the bootstrap and jquery files to my child theme explicitly, e.g. $this->addStyle(ā€˜bootstrapā€™, ā€˜styles/bootstrap.lessā€™); and so on (although I understand that all these things should be inherited from BootstrapThreeThemePlugin)

  • ā€¦and more.

I have managed to hack on a new theme option to bootstrap3, which renders correctly, but in order to customise this very much I will have to start editing the template files in bootstrap3/templates, which obviously I do not want to do (although I have tried this and obviously am able to customise my hacked-on theme in this way).

My code for the hacked on extra theme option is on branch nsamr-theme of GitHub - DeckOfPandas/bootstrap3: A community-built theme for OJS 3.0 that implements Bootstrap 3 components., forked from GitHub - NateWr/bootstrap3: A community-built theme for OJS 3 that implements Bootstrap 3 components. today, and is running live at http://www.journal.nsamr.ac.uk.gridhosted.co.uk/ojs/index.php/jnsamr/index (horrible dev linkā€¦sorry). The page will look familiar as Iā€™ve just used the styling for Flatly at the momentā€¦

If you could help me at all with this Iā€™d be very grateful. Itā€™s likely Iā€™ve just misunderstood something, in which case I apologise for the length of this post!

Iā€™m a super keen member of the Open Source software community in health tech, and will of course keep on working in the Open. Iā€™d love to contribute back to bootstrap3/OJS3 when I get more familiar with it all :slight_smile:

Helen

30

@deckofpandas I can reply in more detail tomorrow, but a quick note: it sounds like your CSS code is not getting generated. This happens when the LESS canā€™t compile. Check your apache error log to see if you have an error mentioning the LESS Parser. The error message should point to the particular LESS code thatā€™s causing a problem.

31

@deckofpandas Are you able to share the code for the child theme youā€™re having trouble with? If you can create a repo for that on GitHub, I can check it out and run through it to see where there might be mistakes.

Offhand, I can tell you that you donā€™t need to change DefaultChildThemePlugin extends ThemePlugin to DefaultChildThemePlugin extends BootstrapThreeThemePlugin. In fact, every theme, child theme or otherwise, should extend ThemePlugin.

Instead, you should probably adjust the class name to something like NsamrThemePlugin extends ThemePlugin. Then where you see $this->setParent('defaultthemeplugin');, you should use $this->setParent('bootstrapthreethemeplugin');.

And then generally change instances of default child to nsamr. That way the theme yiou create is unique to you.

If you share the code for the child theme, it might be easier for me to take a quick look and see where else youā€™re going wrong.

1 Like
32

Setting $this->setParent(); to ā€˜bootstrapthreethemepluginā€™ wasnā€™t that obvious. Now itā€™s clear that this should match the lowercase name of the parent themeā€™s class.

Thank you very much for this detail, it would be great if you could include it in the readme on git.
Have a good one!

33

Yeah thatā€™s a little awkward. Weā€™ve been working on a theming guide that should cover details like this in an easier, step-by-step fashion. Weā€™re hoping to release it alongside OJS 3.0.2 in the coming months (the docs cover some new Theme API features that will go into 3.0.2).

1 Like
34

@NateWr,

It was more than 6 months ago I modified the theme and made JS based slideshow (Camera) to work. The J scripts are loaded in footer. I forgot how and where I load the scripts. Could you help me remember which file I need to modify to include JS? Thanks!

35

You know what? Just found it. It is DefaultChildThemePlugin.inc.php with this modification.

public function init() {
	$this->setParent('defaultthemeplugin');
	$this->modifyStyle('stylesheet', array('addLess' => array('styles/remove-borders.less')));
	$this->addStyle('slidestyle', 'slide/css/camera.css');
	$this->addScript('slidermobile', 'slide/scripts/jquery.mobile.customized.min.js');				
	$this->addScript('slidereasing', 'slide/scripts/jquery.easing.1.3.js');		
	$this->addScript('slidestart', 'slide/scripts/startcamera.js');
	$this->addScript('slidermain', 'slide/scripts/camera.min.js');	
}
1 Like
36

Hi all,
I just found very beautiful premium ojs 3 theme but the price is unreachable, here the link Demo Journal A
Is any way how to modify the default theme or even create a new one to be like that theme?

Thanks in advance

37

Hi @eddhie,

Have you run into the Bootstrap theme for OJS 3.0? See https://pkp.sfu.ca/2016/09/02/bootstrap-theme-for-ojs-3/ for details. This should be easy to customize if youā€™re familiar with Bootstrap. Itā€™s free & open source.

Regards,
Alec Smecher
Public Knowledge Project Team

38

Hi everyone!

I am trying to create a child theme of the bootstrap3 theme based on the instructions in this thread. I donā€™t know why, but it seems like parts of the stylesheets donā€™t load correctly. Hereā€™s a screenshot:

Iā€™d really appreciate any help! :slight_smile:

39

Hmm, I just noticed that this only happens on the homepage. All the other pages work fine.
The error log reveals that there is indeed a css file that canā€™t be loadedā€¦

40

Hi @zathoum,

Check your PHP error log for details.

Regards,
Alec Smecher
Public Knowledge Project Team