Academic Free Theme Tutorial

Latest version 2.0

Thank You
We are the team on openjournaltheme.com would like to say thank you so much for you to use
this theme. It took us for about 3 month to create this theme. One of our hope is to make any
OJS site become more cheap but professional. Our team strive to quality by bring this theme
but we always need more suggestion or any respond anything about this theme.

Did you know ?

Your OJS site template will have an impact on the credibility and quality of your online
journal. For writers, themes that look attractive will attract them to participate in your journal
and for your readers it will increase the literacy of your journal.

We provide the premium version of this theme with more style option and more theme option.
Be sure to check it out

The Theme Package

The package in this theme consist some files :
- The theme itself named theme.zip
- Manual.txt for link to this online manual documentation
- Preview Images
- OtherFiles
- PSD Files
- Database example file (optional for developers)
Installation

Here are the installation step of Academic Free theme :

1. Upload this theme to your OJS host into the your_ojs_sites/plugins/themes folder
2. Extract the academic_free.zip to the folder above
3. Activate the theme via OJS Control Panel by go to the menu Settings -> Website and
click the Plugins tab as shown below :

4. Find the Theme Plugins section below of that Plugins tab, then click the checkbox to
activate the theme (Academic Free Theme) :

5. Click Appearance tab find Theme Section as shown below :

After you choose the Academic Pro Theme or Academic Free Theme based on latest
version please click Save button.

Installation failed for OJS 3.1.2 in windows !

If you install this theme in windows environment you may encounter error . This is not
because of the theme. This problem specifically causes by OJS 3.1.2 theme.

Our developer already sent the report to the OJS developer as seen on this link :
https://github.com/pkp/pkp-lib/issues/4600

Unfortunately the OJS developer team never release the fixed version for OJS 3.1.2.

How to solve this error ?

1. Create one file named : Plugin.inc.php
2. Copy paste the content of the file with this content url :
https://raw.githubusercontent.com/pkp/pkp-lib/master/classes/plugins/Plugin.inc.php
3. Place the file to folder yourOJSInstallation/pkp/lib/classes/
4. Clear data and template cache on OJS Admin and your browser cache.
5. Refresh the browser
You must refresh the page to get the theme style option as seen below
[not available in free version] :
How to Update

We would update both the academic free and academic pro (priority) theme. Noted that we
may not know what the problem and improvement for this theme. If you find one please send
us email immediately on openjournaltheme@gmail.com so we can fix it and release the
updated version.

We would send you an email for updated version. To update this theme it is very easy. You
need to download the theme from the link we send you in your email and replace (delete the
previous one) the theme file with the updated version ones. To replace the file you need to
access your FTP or your web panel such as cpanel. Please contact your web administrator if
you need help to replace the files.
Anatomy of Theme

Before we begin this tutorial lets we must know the anatomy of the sites, here the preview :
Detail section of theme
The theme is divided into some section as numbered on the image preview :
1. Journal Logo
2. About Journal
3. Journal Thumbnail
4. Journal Summary
5. Custom Sidebar - Flyer
6. Announcements
7. Custom Sidebar - Editorial Team
8. Current Issue
9. Custom Sidebar - Site Link
10. Journal Logo Bottom
11. Journal Footer

The documentation is organized based by the section above and provided with guidance to
manage every aspects of those section.

Before we begin remember that this pointer :

1. Make sure you already logged in the OJS backend as Site Wide Administrator or as
specific Journal Manager
2. Any change you made on any section, don't forget to click Save and refresh your
browser to see the effect (on some browser it need to clear the cache)

1. Journal Logo
The first section of this template called journal logo to change the logo of the journal we need
to change in on the backend dashboard of OJS and must be accessed by site wide
administrator or journal manager level.

How to change the logo :

1. Click the journal, make sure you edit the right journal
2. Hover on Settings menu on the left side, then click Website on the hover option
3. You would be provided with many tab, by default it would activate the Appearance tab.

4. As you can see you can change the Logo of this section by the new logo
5. Tips : You can use our PSD (included with this theme) to make sure that the best image
resolution for this journal logo.
2. About Journal

To edit the about journal section, please hover the Settings menu then click Journal , page will
show some of the tabs (as shown on above image). Default tab is Masthead

In this tab, you can see that there section or textbox titled as About Journal as the image
shown below :

There you can edit the content of the textbox to change About Journal Section.

3. Journal Thumbnail
Let go back on the Settings -> Website option, where Appearance tab is activated (as
explained on the first section).

On there it must shown the Journal Thumbnail section as image below :

You can change the journal cover by uploading the new file, by clicking this button

and would make a new pop up

Browse your file by clicking the Upload File button then click OK.

Tips :
1. The size of image is not a problem for this theme, but the right size would make your ojs
site load faster.
2. Please enter the text box Alternate text to help search engine crawl your page.
4. Journal Summary
Please access the same menu and tabs as explained on the section 2 before. On the Masthead
tab you can reach the text editor section called Journal Summary text box editor, edit it and
dont forget to push Save button

Here the preview of journal summary section :

5. Custom Sidebar - Flyer [NOT AVAILABLE IN FREE VERSION]

This flyer on the journal index is actually a custom side block, this appearance is optional or if
your ojs does not need to be there so you can skip this step.

Here the step to create this custom block.

Activate the Custom Block Manager

First of all we need to activate the Custom Block Manager block in the Plugins page, here how
it can be done.
1. Open submenu Settings then choose Website on there please select the Plugins tab
as shown below :

2. Find the Generic Plugins in this plugin list check the Custom Block Manager Plugin, as
this image below :
3. Click Save button then refresh the page.

Create New Custom Side Block

1. After page refresh, you can create the new custom side block by click the arrow beside
Custom Block Manager plugin. Here how it can be done :

2. Then click Manage Custom Blocks text, this would pop up new modal window, wait
until loading finished, then click Add Block

again it would pop up new modal windows, please waiting and you would be shown this
text editor.
3. Please add the block name, the block name must not include space character so we
would name it such as, incoming-event, (it is important to use incoming-event as
Block Name as the theme would automatically resize the image to fit to the theme) and
would add some image content by clicking the upload on the text editor toolbar, select
the picture to show on event, than as shown below :

Tips :
- Please use incoming-event as Block name so the theme would resize the image
size that more than the sidebar size.
- If you do not want to use the incoming-event as Block name, you can uploading
the image with maximum has width : 320px, more of it would the image overlap
on the sidebar block
- The smaller size (recommended width : 320px) is better for ojs performance site
loading.
- Image sample with PSD is provided with this theme.

Sorting the Side Block

If you find that the order of the side block is not as you desire, we can change the
ordering of the side block by follow this step :
1. On the Website Settings you need to scroll on to get the Sidebar management
as shown below :
 2. Drag and drop the sidebar item either up or down, then click Save button
3. Refresh (or clear the cache of browser) to show the effect on the Journal Index
Homepage

6. Announcements
The announcements block is just ordinary announcements created by text editor or section
provided by OJS itself. Ok, here how to edit it :
1. Activate the tabs Announcements on Website Settings

2. Click the Display Announcements checkbox as seen below :

3. Add new announcements by click Add Announcements text on the announcements

table list as shown below :
Pop up would come out, then add the necessary info on the text box, example below :
 As you can see i add new image on the Short Description and Description image (the
sample image is available on the PSD files).

Do not forget to click Save button.

7. Custom Sidebar - Editorial Team [NOT AVAILABLE IN FREE VERSION]

This section is a custom sidebar block. Here how to achieve such preview :
1. Activate the custom block manager (this already explained on section 5), read it here
2. Create new Custom Side Block

You can create the new custom side block by click the arrow beside Custom Block
Manager plugin. Here how it can be done :

Then click Manage Custom Blocks text, this would pop up new modal window, wait until
loading finished, then click Add Block

again it would pop up new modal windows, please waiting and you would be shown this
text editor.

The Editorial team with image profile is created by adding html text to the Content, Do not
need to worry, this actually very simple.

Here how it done:

1. On the pop up Add Block above type editorial-team as name of the block, click Upload
and upload the all image of your journal editor profile picture (recommended maximum
 height of image is not more than 150px to optimize ojs load performance). Let this
image below give example.

Please make sure you uploaded all editor picture.

2. Then you need to click this highlighted toolbar item

It would pop up the Source Code editor, be fine sailor… this would not get so
complicated.
 We need to copy every tag started with <img until this closing tag as symbolized as
this /> on above Source Code editor, please copy it on your notepad or favorite text
editor. Here i use notepad :

From this :

To this on notepad :

We got 3 different image profile with html tag.

3. Copy this default html code into the notepad right after we just previously add some
code.

Html code :
 <div class="editorial_team_block">
<h1>Meet Our Editorial Team</h1>
<div class="col-md-4 col-xs-4"> <!--replace this line with image tag-
-> </div>
<div class="col-md-8 col-xs-8 profile">
<div class="name">Mr. Lorem</div>
<div class="speciality">Child Psychology</div>
<div class="email">lorem@example.com</div>
</div>
<div class="col-md-4 col-xs-4 clearfix"> <!--replace this line with
image tag--> </div>
<div class="col-md-8 col-xs-8 profile">
<div class="name">Mrs. Daniele</div>
<div class="speciality">Neurologist</div>
<div class="email">dan@example.com</div>
</div>
<div class="col-md-4 col-xs-4 clearfix"> <!--replace this line with
image tag--> </div>
<div class="col-md-8 col-xs-8 profile">
<div class="name">Mrs. Jawana</div>
<div class="speciality">Kindergarden Education</div>
<div class="email">jawana@example.com</div>
</div>
<!-- add another editor profile below -->

<!-- end of new editor profile -->

</div>

So the notepad would changed from this:

To this :
4. Change the line <!--replace this line with image tag--> on our image tag.
Please cut and paste every single image tag we previously copy from Source
Code Editor to replace this line :

<!--replace this line with image tag-->

With every image tag we have on the top of notepad editor, and it would resulted as
this (the edited line i give yellow highlight to show the image tag that you have cut
and paste) :
5. We need to copy paste form notepad text that we just created to Source Code
editor from previous process.

Switch to ojs again then, we need to copy paste the code from notepad.

So the Source Code editor in previous text editor from this :

Become this :

Click Ok, then Source Code windows would become closed, the common text
editor would appear as seen below :
On above text editor you can edit the title, speciality and email address of the editor
profile with no need to edit the Source Code again. Click Save and refresh the
Homepage of the Journal.

Tips :
- If you need more than 3 person to add to the sidebar block you can copy and
paste this code (assumed that you already has the image editor after you
upload new profile image) :

<div class="col-md-4 col-xs-4 clearfix"> <!--replace this line

with image tag--> </div>
<div class="col-md-8 col-xs-8 profile">
<div class="name">Mrs. Jawana</div>
<div class="speciality">Kindergarden Education</div>
<div class="email">jawana@example.com</div>
</div>

Into code (see complete code here) :

<!-- add another editor profile below -->

<!-- end of new editor profile -->

Example (the new code highlighted) :

Please repeat the process if you need to add another person.
8. Current Issues Section
Please refer to the official OJS documentation on creating Issues here.

9. Custom Sidebar - Site Link [NOT AVAILABLE IN FREE VERSION]

The advantages of this feature as seen on Homepage area are we can create backlink or
hyperlink to our main university site or other affiliate site, add link to event registration on google
form or other things.
This section is a custom sidebar block. Here how to achieve such preview :
1. Activate the custom block manager (this already explained on section 5), read it here
2. Add new Custom block manager by clicking Add Block

3. After new modal come out, you can add content as example below :

As seen above, i was adding new image by uploading it, and to add header, click the
Source Code symbol on the toolbar.

Then add the <h1> Sites Link </h1> as example below :

 After you adding the header please click Ok, then click Save button on main text editor.

Congrat, after you complete this section tutorial we have more than 1 custom side block

Tips :
- The image example for backlink is available in the PSD files
- It is recommended to upload image size not so big in size so it would optimize
the performance load of your OJS site.
- Recommended size are width : 300px, height : 100px for image in site link
- Bigger image size would make the image overlap the sidebar block

10. Journal Logo Bottom

The tenth section of journal logo placed on the bottom is

the journal thumbnail as explained on the third tutorial of
this documentation. Click here to get there.
11. Journal Footer
This section will explain on how to modify the footer as seen on this image preview :

To edit this footer, the steps are :

1. Click Website Settings, make sure the Appearance tab is activated.

2. Find Page Footer text editor

3. Click the Source Code symbol on the text editor toolbar

4. Copy and paste this HTML code on the Source Code Editor :

<div class="col-md-5"><img
src="/public/site/images/demo_ojs_red_modern/logo-example3.png" /></div>
<div class="col-md-3">
<h4><em class="fa fa-home"> </em>Address</h4>
<address>501,507 your company address<br /> 400015 Maharashtra,
 UK</address></div>
<div class="col-md-4 contact_detail">
<h4><em class="fa fa-user"> </em> Contact Info</h4>
<div class="item-contact">
<div>12345-42323 (Lorem Ipsum)</div>
<div>12255-5151 (Mrs. Catherine)</div>
<div>joe@south.carolin.uni</div>
</div>
</div>

After you copy paste above code, the Source Code editor would contain this :

Click Ok

5. You would be back to the Page Footer editor, then you can modify the address and
contact info for your journal info
 6. Finish to modify your Page Footer ? Do not forget to click Save button.

End Of Documentation - Thanks Your

You reach the end of documentation. If you have any opinion, question, suggestion to make
this theme better please reach us on navotera@gmail.com

Do not hesitate to contact us, it would be great to hear any feedback from our customer.
======= Change Log ====

Version 1 - 2019/02/09
1. Fix failed theme to be activated on admin dashboard appearance tab.
2. Add notes for the style option.
3. Add more words to language translation.
4. Centralized the Download center on the Google Drive manager.
5. Add the installation guide in the manual doc
6. Add the changelog in the documentation
7. The version of the theme shown in the plugin theme tab